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

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

我从你发布的链接中可以理解的是，每当点击按钮时，你想从头开始重播音频。您可以将音频的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

问题是音频文件包含相当数量的大部分听不见的尾部空白空间:

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>