javascript - 使用 React 播放音频

Question

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

Uncaught (in promise) DOMException.

在 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, and calling play() returns a Promise ，所以需要处理。根据文件的大小，它通常已准备就绪，但如果未加载(例如待处理的 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 音频元素，然后在需要时将其呈现为组件。例如:

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

const ComponentToAutoPlaySoundIn = () => (
   <>
     ...
     <Sound soundFileName="beep.wav" />
     ...
   </>
)