使用 React 播放音频

Question

无论我做什么，我在尝试播放声音时都会收到一条错误消息：

未捕获(承诺(穹顶。

在Google上搜索后，我发现如果我在用户对页面上执行任何操作之前自动播放音频，它应该会出现，但对我来说并非如此。我什至这样做了：

componentDidMount() {
  let audio = new Audio('sounds/beep.wav');
  audio.load();
  audio.muted = true;
  document.addEventListener('click', () => {
    audio.muted = false;
    audio.play();
  });
}

但消息仍然出现，并且声音无法播放。我该怎么办？

Answer 1

音频是一个HTMLMediaElement，调用play()返回一个 Promise，所以需要处理。根据文件的大小，它通常已经准备好了，但如果它没有加载(例如挂起的承诺(，它将抛出"AbortError"DOMException。

您可以先检查它是否加载，然后捕获错误以关闭消息。例如：

componentDidMount() {
      this.audio = new Audio('sounds/beep.wav')
      this.audio.load()
      this.playAudio()
}
playAudio() {
    const audioPromise = this.audio.play()
    if (audioPromise !== undefined) {
      audioPromise
        .then(_ => {
          // autoplay started
        })
        .catch(err => {
          // catch dom exception
          console.info(err)
        })
    }
}

另一种在没有显示错误的情况下运行良好的模式是将组件创建为 具有 autoPlay 属性的HTML audio element，然后在需要时将其呈现为组件。例如：

const Sound = ( { soundFileName, ...rest } ) => (
  <audio autoPlay src={`sounds/${soundFileName}`} {...rest} />
)
const ComponentToAutoPlaySoundIn = () => (
   <>
     ...
     <Sound soundFileName="beep.wav" />
     ...
   </>
)

Answer 2

简单的错误音

如果您想要像播放简单的错误音一样简单的东西(例如，对于条形码扫描仪环境中的非视觉反馈(，并且不想安装依赖项等 - 它可以非常简单。只需链接到您的音频文件：

import ErrorAudio from './error.mp3'

在代码中，引用它并播放它：

var AudioPlay = new Audio (ErrorAudio);
AudioPlay.play();

在搞砸了更复杂的选项后才发现这一点。

Answer 3

我认为最好使用此组件(https://github.com/justinmc/react-audio-player(而不是直接的dom操作

Answer 4

确实非常简单

const [, setMuted] = useState(true)
useEffect(() => {
  const player = new Audio(./sound.mp3);
  const playPromise = player.play();
  if (playPromise !== undefined) 
      return playPromise.then(() => setMuted(false)).catch(() => setMuted(false));
}, [])

我希望它现在可以工作:)