Tengo problemas para precargar el contenido de audio HTML5 y luego usar lo que tengo en la memoria caché en lugar de intentar volver a descargar el audio cada vez que intento reproducirlo.

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

Se supone que la experiencia es que cuando alguien hace clic en el banner, aparece un anuncio con una barra de carga. La barra de carga está cargando todas las imágenes necesarias para la animación. Mientras tanto, el audio también se está cargando a través de etiquetas de audio que ya están en el DOM (lo cual está bien). Después de cargar todas las imágenes, la barra de carga desaparece y el usuario puede continuar. Hay 4 botones en la parte inferior de la pantalla en los que pueden hacer clic. Al hacer clic en uno de ellos, se reproduce el archivo de audio y las imágenes hacen una animación estilo flipbook que se sincroniza con el audio.

Etiquetas de audio:

<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>

Escucha de eventos de botón de reproducción:

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

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

El problema es que, en javascript, cada vez que hago clic en play (), vuelve a cargar el archivo de audio y luego lo reproduce. Parece que no puedo hacer que cargue el audio una vez al principio y se apague lo que está almacenado en la memoria en lugar de intentar volver a cargar el audio cada vez que hago clic en el botón.

He intentado experimentar con las propiedades de precarga y autobúfer, pero parece que el safari móvil ignora esas propiedades, porque no importa lo que establezca, el comportamiento es siempre el mismo. He intentado experimentar con etiquetas de origen y diferentes formatos de archivo ... nada.

¿Algunas ideas