音频标签，播放请求被新的加载请求中断答案

【问题标题】：Audio tag, play request was interupted by a new load request音频标签，播放请求被新的加载请求中断
【发布时间】：2017-01-31 23:56:25
【问题描述】：

在我的蛇游戏中，我有一个播放 sfx 的音频标签。当一块食物被吃掉时，它会播放下面的“食物”声音。然后它会产生一种新的食物，如果它的价值 200 点，它会发出一种叫做“食物 200”的声音。问题是，当它立即生成时，“Food200”音频将在“Food”音频仍在播放/加载时加载，从而导致此错误

if (Audio == "Food") {
var audio = document.getElementById('SFX');
audio.src = 'audio/Food.mp3';
audio.load();
audio.play();
}

if (Audio == "Food200") {
var audio = document.getElementById('SFX');
audio.src = 'audio/Food200.mp3';
audio.load();
audio.play();
}

我尝试过 "$("SFX").remove();"在我的音频标签上，也尝试暂停它，但我仍然收到错误，有没有更好的方法来做到这一点？

【问题讨论】：

标签： javascript jquery html audio

【解决方案1】：

如果您需要同时允许多个音效，我建议为每个音频文件制作一个音频标签，例如；

//Js
if (Audio === "Food") {
  audioFood.play();
}

if (Audio === "Food200") {
  audioFood200.play();
}

//HTML
<audio id="audioFood" src="./audio/Food.mp3"></audio>
<audio id="audioFood200" src="./audio/Food200.mp3"></audio>

如果你只想要一个音频标签，另一种选择是制作一个“超时”时间戳，每次播放音效时，检查并更新；

var audioTimeout = +new Date(); // +new turns the date into a MS timestamp.

if (Audio === "Food") {

  var dateNow = +new Date(); 
   if(audioTimeout - dateNow > 0) return;
   else audioTimeout = dateNow + (Food.mp3 length in MS);

  var audio = document.getElementById('SFX');
  audio.src = 'audio/Food.mp3';
  audio.load();
  audio.play();
}

【讨论】：

【解决方案2】：

首先，使用名为Audio 的变量不是一个好主意，window.Audio 构造函数已经使用了它。

那么，您在控制台中遇到的错误并不那么重要。这实际上是他们最近实现 Audio.play() 中的一个 chrome 错误，它现在确实根据 WHATWG specs 返回了一个 Promise（W3C 尚未跟进）。

FireFox 54+ 现在也支持此功能，并且它们没有此错误：如果您没有捕获返回的 Promise，则该错误不应在控制台中触发。

所以你真的很好。

现在，当然，以高速率发出新请求并不是一个好主意，因此 user2267175 的建议创建多个音频元素确实是一个好建议。您甚至可以通过使用 WebAudio API 获得更好的性能。这是关于它的previous post。

【讨论】：