当HTML中存在audio-div时，停止audio-play()

Question

我有一个HTML中的<div onclick="startSound">。单击时会触发声音。如何让它停止第一个声音，并在再次单击时播放另一个声音？我发现的大多数解决方案都使用<audio>HTML标记，但由于没有，如何做到这一点？

function startSound() {
var musicPlay=new Audio('sound.mp3');
musicPlay.play();     
}

Answer 1

您应该有一个音频元素，每次单击某个元素时，不要创建新的Audio组件，而是更改现有音频组件的src属性。要停止处于playing状态的现有音频，sound.pause();sound.currentTime = 0;将有所帮助。

let myAudio = document.getElementById('myAudio');
function startSound() {
myAudio.pause();
myAudio.currentTime = 0;
myAudio.src = 'sound.mp3';
}

<audio controls id="myAudio">
<source src="anotherSound.mp3" type="audio/mpeg">
</audio>