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;