如何在 React 中正确暂停音频播放-html教程-PHP中文网

如何在 React 中正确暂停音频播放

本文详解 react 中使用 html5 audio api 暂停音频失败的常见原因及解决方案，包括音频加载时机、状态同步、事件监听与清理等关键实践。

本文详解 react 中使用 html5 audio api 暂停音频失败的常见原因及解决方案，包括音频加载时机、状态同步、事件监听与清理等关键实践。

在 React 中调用 audio.pause() 无效，通常并非方法本身有问题，而是由于音频实例未真正进入“可播放”状态，或 play() 调用被静音策略/异步限制拦截，导致后续 pause() 实际作用于一个从未成功播放的实例。

✅ 正确做法：确保音频已加载并可播放后再操作

Audio 对象是异步加载资源的。直接 new Audio(track) 后立即调用 play() 可能失败（返回 Promise 并 reject），此时 audio.paused 仍为 true，后续 pause() 自然无效果。应监听 canplay 或 loadeddata 事件确认就绪：

React Best Practices 2 0.1.0

React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。

下载

import React, { useState, useEffect, useRef } from 'react';
import track from '../assets/haydn3.wav';

const AudioPlayer = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const audioRef = useRef<htmlaudioelement null>(null);

  useEffect(() => {
    const audio = new Audio(track);
    audioRef.current = audio;

    // 监听加载完成事件
    const handleCanPlay = () => {
      console.log('✅ Audio is ready to play');
    };
    audio.addEventListener('canplay', handleCanPlay);

    // 清理：卸载时释放资源
    return () => {
      audio.removeEventListener('canplay', handleCanPlay);
      audio.pause();
      audio.currentTime = 0;
    };
  }, []);

  const handleTogglePlay = () => {
    const audio = audioRef.current;
    if (!audio) return;

    if (!isPlaying) {
      // play() 返回 Promise，需处理可能的拒绝（如自动播放策略）
      audio.play()
        .then(() => {
          console.log('▶️ Playback started');
          setIsPlaying(true);
        })
        .catch((err) => {
          console.warn('⚠️ Play failed:', err.message);
          // 可触发用户手势（如点击按钮）后重试
        });
    } else {
      audio.pause();
      console.log('⏸️ Paused — paused:', audio.paused); // 始终输出 true
      setIsPlaying(false);
    }
  };

  return (
    <button onclick="{handleTogglePlay}">
      {isPlaying ? 'Pause' : 'Play'}
    </button>
  );
};

export default AudioPlayer;</htmlaudioelement>

⚠️ 关键注意事项

不要在每次渲染中新建 Audio 实例：原代码中 const audio = new Audio(track) 写在组件函数体内，会导致每次状态更新都创建新实例，旧实例未清理，pause() 作用于错误对象。✅ 正确方式是用 useRef 保存单个实例。
play() 是异步且受策略限制：现代浏览器禁止无用户交互（如点击）的自动播放。若首次 play() 未由显式事件触发，会失败，paused 保持 true，pause() 就成了空操作。
始终检查 audio.paused 和 audio.readyState：调试时加日志：
```
console.log('Before pause → paused:', audio.paused, 'readyState:', audio.readyState);
```
readyState === 0 表示未加载；1 表示有元数据；≥2 才表示可播放。
清理必不可少：组件卸载时调用 audio.pause() 并移除事件监听器，避免内存泄漏和后台无声播放。