Предварительная загрузка HTML5 аудио в мобильном Safari

У меня возникли проблемы с предварительной загрузкой аудио-контента 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 каждый раз, когда я нажимаю кнопку play(), он перезагружает аудиофайл и затем воспроизводит его. Я не могу заставить его загрузить аудио один раз в начале и выйти из того, что хранится в памяти, вместо того, чтобы пытаться перезагрузить аудио каждый раз, когда я нажимаю кнопку.

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

Есть идеи?

1 7
javascript html5 html5-audio

1 ответ:

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

Я заметил, что если я нажимаю кнопку воспроизведения на аудиофайле, который я только что воспроизвел, он не перезагружается. Это может быть потому, что я приостановил звук после того, как он закончил воспроизведение, но я не уверен на 100% в этом. В любом случае, я объединил все 4 аудиофайла в один большой аудиофайл (yay 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);
3