如何使用use-sound避免多组件音频播放重叠问题

你遇到的问题根源是：use-sound默认采用Web Audio API实现，不会在DOM中生成<audio>标签，所以之前通过遍历DOM音频元素的方法无效。同时interrupt选项仅作用于同一个useSound实例内的音频（比如精灵音效），无法跨组件实例中断播放。

下面提供两种可行的解决方案：

方案一：通过React Context全局管理音频播放状态 #

这种方法适合React项目，通过Context共享所有音频的控制函数，实现播放新音频时自动停止其他音频。

1. 创建音频控制Context

import { createContext, useContext, useState, useCallback } from 'react';

const AudioContext = createContext();

export const AudioProvider = ({ children }) => {
  // 存储所有音频的停止函数
  const [audioStoppers, setAudioStoppers] = useState([]);

  // 注册音频停止函数
  const registerAudio = useCallback((stopFn) => {
    setAudioStoppers(prev => [...prev, stopFn]);
    // 返回注销函数，组件卸载时清理
    return () => setAudioStoppers(prev => prev.filter(fn => fn !== stopFn));
  }, []);

  // 停止所有其他音频
  const stopAllOtherAudios = useCallback((currentStopFn) => {
    audioStoppers.forEach(fn => {
      if (fn !== currentStopFn) {
        fn();
      }
    });
  }, [audioStoppers]);

  return (
    <AudioContext.Provider value={{ registerAudio, stopAllOtherAudios }}>
      {children}
    </AudioContext.Provider>
  );
};

export const useAudioControl = () => useContext(AudioContext);

2. 修改Button组件，使用Context控制播放

import useSound from 'use-sound';
import { useAudioControl, useEffect } from './AudioContext';

const Button = ({soundPath}) => {
  const [play, { stop }] = useSound(soundPath);
  const { registerAudio, stopAllOtherAudios } = useAudioControl();

  useEffect(() => {
    // 注册当前音频的停止函数，组件卸载时自动注销
    const unregister = registerAudio(stop);
    return unregister;
  }, [stop, registerAudio]);

  const handlePlay = () => {
    // 先停止所有其他音频
    stopAllOtherAudios(stop);
    play();
  };

  return <button onClick={handlePlay}>Boop!</button>;
};

3. 在根组件包裹AudioProvider

import { AudioProvider } from './AudioContext';

function App() {
  return (
    <AudioProvider>
      <div>
        <Button soundPath="https://...audio1.mp3" />
        <Button soundPath="https://...audio2.mp3" />
        <Button soundPath="https://...audio3.mp3" />
      </div>
    </AudioProvider>
  );
}

方案二：使用全局变量存储停止函数（非React专属） #

如果项目不是纯React或者不想用Context，可以用全局变量来管理所有音频的停止函数：

import useSound from 'use-sound';
import { useEffect } from 'react';

// 全局存储所有音频的停止函数
const globalAudioStoppers = new Set();

const Button = ({soundPath}) => {
  const [play, { stop }] = useSound(soundPath);

  // 组件挂载时注册停止函数
  useEffect(() => {
    globalAudioStoppers.add(stop);
    return () => globalAudioStoppers.delete(stop);
  }, [stop]);

  const handlePlay = () => {
    // 停止所有其他音频
    globalAudioStoppers.forEach(fn => {
      if (fn !== stop) fn();
    });
    play();
  };

  return <button onClick={handlePlay}>Boop!</button>;
};

补充说明 #

• 两种方案的核心都是收集所有音频的停止函数，在播放新音频前调用其他音频的停止方法，避免重叠。
• use-sound的interrupt选项仅对同一实例的音频生效（比如同一个useSound调用加载的精灵音效切换），所以跨组件场景必须手动管理。

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