Reutilización de objetos de audio HTML5 en Mobile Safari

Question

Quiero reproducir un archivo de audio corto (menos de 1) en respuesta a la entrada del usuario en mi aplicación web que se ejecuta en Mobile Safari en el iPad con una latencia mínima entre el evento y la reproducción de audio. La reproducción se puede activar varias veces entre recargas de página, por lo tanto, quiero almacenar en caché el archivo de audio.

La siguiente reproduce el archivo en la primera posición, pero después de que no pasa nada:

var audio = new Audio("ack.mp3"); 
$("#button").click(function(e) { 
    e.preventDefault(); 
    audio.play(); 
} 

Si añado un detector de eventos a la "terminado" evento que vuelve a cargar el archivo que puedo conseguir dos reproducciones de la misma objeto y luego el silencio:

var audio = new Audio("ack.mp3"); 
audio.addEventListener('ended', function() { 
    audio.load(); 
}, false); 
$("#button").click(function(e) { 
    e.preventDefault(); 
    audio.play(); 
} 

Si fijo manualmente el atributo horaActual a 0 como esto:

var audio = new Audio("ack.mp3"); 
audio.addEventListener('ended', function() { 
    audio.currentTime=0; 
}, false); 
$("#button").click(function(e) { 
    e.preventDefault(); 
    audio.play(); 
} 

me sale el siguiente error en la consola de errores:

INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value. 

Cualquier ideas sobre cómo hacer este trabajo? Gracias de antemano

Answer 1

tuve exactamente el mismo problema. que es un truco sucio, pero restablecer el SRC en el objeto de sonido funcionó para mí:

audio.src = audio.src; 
audio.play(); 

Answer 2

conjunto currentTime a 0.1 en lugar de cero, no utilice load() de lo contrario se romperá el evento ended.

si tiene que cargar previamente el uso de archivos multimedia:

media.play(); //start loading 
if(media.readyState !== 4){ //HAVE_ENOUGH_DATA 
    media.addEventListener('canplaythrough', onCanPlay, false); 
    media.addEventListener('load', onCanPlay, false); //add load event as well to avoid errors, sometimes 'canplaythrough' won't dispatch. 
    setTimeout(function(){ 
    media.pause(); //block play so it buffers before playing 
    }, 1); //it needs to be after a delay, otherwise it will block download and/or won't pause. 
}else{ 
    onCanPlay(); 
}