在React应用中实现音频播放器页面导航时自动停止播放

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);
  // 解构useSound返回的播放、暂停、时长和声音实例
  const [play, { pause, duration, sound }] = useSound(song);
  const [seconds, setSeconds] = useState();
  const [currTime, setCurrTime] = useState({ min: "", sec: "" });

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

  // 格式化时长
  const totalMin = Math.floor((duration || 0) / 1000 / 60);
  const totalSec = Math.floor(((duration || 0) / 1000) % 60);

  // 更新当前播放时间
  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]);

  // audioRef用于直接操作HTML Audio元素（尽管useSound已封装）
  const audioRef = useRef(null); 

  return (
    <div ref={audioRef} 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={duration ? duration / 1000 : 0}
          value={seconds || 0}
          className='accent-[#28332B] flex-1'
          onChange={(e) => {
            if (sound) sound.seek([e.target.value]);
          }}
        />
        <span className='text-[6px] font-["Helvetica_Neue"]'>
          {totalMin}:{String(totalSec).padStart(2, '0')}
        </span>
      </div>
    </div>
  );
};

export default AudioPlayer;

// ...组件其他部分不变...

const AudioPlayer = ({ song }) => {
  const [isPlaying, setIsPlaying] = useState(false);
  // 注意：这里需要从useSound中解构出 `stop` 方法
  const [play, { pause, duration, stop, sound }] = useSound(song); 
  const [seconds, setSeconds] = useState();
  const [currTime, setCurrTime] = useState({ min: "", sec: "" });

  // ... playingButton 和时间格式化等函数不变 ...

  // 定时器更新播放进度
  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 () => {
      if (isPlaying) { // 如果当前正在播放，则停止
        stop(); // 调用useSound提供的停止方法
        setIsPlaying(false); // 重置播放状态
      }
      // 对于更底层的HTML Audio元素，确保其也停止并重置
      if (audioRef.current) {
        audioRef.current.pause();
        audioRef.current.currentTime = 0;
      }
    };
  }, [isPlaying, stop]); // 依赖项包含 isPlaying 和 stop

  // ...组件JSX渲染部分不变...
};

export default AudioPlayer;

import React, { useEffect, useRef } from 'react';

const NativeAudioPlayer = ({ song }) => {
  const audioRef = useRef(null); // useRef来持有audio元素实例

  useEffect(() => {
    // 1. 在组件挂载时初始化并播放音频
    const audio = new Audio(song);
    audioRef.current = audio; // 将实例存入ref

    // 可以添加事件监听器，例如ended事件
    audio.addEventListener('ended', () => {
      console.log('Audio finished playing');
      // 可以更新UI状态，如将播放按钮变为播放状态
    });

    audio.play().catch(error => console.error("Error playing audio:", error));

    // 2. 在组件卸载时停止、清理音频
    return () => {
      if (audioRef.current) {
        audioRef.current.pause(); // 暂停播放
        audioRef.current.currentTime = 0; // 重置播放时间
        audioRef.current.src = ''; // 清除src，释放资源
        audioRef.current.load(); // 强制加载空内容，进一步释放
        audioRef.current = null; // 清除引用
      }
    };
  }, [song]); // 依赖项为song，当歌曲改变时会重新创建音频实例

  return (
    <div>
      {/* 你的播放/暂停按钮和其他UI，通过状态管理来控制 */}
      <p>Playing: {song}</p>
    </div>
  );
};

export default NativeAudioPlayer;