html5 play(),html - HTML5 - Play Audio - Stack Overflow

It looks to me like your issue is not really related to audio but instead how to implement the buttons to get the effect you want. You say the code you posted works, so play and pause are working fine on your audio element. But the 3 buttons are starting the 3 different sounds and the last button stops any sound currently being played, whereas you want to select a sound with one of the 3 buttons and play/pause the selected one using the last button.

If you have a variable to store the id of the last clicked sound select buttons, then use the last button to toggle between calling play() and pause()...

var selSound = 8000; //default to first sound.

var play = false; //default to paused.

function selectSound(id) {

selSound = id;

}

function togglePlay() {

var a = document.getElementById(selSound);

var b = document.getElementById("playbtn");

play = !play;

if (play) {

b.value = "Stop Playing";

a.play();

}

else {

b.value = "Start Playing";

a.pause();

}

}

16kHz

18kHz

20kHz

Start Playing

Here the first 3 buttons simply set variable selSound to be either '8000', '18000' or '20000', then when you press the last button to play the sound the selsound variable is used to identify the id of the audio element it will use. To begin with the first click will play a sound and the next click will stop it, and it will continue to toggle back and forth.

This isn't complete though and I've not tested it so it might not even work fully. But you will probably want the play/pause button to toggle back to 'Start Playing' once a sound has finished playing. Otherwise you'll click play, the selected sound will play and finally stop, but the button will still show 'Stop Playing', then when you click it it will toggle to say 'Start Playing' and then you'll have to click it again to start a sample playing again. So you will probably want to trap the event when a sound stops and toggle the button back to 'Start Playing'.

HTH