Остановка воспроизведения звука при воспроизведении нового аудиосигнала

Question

Если кнопка нажата, она должна воспроизводить новый звук и останавливать текущий звук, который воспроизводится. это также должно сделать так, что когда звук воспроизводится, класс «пауза» переключается. Но если звук, связанный с кнопкой, не воспроизводится, тогда класс нормальный, который «играет».

//this is the buttons that can be pressed to play sound 
<span class="play" sound="sound1.mp3">Play</span> 
<span class="play" sound="sound2.mp3">Play</span> 
<span class="play" sound="sound3.mp3">Play</span> 

<script> 
// trying to make it so that the var audio selects sound based on what button was pressed 
var audio = document.createElement('sound'); 
//when a button is pressed plays sound 
$(".play").on('click', function(){ 

if (audio.paused) { 
     audio.play(); 
    } 
    else { 
     audio.pause(); 
    } 
    $(this).toggleClass("pause"); // switch to some new css for a pause button 
}); 

// make it so if audio is already playing and another sound is pressed, the audio that is playing is stopped and newly pressed sound plays. 
if any other audio is playing{ 
then that audio.stop and this.audio. that was clicked. play 
} 
// make it so the CSS of the already playing button is switched back and the css of the new button is turned to the pause class. 
$(that).toggleClass("play"); 
$(this).toggleClass("pause"); 
</script> 

Answer 1

Я бы просто вставлять звуковые элементы в пролетах, как это:

<span class="play"><audio src="sound1.mp3">Play</audio></span> 
<span class="play"><audio src="sound2.mp3">Play</audio></span> 
<span class="play"><audio src="sound3.mp3">Play</audio></span> 

А затем сделать некоторые JQuery магии

$(".play").click(function() { 
    $(".play").removeClass('pause').addClass('play').pause(); 
    $(this).addClass('pause').removeClass('play').play(); 
});