React应用中自动停止背景音频的实现教程-js教程-PHP中文网

React应用中自动停止背景音频的实现教程

本文旨在解决React单页应用中页面切换时音频仍在后台播放的问题。核心解决方案是利用React useEffect Hook的清理机制，在组件卸载时自动停止音频播放。教程将详细介绍如何结合 use-sound 库或原生HTML5 <audio> 元素实现此功能，并提供代码示例及注意事项，确保音频资源的有效管理和用户体验的优化。

概述

在构建单页应用（spa）时，音频播放是一个常见的需求。然而，当用户在不同页面间导航时，如果未正确管理音频的生命周期，可能会出现音频在后台持续播放的现象，这不仅会消耗资源，还会严重影响用户体验。本文将深入探讨如何在react组件中实现音频的自动停止功能，确保当承载音频播放器的组件被卸载时，音频也能随之停止。

React组件生命周期与清理机制

React组件的生命周期管理是解决此问题的关键。useEffect Hook允许我们在函数组件中执行副作用操作（如数据获取、订阅或手动更改DOM），并且提供了一个可选的返回函数，用于执行清理操作。当组件卸载时，或者在依赖项发生变化且副作用重新执行之前，这个返回函数会被调用。这是停止音频播放的理想时机。

使用 use-sound 库实现自动停止

use-sound 是一个流行的React Hook，用于简化音频播放的管理。它提供了一系列控制函数，包括 play、pause 和 stop。要实现页面切换时自动停止音频，我们只需在 useEffect 的清理函数中调用 stop() 方法。

考虑以下 AudioPlayer 组件示例：

import React, { useState, useEffect, useRef } from 'react';
import useSound from 'use-sound';
import { AiFillPlayCircle, AiFillPauseCircle } from 'react-icons/ai';
import { IconContext } from 'react-icons';

const AudioPlayer = ({ song }) => {
  const [isPlaying, setIsPlaying] = useState(false);
  // 解构出 stop 函数
  const [play, { pause, duration, sound, stop }] = useSound(song);
  const [seconds, setSeconds] = useState(0); // 初始化为0
  const [currTime, setCurrTime] = useState({ min: "0", sec: "00" }); // 初始化为字符串

  // 播放/暂停控制
  const playingButton = () => {
    if (isPlaying) {
      pause();
      setIsPlaying(false);
    } else {
      play();
      setIsPlaying(true);
    }
  };

  // 格式化时间
  const formatTime = (secs) => {
    const min = Math.floor(secs / 60);
    const sec = Math.floor(secs % 60);
    return {
      min: String(min),
      sec: String(sec).padStart(2, '0') // 保证秒数两位显示
    };
  };

  // 监听播放进度
  useEffect(() => {
    let interval;
    if (sound) {
      interval = setInterval(() => {
        setSeconds(sound.seek([]));
        const { min, sec } = formatTime(sound.seek([]));
        setCurrTime({ min, sec });
      }, 1000);
    }
    return () => clearInterval(interval); // 清理定时器
  }, [sound]);

  // 获取总时长
  const totalDuration = duration ? formatTime(duration / 1000) : { min: "0", sec: "00" };

  // 核心：组件卸载时停止音频
  useEffect(() => {
    return () => {
      // 停止 use-sound 实例的播放
      if (sound) {
        stop();
      }
      // 如果使用了原生 audio 元素，也需要进行清理
      // audioRef.current?.pause();
      // audioRef.current?.currentTime = 0;
    };
  }, [sound, stop]); // 依赖 sound 和 stop，确保清理函数能访问到最新的引用

  // 注意：原代码中的 audioRef 绑定到 div 上，并非实际的 audio 元素。
  // 如果使用 use-sound，通常不需要直接操作原生 audio 元素。
  // 如果需要直接操作，应将 ref 绑定到实际的 <audio> 标签上。
  // const audioRef = useRef(null); // 如果使用原生audio，这里会用到

  return (
    <div className='items-center mx-auto text-center'>
      <div>
        {!isPlaying ? (
          <button className='playButton' onClick={playingButton}>
            <IconContext.Provider value={{ size: "40px", color: "#28332B" }}>
              <AiFillPlayCircle />
            </IconContext.Provider>
          </button>
        ) : (
          <button className='playButton' onClick={playingButton}>
            <IconContext.Provider value={{ size: "40px", color: "#28332B" }}>
              <AiFillPauseCircle />
            </IconContext.Provider>
          </button>
        )}
      </div>
      <div className='flex items-center space-x-2'>
        <span className='text-[6px] font-["Helvetica_Neue"]'>
          {currTime.min}:{currTime.sec}
        </span>

        <input
          type='range'
          min='0'
          max={duration ? duration / 1000 : 0} // 避免 duration 为 undefined 时的错误
          value={seconds}
          className='accent-[#28332B] flex-1'
          onChange={(e) => {
            if (sound) { // 确保 sound 对象存在
              sound.seek([parseFloat(e.target.value)]);
            }
          }}
        />
        <span className='text-[6px] font-["Helvetica_Neue"]'>
          {totalDuration.min}:{totalDuration.sec}
        </span>
      </div>
    </div>
  );
};

export default AudioPlayer;

登录后复制

在上述代码中，关键的改动在于 useEffect Hook 的返回函数：

useEffect(() => {
  return () => {
    if (sound) {
      stop(); // 当组件卸载时调用 use-sound 的 stop 方法
    }
  };
}, [sound, stop]); // 确保依赖项正确

登录后复制

当 AudioPlayer 组件从DOM中移除（例如，用户导航到另一个页面，导致 BirdCard 和其内部的 AudioPlayer 被卸载）时，这个清理函数就会被调用，从而自动停止当前播放的音频。

注意事项：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

beforeunload 事件的局限性： 原问题中尝试使用 window.addEventListener("beforeunload", ...)。这个事件在用户关闭浏览器标签页或窗口时触发，而不是在单页应用内部路由切换时触发。因此，它不适用于SPA的内部导航清理。
组件的条件渲染： 如果 AudioPlayer 组件或其父组件（如 BirdCard）是根据条件渲染的（例如，通过 if 语句控制显示与隐藏），那么当条件变为 false 导致组件卸载时，音频也会停止。这通常是期望的行为，但如果你的应用场景要求在组件隐藏时音频仍继续播放，则需要将音频状态管理提升到组件树的更高层级，甚至使用全局状态管理（如Redux、Context API）来控制音频的生命周期，使其不依赖于单个播放器组件的挂载状态。

使用原生 HTML5 <audio> 元素实现自动停止

如果 use-sound 库的清理机制未能满足需求，或者你倾向于直接控制音频元素，可以使用原生HTML5 <audio> 标签。这种方法需要手动创建、控制和清理音频元素。

以下是使用原生 <audio> 元素实现自动停止的思路：

import React, { useState, useEffect, useRef } from 'react';
// 假设你仍然需要图标库
import { AiFillPlayCircle, AiFillPauseCircle } from 'react-icons/ai';
import { IconContext } from 'react-icons';

const NativeAudioPlayer = ({ song }) => {
  const audioRef = useRef(null); // 绑定到 <audio> 元素
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);

  // 初始化音频元素并设置事件监听器
  useEffect(() => {
    const audio = audioRef.current;
    if (!audio) return;

    audio.src = song; // 设置音频源

    const handleLoadedMetadata = () => {
      setDuration(audio.duration);
    };

    const handleTimeUpdate = () => {
      setCurrentTime(audio.currentTime);
    };

    const handleEnded = () => {
      setIsPlaying(false);
      setCurrentTime(0); // 播放结束后重置时间
    };

    audio.addEventListener('loadedmetadata', handleLoadedMetadata);
    audio.addEventListener('timeupdate', handleTimeUpdate);
    audio.addEventListener('ended', handleEnded);

    // 清理函数：组件卸载时停止并重置音频
    return () => {
      audio.pause();
      audio.currentTime = 0;
      audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
      audio.removeEventListener('timeupdate', handleTimeUpdate);
      audio.removeEventListener('ended', handleEnded);
    };
  }, [song]); // 当 song 变化时重新初始化

  // 播放/暂停控制
  const togglePlayPause = () => {
    const audio = audioRef.current;
    if (audio) {
      if (isPlaying) {
        audio.pause();
      } else {
        audio.play();
      }
      setIsPlaying(!isPlaying);
    }
  };

  // 拖动进度条
  const handleSeek = (e) => {
    const audio = audioRef.current;
    if (audio) {
      audio.currentTime = parseFloat(e.target.value);
      setCurrentTime(audio.currentTime);
    }
  };

  // 格式化时间
  const formatTime = (secs) => {
    const min = Math.floor(secs / 60);
    const sec = Math.floor(secs % 60);
    return `${String(min).padStart(1, '0')}:${String(sec).padStart(2, '0')}`;
  };

  return (
    <div className='items-center mx-auto text-center'>
      {/* 隐藏的 audio 元素 */}
      <audio ref={audioRef} />

      <div>
        {!isPlaying ? (
          <button className='playButton' onClick={togglePlayPause}>
            <IconContext.Provider value={{ size: "40px", color: "#28332B" }}>
              <AiFillPlayCircle />
            </IconContext.Provider>
          </button>
        ) : (
          <button className='playButton' onClick={togglePlayPause}>
            <IconContext.Provider value={{ size: "40px", color: "#28332B" }}>
              <AiFillPauseCircle />
            </IconContext.Provider>
          </button>
        )}
      </div>
      <div className='flex items-center space-x-2'>
        <span className='text-[6px] font-["Helvetica_Neue"]'>
          {formatTime(currentTime)}
        </span>

        <input
          type='range'
          min='0'
          max={duration}
          value={currentTime}
          className='accent-[#28332B] flex-1'
          onChange={handleSeek}
        />
        <span className='text-[6px] font-["Helvetica_Neue"]'>
          {formatTime(duration)}
        </span>
      </div>
    </div>
  );
};

export default NativeAudioPlayer;

登录后复制

在原生HTML5音频的实现中，useEffect 的清理函数承担了停止音频和移除事件监听器的双重责任，这对于防止内存泄漏至关重要。

    return () => {
      audio.pause(); // 停止播放
      audio.currentTime = 0; // 重置播放进度
      // 移除所有事件监听器，避免内存泄漏
      audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
      audio.removeEventListener('timeupdate', handleTimeUpdate);
      audio.removeEventListener('ended', handleEnded);
    };

登录后复制

总结

无论是使用 use-sound 这样的第三方库，还是直接操作原生HTML5 <audio> 元素，核心原则都是利用React useEffect Hook 的清理机制。通过在组件卸载时执行 stop() 方法（对于 use-sound）或 pause() 并重置 currentTime（对于原生音频），可以确保音频资源得到及时释放，避免在用户导航到其他页面后音频仍在后台播放的问题。正确的生命周期管理不仅提升了用户体验，也优化了应用的资源利用。

以上就是React应用中自动停止背景音频的实现教程的详细内容，更多请关注php中文网其它相关文章！