React组件中音频播放的自动停止与资源管理指南

import React, { useState, useEffect } 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 钩子中解构出 stop 方法
  const [play, { pause, duration, sound, stop }] = useSound(song);
  const [seconds, setSeconds] = useState(0); // 当前播放秒数
  const [currTime, setCurrTime] = useState({ min: 0, sec: 0 }); // 当前播放时间（分:秒）

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

  // 计算音频总时长
  const totalDurationSec = duration / 1000;
  const totalMin = Math.floor(totalDurationSec / 60);
  const totalSecRemain = Math.floor(totalDurationSec % 60);

  // 定时更新当前播放时间
  useEffect(() => {
    const interval = setInterval(() => {
      if (sound) {
        const currentSeek = sound.seek([]);
        setSeconds(currentSeek);
        setCurrTime({
          min: Math.floor(currentSeek / 60),
          sec: Math.floor(currentSeek % 60),
        });
      }
    }, 1000);
    return () => clearInterval(interval); // 清理定时器
  }, [sound]);

  // 核心：利用 useEffect 的清理函数在组件卸载时停止音频
  useEffect(() => {
    // 当组件卸载时（例如，用户导航到新页面），此函数将被执行
    return () => {
      if (sound && isPlaying) { // 确保 sound 对象存在且当前正在播放
        stop(); // 调用 useSound 提供的 stop 方法停止音频
        setIsPlaying(false); // 重置播放状态
      }
    };
  }, [sound, isPlaying, stop]); // 依赖 sound, isPlaying 和 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"]'>
          {String(currTime.min).padStart(2, '0')}:{String(currTime.sec).padStart(2, '0')}
        </span>

        <input
          type='range'
          min='0'
          max={totalDurationSec}
          value={seconds}
          className='accent-[#28332B] flex-1'
          onChange={(e) => {
            sound.seek([parseFloat(e.target.value)]);
            setSeconds(parseFloat(e.target.value)); // 实时更新滑块位置
          }}
        />
        <span className='text-[6px] font-["Helvetica_Neue"]'>
          {String(totalMin).padStart(2, '0')}:{String(totalSecRemain).padStart(2, '0')}
        </span>
      </div>
    </div>
  );
};

export default AudioPlayer;

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

const NativeAudioPlayer = ({ songUrl }) => {
  const audioRef = useRef(null); // 用于引用 <audio> 元素或 new Audio() 实例
  const [isPlaying, setIsPlaying] = useState(false);

  useEffect(() => {
    // 确保 audio 实例只创建一次
    if (!audioRef.current) {
      audioRef.current = new Audio(songUrl);
      audioRef.current.preload = 'auto'; // 预加载音频
    }

    const audio = audioRef.current;

    // 添加事件监听器，例如当音频播放结束时
    const handleEnded = () => {
      setIsPlaying(false);
      // 可以在这里执行其他操作，如播放下一首
    };
    audio.addEventListener('ended', handleEnded);

    // 清理函数：组件卸载时停止播放并移除事件监听
    return () => {
      if (audio) {
        audio.pause(); // 停止播放
        audio.currentTime = 0; // 重置播放进度
        audio.removeEventListener('ended', handleEnded); // 移除事件监听器
        // 如果是 new Audio() 创建的，且不再需要，可以考虑进一步释放资源
        // 例如：audioRef.current = null;
      }
    };
  }, [songUrl]); // 依赖 songUrl，当歌曲URL变化时重新初始化

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

  return (
    <div>
      <button onClick={togglePlay}>
        {isPlaying ? '暂停' : '播放'}
      </button>
      {/* 如果使用 <audio> 标签，则可以这样： */}
      {/* <audio ref={audioRef} src={songUrl} /> */}
    </div>
  );
};

export default NativeAudioPlayer;