Question

I am having difficulties with pages that have more than one <audio> when I use the default controls. I have not tested creating custom controls in-depth yet.

The custom control has a “Start” button that changes to a “Pause”. OK that works fine to pause the audio. But, when you go to the second audio control on the page, it will never play while the first one is
paused. If you let the first one play all of the way through, the second one will play when the Play button is clicked.

Is there a “Stop” function anywhere? If so, that would mean that I would need to create a custom control and I can do that but I have not found the event to be used to actually “stop” the first one from
playing. Also, it might really be confusing to users to have to pause and then to know that they need to hit a stop button as well before playing the second audio.

Hopefully I can use a script that will check to see if a previous audio is paused and then stop the first one or reset it and then go ahead and play the second audio.

Any ideas?
Thanks,
Linda
P.S. I am miserable at JavaScript so if someone helps with the script, I would appreciate it.

Answer 1

Finally. This works.

<script type="text/javascript">
setTimeout(function() {
    var myAudio = document.getElementsByTagName('audio')[0];
    var myAudio1 = document.getElementsByTagName('audio')[1];
    myAudio1.addEventListener('play', function(){
        myAudio.pause();
    }, false);

    myAudio.addEventListener('play', function(){
        myAudio1.pause();
    }, false);
},1000);