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

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

Есть идеи?