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

Question

在我的贪吃蛇游戏中，我有一个播放 sfx 的音频标签。当吃到食物时，下面会播放“食物”声音。然后它会产生一种新食物，如果它的值(value)为 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();”在我的音频标签上，也尝试暂停它，但这不起作用，我仍然收到错误，有更好的方法吗？

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