Несколько аудио-тегов HTML5 в Mobile Safari и UIWebView

Question

У меня возникают проблемы со страницами, которые имеют более одного <audio>, когда я использую элементы управления по умолчанию. Я еще не тестировал создание пользовательских элементов управления.

У пользовательского элемента управления есть кнопка «Пуск», которая меняется на «Пауза». ОК, это прекрасно работает, чтобы приостановить звук. Но когда вы переходите ко второму элементу управления аудио на странице, он никогда не будет воспроизводиться, пока первый сделал паузу. Если вы позволите первому воспроизвести весь путь до конца, второй будет воспроизводиться при нажатии кнопки «Воспроизвести».

Есть ли где-нибудь функция "Стоп"? Если это так, это будет означать, что мне нужно будет создать пользовательский элемент управления, и я могу это сделать, но я не нашел событие, которое будет использоваться для «остановки» первого из играть. Кроме того, пользователям может быть непонятно, когда им нужно сделать паузу, а затем узнать, что им нужно нажать кнопку «Стоп», прежде чем воспроизводить второй звук.

Надеюсь, я смогу использовать сценарий, который проверит, не приостановлено ли предыдущее аудио, а затем остановит первый или сбросит его, а затем продолжит воспроизведение второго аудио.

Есть идеи? Спасибо, Линда Постскриптум Я несчастен в JavaScript, поэтому, если кто-то поможет со сценарием, я буду признателен за это.

Answer 1

Наконец-то. Это работает.

<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

Я получаю эти ошибки с кодом ниже на мобильном Safari: INVALID_STATE_ERR: исключение DOM 11 INDEX_SIZE_ERR: исключение DOM 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);