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

一、理解React组件生命周期与音频播放

在单页应用（spa）中，用户从一个页面导航到另一个页面时，通常会导致前一个页面上渲染的react组件被卸载（unmount）。如果这些组件中包含音频播放器，而没有正确处理其生命周期，音频就可能在后台继续播放。

React的useEffect钩子提供了一个强大的机制来处理组件的副作用，包括订阅、DOM操作以及清理操作。useEffect的清理函数（即其返回的函数）会在组件卸载时执行，或者在依赖项变化导致副作用重新执行前执行。这是实现页面切换时音频自动停止的关键。

值得注意的是，原始代码中尝试使用window.addEventListener("beforeunload", ...)来停止音频。beforeunload事件是浏览器级别的事件，它在用户关闭标签页或浏览器窗口时触发，而非在React组件卸载时触发。对于React应用内部的路由切换，组件卸载是更合适的处理时机。

二、基于 useSound 库的解决方案

当使用useSound这样的第三方库管理音频时，库本身通常会提供控制音频生命周期的方法。useSound库就提供了play、pause和stop等方法。

1. 核心原理：利用 useEffect 清理函数

useEffect钩子允许你返回一个函数，这个返回的函数就是清理函数。当组件即将卸载时，React会调用这个清理函数。因此，我们可以在这里执行停止音频的操作。

2. 实现步骤

1. 解构 stop 方法： 从 useSound 钩子返回的对象中解构出 stop 方法。
2. 在清理函数中调用 stop()： 在 useEffect 的清理函数中调用 stop() 方法，以确保音频在组件卸载时停止播放。
3. 纠正 audioRef 的误用： 原始代码中的audioRef被绑定到了一个div元素上，并且尝试调用audioRef.current.pause()和audioRef.current.currentTime = 0;。由于audioRef.current是一个div，这些操作是无效的。当使用useSound时，音频的实际控制权在useSound内部，我们应该使用useSound提供的stop方法来管理。

3. 示例代码

以下是修改后的 AudioPlayer 组件的关键部分，展示了如何正确利用useEffect清理功能停止useSound管理的音频：

AI Ping

一站式大模型服务评测与API调用平台

下载

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 (
    

      

        {!isPlaying ? (
          
            
              
            
          
        ) : (
          
            
              
            
          
        )}
      
      

        
          {currTime.min}:{currTime.sec < 10 ? `0${currTime.sec}` : currTime.sec}
        

         {
            if (sound) {
              sound.seek([parseFloat(e.target.value)]);
            }
          }}
        />
        
          {totalDurationTime.min}:{totalDurationTime.sec < 10 ? `0${totalDurationTime.sec}` : totalDurationTime.sec}
        
      
    
  );
};

export default AudioPlayer;

4. 注意事项

• 组件卸载场景： 上述方法会在AudioPlayer组件被卸载的任何情况下停止音频。这意味着，如果你的BirdCard组件在不切换页面的情况下（例如，通过条件渲染）被移除，音频也会停止。
• 全局音频管理： 如果你的应用场景要求音频在组件卸载后仍然保持播放，或者需要跨多个页面共享同一个音频实例，那么你需要将音频状态提升到组件树的更高层级（例如，使用React Context或Redux等状态管理库），并在更顶层的组件或全局状态中管理音频的播放与停止逻辑。

三、原生HTML5

如果useSound库的行为不符合预期，或者你需要对音频播放有更底层、更精细的控制，可以直接使用原生HTML5

1. 为何考虑原生方案？

• 完全控制： 直接操作DOM元素提供最大的灵活性。
• 调试方便： 当第三方库出现难以排查的问题时，原生方案通常更直接。
• 避免库依赖： 减少项目对特定库的依赖。

2. 实现原理

1. 使用 useRef 引用 创建一个ref并将其绑定到JSX中的
2. 在 useEffect 中控制播放： 在组件挂载时，可以通过ref.current.play()控制播放，通过ref.current.pause()控制暂停。
3. 在清理函数中停止并重置： 在useEffect的清理函数中，调用ref.current.pause()停止播放，并设置ref.current.currentTime = 0;将播放进度重置到开头。

3. 示例代码

以下是一个简化的原生HTML5

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 (
    

      
  );
};

export default NativeAudioPlayer;

四、总结与最佳实践

在React应用中实现页面切换时音频自动停止，核心在于理解组件的生命周期并利用useEffect的清理机制。

1. 优先使用库提供的清理方法： 如果你使用useSound等第三方音频库，首先应查阅其文档，了解如何在其生命周期内停止和清理音频资源。通常，它们会提供如stop()这样的方法，应在useEffect的清理函数中调用。
2. 考虑原生HTML5 当第三方库无法满足需求，或其内部行为导致问题时，直接使用原生
3. 集中式音频状态管理： 对于复杂的应用，如果音频需要在多个组件或页面之间共享状态，或者有更复杂的播放逻辑（如播放列表、全局控制），则应考虑将音频播放逻辑提升到更高层级的组件或使用全局状态管理方案（如Context API、Redux）来统一管理音频的生命周期和状态。
4. 避免内存泄漏： 无论采用哪种方案，始终确保在组件卸载时停止音频播放并清理相关事件监听器，以防止内存泄漏和不必要的资源占用。

通过上述方法，你可以有效地在React应用中管理音频播放，确保用户体验的流畅性，并避免音频在后台意外持续播放的问题。