React定时器应用使用多音频报错：WebMediaPlayer实例过多

你的问题出在每次组件渲染都会创建新的Audio实例——随着组件反复渲染，startSfx和pauseSfx会被不断重新初始化，导致浏览器中累积的WebMediaPlayer实例超过限制，触发报错。

修复方案：用useRef缓存Audio实例 #

React的useRef可以在组件整个生命周期内保存同一个引用，不会随渲染重新创建对象。用它来存储Audio实例，就能避免重复创建导致的实例过多问题：

import { useRef } from 'react';

// ...

// 用useRef缓存Audio实例，仅在组件挂载时创建一次
const startSfx = useRef(new Audio(startPing));
const pauseSfx = useRef(new Audio(pausePing));

const pauseCycle = () => {
  // ...
  // 通过.current访问缓存的实例并播放
  pauseSfx.current.play().catch(err => {
    console.error('暂停音效播放失败:', err);
  });
};

const startCycle = () => {
  // ...
  startSfx.current.play().catch(err => {
    console.error('启动音效播放失败:', err);
  });
};

额外说明 #

• 加上play()的catch是因为浏览器有用户交互限制：音频播放必须由用户主动操作（比如点击）触发，否则会被拦截，捕获错误能帮助排查这类问题。
• 如果你的音效文件很小，也可以考虑在组件挂载时调用startSfx.current.load()预加载音频，但用useRef缓存已经足够解决当前核心问题。

内容的提问来源于stack exchange，提问作者Horkos