javascript - 自动播放音频未播放

Question

我想让浏览器播放我的 Wolf.mp3 文件 10 次。加载页面后没有任何反应。

class Animal {
  constructor(name, audioSrc) {
    this._name = name;
    this._audioSrc = audioSrc;
  }
  makeSound() {
    let audioEl = document.createElement("audio");
    audioEl.src = this._audioSrc;
    audioEl.autoplay = true;
    document.body.appendChild(audioEl);
  }
}
let testyWolf = new Animal("wolf","audio/wolf.mp3" );
for (let i = 0; i < 10; i++) {
  testyWolf.makeSound();
}

Answer 1

因为 autoplay policy .

用户需要首先与文档进行交互，即单击页面上的某个位置。

class Animal {
  constructor(name, audioSrc) {
    this._name = name;
    this._audioSrc = audioSrc;
  }
  makeSound() {
    let audioEl = document.createElement("audio");
    audioEl.src = this._audioSrc;
    audioEl.autoplay = true;
    document.body.appendChild(audioEl);
  }
}

let testyWolf = new Animal("wolf","https://freewavesamples.com/files/Yamaha-V50-Rock-Beat-120bpm.wav" );

document.addEventListener('click', e => {
  testyWolf.makeSound()
})

<p> Click anywhere </p>

在某处放置一个名为“开始游戏”(如果是游戏)的按钮，以便用户在尝试自动播放声音之前先单击您的页面。