Предварительная загрузка HTML5 Audio в Mobile Safari - PullRequest
Новая
       2

Предварительная загрузка HTML5 Audio в Mobile Safari

7 голосов
/ 22 апреля 2011

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

http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungFuPanda2_tj/

Предполагается, что когда кто-то нажимает на баннер, появляется всплывающее окно с полосой загрузки.Панель загрузки загружает все изображения, необходимые для анимации.В то же время, аудио также загружается через аудиотэги, уже включенные в DOM (что нормально).После загрузки всех изображений панель загрузки исчезает, и пользователь может продолжить.В нижней части экрана есть 4 кнопки, на которые они могут нажать.При нажатии на один из них воспроизводится аудиофайл, а изображения выполняют анимацию в стиле флипбука, синхронизируемую со звуком.

Теги аудио: 

<audio id="mmviperTrack" src='tigress.mp3'></audio>
<audio id="mmmantisTrack" src='viper.mp3'></audio>
<audio id="mmtigressTrack" src='kungfu3.mp3'></audio>
<audio id="mmcraneTrack" src='crane.wav'></audio>

Прослушиватели событий кнопки воспроизведения: 

button.addEventListener('click',function(){
    if ( f.playing ) return false;
    f.playing = true;
    button.audio.play();
},false);

button.audio.addEventListener('playing', function(){
    animate();
}, false);

Проблема в том, что в javascript каждый раз, когда я нажимаю кнопку воспроизведения (), он перезагружает аудиофайл и затем воспроизводит его.Кажется, я не могу заставить его загружать звук один раз в начале и выключать то, что хранится в памяти, вместо того, чтобы пытаться перезагружать звук каждый раз, когда я нажимаю кнопку.

Я пытался экспериментироватьсо свойствами preload и autobuffer, но кажется, что мобильное сафари игнорирует эти свойства, потому что независимо от того, что я их установил, поведение всегда одинаково.Я пробовал экспериментировать с тегами исходного кода и различными форматами файлов ... ничего.

Есть идеи?

1 Ответ

3 голосов
/ 04 мая 2011

Хорошо, таким образом, решение было чем-то вроде взлома, обмана, обходного пути, как бы вы это ни называли.

Что я заметил, так это то, что, если я нажму кнопку воспроизведения на аудиофайле, который только что проиграл, он сам не перезагрузится.Это может быть потому, что я приостановил звук после того, как он закончил воспроизводиться, но я не уверен на 100% в этом.В любом случае я соединил все 4 аудиофайла в один большой аудиофайл (да, Audacity ~!).Затем, каждый раз, когда я нажимаю одну из кнопок воспроизведения, я устанавливаю свойство currentTime аудиообъекта в любую начальную точку этой дорожки, затем воспроизводит дорожку, пока она не достигнет своей конечной точки, и затем снова приостанавливаю ее.Миссия выполнена!Загружается один раз в начале и никогда больше для каждой пьесы.

Не без ума от идеи, что мне пришлось объединить все разные звуковые дорожки, но эй, это работает.

О, тоже.Чтобы заставить звуковую дорожку загружаться и запускать событие «canplaythrough», я прикрепил эту функцию к событию щелчка пользователя: 

var track;
function addHTMLAudio() {
    track = document.createElement('audio');
    track.id = 'mm_audio'
    track.autoplay = false;
    track.preload = false;
    track.addEventListener('canplaythrough',function(){
        track.removeEventListener('canplaythrough');
        audioLoaded = true;
    },false);       
    document.getElementById('body').appendChild(track);
    track.src = f.trackURL;
    track.play();
    setTimeout(function(){ track.pause();  },1);
}

playButton.addEventListener('click',function(e){
    if ( playStatus > 0 ) return;
    playStatus = 1;

    var myId = e.target.parentNode.id;
    var myClip = findClip( myId );

    myClip.state = 'active';        
    track.currentTime = myClip.tIndex.start;

    track.play();
    runAnimation(myClip);       
},false);
...