本文旨在解决React单页应用中页面切换时音频仍在后台播放的问题。核心解决方案是利用React useEffect Hook的清理机制，在组件卸载时自动停止音频播放。教程将详细介绍如何结合 use-sound 库或原生html5
概述
在构建单页应用（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 被卸载）时，这个清理函数就会被调用，从而自动停止当前播放的音频。
注意事项：
- beforeunload 事件的局限性： 原问题中尝试使用 window.addEventListener(“beforeunload”, …)。这个事件在用户关闭浏览器标签页或窗口时触发，而不是在单页应用内部路由切换时触发。因此，它不适用于SPA的内部导航清理。
- 组件的条件渲染： 如果 AudioPlayer 组件或其父组件（如 BirdCard）是根据条件渲染的（例如，通过 if 语句控制显示与隐藏），那么当条件变为 false 导致组件卸载时，音频也会停止。这通常是期望的行为，但如果你的应用场景要求在组件隐藏时音频仍继续播放，则需要将音频状态管理提升到组件树的更高层级，甚至使用全局状态管理（如redux、Context API）来控制音频的生命周期，使其不依赖于单个播放器组件的挂载状态。
使用原生 HTML5
如果 use-sound 库的清理机制未能满足需求，或者你倾向于直接控制音频元素，可以使用原生HTML5
以下是使用原生
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
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
