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

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

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

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

Аудио-теги:

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

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

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

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

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

Есть идеи?