创建音频元素，播放它，然后删除元素

Question

我想在单击按钮时创建一个音频元素，播放音频，然后在播放完毕后删除音频这是我的代码：

var x = document.getElementById("myAudio"); 

function playAudio() { 
  x.play(); 
}

<audio id="myAudio">
  <source src="https://padlet-uploads.storage.googleapis.com/446844750/ca57ed6d83fff9890b4c9f2356e4e0c0/Single_Firework___Sound_Effect_HD__1_.mp3" type="audio/ogg">
</audio>
<button onclick="playAudio()" type="button">Play Audio</button>

如果您注意到，当您单击该按钮时，它会播放音频，您必须等待几秒钟才能再次单击它。我想要它，这样你就可以一直点击按钮，音频就会播放。

我想要的代码的一个完美示例是这个站点：https://airhorner.com/

继续点击气喇叭，它会创建一个音频元素并播放它

Answer 1

我从您发布的 link 中了解到，您希望在单击按钮时从头开始重播音频。您可以通过将音频的 currentTime 设置为 0，然后播放音频来实现：

var x = document.getElementById("myAudio"); 

function playAudio() { 
  x.currentTime = 0;
  x.play(); 
}

<audio id="myAudio">
  <source src="https://padlet-uploads.storage.googleapis.com/446844750/ca57ed6d83fff9890b4c9f2356e4e0c0/Single_Firework___Sound_Effect_HD__1_.mp3" type="audio/ogg">
</audio>
<button onclick="playAudio()" type="button">Play Audio</button>

Answer 2

问题是音频文件包含大量几乎听不见的尾随空白 space:

var x = document.getElementById("myAudio"); 

function playAudio() { 
  x.play(); 
}
x.onended = () => console.log('ended');

<audio id="myAudio">
  <source src="https://padlet-uploads.storage.googleapis.com/446844750/ca57ed6d83fff9890b4c9f2356e4e0c0/Single_Firework___Sound_Effect_HD__1_.mp3" type="audio/ogg">
</audio>
<button onclick="playAudio()" type="button">Play Audio</button>

除了将时间重置为 0 之外，您还可以在音频结束前强制 .pause 音频：

var x = document.getElementById("myAudio"); 

function playAudio() { 
  x.play(); 
  setTimeout(() => {
    x.pause();
    x.currentTime = 0;
  }, 1500);
}

<audio id="myAudio">
  <source src="https://padlet-uploads.storage.googleapis.com/446844750/ca57ed6d83fff9890b4c9f2356e4e0c0/Single_Firework___Sound_Effect_HD__1_.mp3" type="audio/ogg">
</audio>
<button onclick="playAudio()" type="button">Play Audio</button>

Answer 3

播放之前，您只需重置音频运行时间：

var x = document.getElementById("myAudio"); 

function playAudio() {
  x.pause();
  x.currentTime = 0;
  x.play(); 
}

<audio id="myAudio">
  <source src="https://padlet-uploads.storage.googleapis.com/446844750/ca57ed6d83fff9890b4c9f2356e4e0c0/Single_Firework___Sound_Effect_HD__1_.mp3" type="audio/ogg">
</audio>
<button onclick="playAudio()" type="button">Play Audio</button>

创建音频元素，播放它，然后删除元素

Create audio element, play it, and then remove element

html

javascript

audio