Multiple HTML5 audio tags in Mobile Safari and UIWebView

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

I am receiving these errors with the code below on mobile Safari: INVALID_STATE_ERR: DOM Exception 11 INDEX_SIZE_ERR: DOM Exception 1

setTimeout(function() {
document.getElementById('audio_3').addEventListener('play', function(){
document.getElementById('audio_4').currentTime = 0;
document.getElementById('audio_4').pause();
}, false);

document.getElementById('audio_4').addEventListener('play', function(){
document.getElementById('audio_3').currentTime = 0;
document.getElementById('audio_3').pause();
}, false);
},1000);

Answer 2

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);