React应用中实现页面切换时音频自动停止的策略与实践

import React, { useState, useEffect, useRef } from 'react'; import useSound from 'use-sound'; // 确保已安装 use-sound import { IconContext } from 'react-icons'; import { AiFillPlayCircle, AiFillPauseCircle } from 'react-icons/ai';  const AudioPlayer = ({ song }) => {   const [isPlaying, setIsPlaying] = useState(false);   // 解构出 stop 方法   const [play, { pause, duration, stop, sound }] = useSound(song);    const [seconds, setSeconds] = useState();   const [currTime, setCurrTime] = useState({ min: "", sec: "" });    // 计算总时长   const totalSec = duration / 1000;   const totalMin = Math.floor(totalSec / 60);   const totalSecRemain = Math.floor(totalSec % 60);   const totalDurationTime = { min: totalMin, sec: totalSecRemain };    const playingButton = () => {     if (isPlaying) {       pause();       setIsPlaying(false);     } else {       play();       setIsPlaying(true);     }   };    // 用于更新当前播放时间   useEffect(() => {     const interval = setInterval(() => {       if (sound) {         const currentSeconds = sound.seek([]);         setSeconds(currentSeconds);         const min = Math.floor(currentSeconds / 60);         const sec = Math.floor(currentSeconds % 60);         setCurrTime({ min, sec });       }     }, 1000);     return () => clearInterval(interval);   }, [sound]);    // 核心：在组件卸载时停止音频   useEffect(() => {     // 当组件挂载时，可以执行一些初始化操作     // ...      // 返回的函数将在组件卸载时执行，或在依赖项变化导致副作用重新执行前执行     return () => {       // 停止 useSound 播放的音频       stop();        // 重置播放状态，确保下次挂载时从头开始       setIsPlaying(false);        // 如果有其他需要清理的资源，也在此处处理     };   }, [stop]); // 依赖项中包含 stop，确保清理函数能访问到最新的 stop 方法    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 < 10 ? `0${currTime.sec}` : currTime.sec}         </span>          <input           type='range'           min='0'           max={duration / 1000 || 0} // 确保max有值           value={seconds || 0} // 确保value有值           className='accent-[#28332B] flex-1'           onChange={(e) => {             if (sound) {               sound.seek([parseFloat(e.target.value)]);             }           }}         />         <span className='text-[6px] font-["Helvetica_Neue"]'>           {totalDurationTime.min}:{totalDurationTime.sec < 10 ? `0${totalDurationTime.sec}` : totalDurationTime.sec}         </span>       </div>     </div>   ); };  export default AudioPlayer;

import React, { useRef, useEffect, useState } from 'react';  const NativeAudioPlayer = ({ src }) => {   const audioRef = useRef(null);   const [isPlaying, setIsPlaying] = useState(false);   const [currentTime, setCurrentTime] = useState(0);   const [duration, setDuration] = useState(0);    // 播放/暂停控制   const togglePlay = () => {     if (isPlaying) {       audioRef.current.pause();     } else {       audioRef.current.play();     }     setIsPlaying(!isPlaying);   };    // 监听音频事件   useEffect(() => {     const audio = audioRef.current;      const handleTimeUpdate = () => setCurrentTime(audio.currentTime);     const handleLoadedMetadata = () => setDuration(audio.duration);     const handleEnded = () => setIsPlaying(false);      audio.addEventListener('timeupdate', handleTimeUpdate);     audio.addEventListener('loadedmetadata', handleLoadedMetadata);     audio.addEventListener('ended', handleEnded);      // 清理函数：在组件卸载时停止并重置音频     return () => {       audio.pause();       audio.currentTime = 0;       audio.removeEventListener('timeupdate', handleTimeUpdate);       audio.removeEventListener('loadedmetadata', handleLoadedMetadata);       audio.removeEventListener('ended', handleEnded);     };   }, [src]); // 当src变化时，重新初始化音频    const formatTime = (seconds) => {     const min = Math.floor(seconds / 60);     const sec = Math.floor(seconds % 60);     return `${min}:${sec < 10 ? '0' : ''}${sec}`;   };    return (     <div>       <audio ref={audioRef} src={src} preload="metadata" />       <button onClick={togglePlay}>         {isPlaying ? '暂停' : '播放'}       </button>       <div>         <span>{formatTime(currentTime)}</span> / <span>{formatTime(duration)}</span>       </div>       <input         type="range"         min="0"         max={duration}         value={currentTime}         onChange={(e) => {           audioRef.current.currentTime = parseFloat(e.target.value);           setCurrentTime(parseFloat(e.target.value));         }}       />     </div>   ); };  export default NativeAudioPlayer;