Аудио заблокировано для "автозапуска" после нажатия кнопки воспроизведения?

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();
          }
      }
    }

В части mounted() компонента Vue у меня есть это:

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

Однако, это делаетне запускайте звук, потому что он выдает ошибку автозапуска, когда достигает строки this.audioDOM.play() и говорит, что мне нужно запросить ввод у пользователя.Тем не менее, очевидно, что пользователь обеспечивает ввод, нажав кнопку воспроизведения!Что мне нужно изменить?

Answer 1

Awkward.Оказывается, ошибка была DOMException, потому что я неправильно указал источник.Упс!

Answer 2

Вам нужно передать событие 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>