HTML <audio> тэг canplaythrough не стреляет по мобильному

Question

Я играю с HTML 5 <audio> тегами. Я нашел это очень здорово, но просто столкнулся с очень странной ситуацией. Короче говоря, canplaythrough не срабатывает на мобильных устройствах, как ожидалось.

В этом случае, у меня есть несколько кнопок на веб-странице:

<button id="sndbtn01" onclick="createAudioById('01')">Audio 01</button> 
<button id="sndbtn02" onclick="createAudioById('02')">Audio 02</button> 
<button id="sndbtn03" onclick="createAudioById('03')">Audio 03</button> 
<button id="sndbtn04" onclick="createAudioById('04')">Audio 04</button> 

Что я ожидаю, чтобы играть 01.mp3, когда «Audio 01» нажата, и подобное действие для нажатия «Audio 02 »,« Аудио 03 »,« Аудио 04 ». И я надеюсь, что тег <audio> создается при нажатии кнопки, чтобы я мог сохранять трафик без предварительной загрузки.

Итак, у меня есть код JavaScript:

var audioObj = {}; 
    function createAudioById(id){ 
    var p = audioObj[id]; 
    // alert(1) 
    if (p != undefined) { 
     alert(2); 
     p.play(); 
     return; 
    } else { 
     alert(3); 
     p = new Audio(); 
     p.addEventListener('canplaythrough', function(e){ 
     e.currentTarget.removeEventListener('canplaythrough', arguments.callee); 
     alert(4); 
     p.play(); 
     }); 
     p.src = '../snds/'+id+'.mp3'; 
     audioObj[id] = p; 
    } 
    } 

Но поведение странно на мобильных устройствах:

на мобильный (iPhone):

1. Сначала нажмите на button 01 Триггеры (3), а затем ничего не происходит - событие canplaythrough никогда не запускается, и звук никогда не воспроизводится - НЕ, как ожидалось: (4) должен огонь и звук должны играть;
2. Если я нажму кнопку еще раз, то начнется (2), и звук будет воспроизводиться. Но странно то, что (4) запускается через несколько секунд после начала воспроизведения звука.
3. Если я нажимаю на кнопку во время воспроизведения звука, запускается (2), и ничего не происходит, звук продолжает играть - как и ожидалось;
4. Если я нажму на кнопку, когда звук будет воспроизведен, будет запущен (2), звук будет воспроизводиться, а (4) никогда не появится - как и ожидалось.

Answer 1

На рабочем столе:

Я не вижу, почему это странное поведение. Сначала проверьте, существует ли звук с именем «01». Это не так, поэтому вы создаете его, и когда он закончил загрузку и может играть, прослушиватель событий запускается и начинает воспроизведение.

Затем вы снова нажимаете кнопку во время воспроизведения. Вы проверяете, существует ли звук с именем «01», потому что вы его создали и все еще играете. Следовательно, p определяется и запускается (2). Звук продолжает играть, потому что вы сказали ему играть, что он уже делал.

Затем, когда звук останавливается и вы нажимаете кнопку, вы проверяете, существует ли звук с именем «01». Он все еще существует - он прекратил играть, но он все еще существует, теперь он просто остановился, когда песня закончилась. Таким образом, (2) триггеры, и вы говорите ему, чтобы играть, но слушатель событий все еще слушает, вы никогда его не уничтожали, поэтому, когда он перезагружает песню, повторное воспроизведение может быть вызвано во второй раз. Это нормальное поведение.

На мобильном телефоне: У вас есть такая же настройка, за исключением этого времени по какой-либо причине событие canplaythrough не запускается. Я не знаю, почему это так, но это еще один вопрос. Поведение, помимо этого, легко объясняется. Вы создаете новый звук, по какой-то причине событие не запускается, поэтому, когда вы снова нажимаете кнопку, звук все еще существует, когда вы его создали раньше, и он начинает воспроизводиться.Затем, когда песня закончена, звук все еще существует, и на нем все еще есть прослушиватель событий, но еще раз, по какой-то причине, что прослушиватель событий не работает вообще, но звук все равно воспроизводится, потому что он все еще существует.