单击播放后，音频会被“自动播放”阻止？

Question

我正在构建一个播放音乐的Vue应用程序。这是相关的HTML

<template>
  <div class="container">
      <button type="button" ref="play" class="btn btn-primary">
      <font-awesome-icon id="playIcon" icon="play" />
      </button>
      <audio ref="audio"></audio>
  </div>
</template>

这是播放音乐的方法。音频源在早期功能中正确设置。

togglePlay(update) {
      if (this.isLoaded != true) {
        return;
      }

      if (this.isPlaying == true) {
          this.audioDOM.pause();
          this.isPlaying = false;
          if (update) {
            this.sendUpdate();
          }
      } else {
          this.audioDOM.play();
          this.isPlaying = true;
          if (update) {
            this.sendUpdate();
          }
      }
    }

在Vue组件的mounted()部分，我有这个：

this.playBtn.addEventListener("click", () => {
        this.togglePlay(true);
    }, false);

但是，它不会启动音频，因为它在到达行this.audioDOM.play()时会抛出自动播放错误，并说我需要提示用户输入。但是，显然用户通过单击播放按钮提供输入！我需要改变什么？

Answer 1

您需要将事件传递给this.togglePlay。事件必须存在于调用函数的上下文中，否则它将不知道它是由用户触发的。

试试这个

<template>
  <div class="container">
      <button
          type="button"
          @click="togglePlay($event)" <!-- here I have added @click as an event handler -->
          class="btn btn-primary"
      >
      <font-awesome-icon id="playIcon" icon="play" />
      </button>
      <audio ref="audio"></audio>
  </div>
</template>
<script>
export default {
methods :{
    togglePlay(ev) { //since update is always true we don't need it,
      if (this.isLoaded != true) { // lets get the event instead
        return;
      }

      if (this.isPlaying == true) {
          this.audioDOM.pause();
          this.isPlaying = false;
          this.sendUpdate();
      } else {
          this.audioDOM.play();
          this.isPlaying = true;
          this.sendUpdate()
      }
    }

  }
}

<script>

Answer 2

尴尬。原来错误是DOMException，因为我设置了错误的来源。哎呦！