Question

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

“未捕获（承诺）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)
        })
    }
}

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


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

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

Answer 2

我认为最好使用此组件（https://github.com/justinmc/react-audio-player）代替直接的dom操作

使用React播放音频

2 个答案: