React音频播放器：页面切换时自动停止播放的实现与最佳实践

import React, { useState, useEffect, useRef } from 'react';
import useSound from '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, sound, stop }] = useSound(song); 
  const [seconds, setSeconds] = useState(0);
  const [currTime, setCurrTime] = useState({ min: "", sec: "" });

  // 计算总时长
  const totalSec = duration / 1000;
  const totalMin = Math.floor(totalSec / 60);
  const totalSecRemain = Math.floor(totalSec % 60);
  const totalTime = { 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 () => {
      // 当组件卸载时，调用 use-sound 提供的 stop 函数
      if (stop) {
        stop(); 
      }
      // 如果你同时使用了原生 audio 元素并对其进行了引用，也应在此处清理
      // 例如：audioRef.current?.pause();
      // audioRef.current?.currentTime = 0;
    };
  }, [stop]); // 依赖项包含 stop，确保其在清理时可用

  // 注意：原代码中的 audioRef 绑定在 div 上，而非实际的 <audio> 元素。
  // 对于 use-sound，其内部管理 audio 元素，通常无需手动操作。
  // 如果要使用原生 audio 元素，audioRef 应指向 <audio> 标签或存储 Audio 实例。
  // const audioRef = useRef(null); 

  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}:{String(currTime.sec).padStart(2, '0')}
        </span>

        <input
          type='range'
          min='0'
          max={totalSec}
          value={seconds}
          className='accent-[#28332B] flex-1'
          onChange={(e) => {
            if (sound) {
              sound.seek([e.target.value]);
            }
          }}
        />
        <span className='text-[6px] font-["Helvetica_Neue"]'>
          {totalTime.min}:{String(totalTime.sec).padStart(2, '0')}
        </span>
      </div>
    </div>
  );
};

export default AudioPlayer;

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

const NativeAudioPlayer = ({ song }) => {
  const audioRef = useRef(null); // 用于引用 <audio> 元素或 Audio 实例
  const [isPlaying, setIsPlaying] = useState(false);
  const [duration, setDuration] = useState(0);
  const [currentTime, setCurrentTime] = useState(0);

  // 初始化音频元素和事件监听器
  useEffect(() => {
    const audio = new Audio(song);
    audioRef.current = audio; // 将 Audio 实例存储在 ref 中

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

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

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

    audio.addEventListener('loadedmetadata', setAudioData);
    audio.addEventListener('timeupdate', updateCurrentTime);
    audio.addEventListener('ended', handleEnded);

    // 清理函数：在组件卸载时停止并重置音频
    return () => {
      if (audioRef.current) {
        audioRef.current.pause();
        audioRef.current.currentTime = 0;
        // 移除事件监听器以防止内存泄露
        audioRef.current.removeEventListener('loadedmetadata', setAudioData);
        audioRef.current.removeEventListener('timeupdate', updateCurrentTime);
        audioRef.current.removeEventListener('ended', handleEnded);
      }
    };
  }, [song]); // 当歌曲源变化时重新初始化音频

  const togglePlayPause = () => {
    if (audioRef.current) {
      if (isPlaying) {
        audioRef.current.pause();
      } else {
        audioRef.current.play();
      }
      setIsPlaying(!isPlaying);
    }
  };

  const handleSeek = (e) => {
    if (audioRef.current) {
      audioRef.current.currentTime = e.target.value;
      setCurrentTime(e.target.value);
    }
  };

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

  return (
    <div className='items-center mx-auto text-center'>
      <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;