Plusieurs balises audio HTML5 dans Mobile Safari et UIWebView

Question

J'ai des difficultés avec les pages qui en ont plusieurs <audio> lorsque j'utilise les contrôles par défaut. Je n'ai pas encore testé la création de contrôles personnalisés en profondeur.

Le contrôle personnalisé a un bouton "Démarrer" qui devient "Pause". OK cela fonctionne bien pour mettre en pause l'audio. Mais, quand vous allez au deuxième contrôle audio sur la page, il ne jouera jamais tandis que le premier est mis en pause. Si vous laissez le premier jouer tout le long, le second jouera quand vous cliquerez sur le bouton Play.

Existe-t-il une fonction "Stop"? Si oui, cela signifierait que je devrais créer un contrôle personnalisé et je peux le faire mais je n'ai pas trouvé l'événement à utiliser pour réellement "arrêter" le premier de en cours de lecture. En outre, il peut être déroutant pour les utilisateurs d'avoir à faire une pause et de savoir qu'ils doivent également appuyer sur un bouton d'arrêt avant de jouer le deuxième son.

J'espère que je peux utiliser un script qui va vérifier si un audio précédent est en pause et puis arrêter le premier ou le réinitialiser et ensuite aller de l'avant et jouer le deuxième audio.

Des idées? Merci, Linda P.S. Je suis misérable à JavaScript, donc si quelqu'un aide avec le script, je l'apprécierais.

Answer 1

Enfin. Cela marche.

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

Answer 2

Je reçois ces erreurs avec le code ci-dessous sur Safari mobile: 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);