Riutilizzo di oggetti audio HTML5 in Mobile Safari

Question

Desidero riprodurre un file audio breve (meno di 1 secondo) in risposta all'input dell'utente sulla mia app Web in esecuzione su Mobile Safari sull'iPad con latenza minima tra la riproduzione di eventi e audio. La riproduzione può essere attivata più volte tra ricariche di pagina, quindi voglio memorizzare nella cache il file audio.

Il seguente riproduce il file sul primo clic, ma dopo che non succede nulla:

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

Se aggiungo un listener di eventi per il "si è concluso" evento che ricarica il file che posso ottenere due riproduzioni della stessa oggetto e poi il silenzio:

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

Se fisso manualmente l'attributo currentTime a 0 simili:

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

Ottengo il seguente errore nella console di errore:

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

Tutte le idee su come fare questo lavoro? Grazie in anticipo

Answer 1

ho avuto esattamente lo stesso problema. è un trucco sporco, ma il ripristino del src sull'oggetto del suono ha lavorato per me:

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

Answer 2

impostato currentTime a 0.1 invece di zero, non utilizzare load() altrimenti si romperà l'evento ended.

se è necessario precaricare l'uso file multimediale:

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(); 
}