html5 mobile对象,javascript - Reusing HTML5 Audio Object in Mobile Safari - Stack Overflow

I want to play a short (less than 1s) audio file in response to user input on my web app running in Mobile Safari on the iPad with minimum latency between event and audio playback. The playback can be triggered multiple times between page reloads, therefore I want to cache the audio file.

The following plays the file on the first click but after than nothing happens:

var audio = new Audio("ack.mp3");

$("#button").click(function(e) {

e.preventDefault();

audio.play();

}

If I add an event listener to the "ended" event which reloads the file I can get two playbacks from the same object and then silence:

var audio = new Audio("ack.mp3");

audio.addEventListener('ended', function() {

audio.load();

}, false);

$("#button").click(function(e) {

e.preventDefault();

audio.play();

}

If I manually set the currentTime attribute to 0 like this:

var audio = new Audio("ack.mp3");

audio.addEventListener('ended', function() {

audio.currentTime=0;

}, false);

$("#button").click(function(e) {

e.preventDefault();

audio.play();

}

I get the following error in the error console:

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

Any ideas on how to make this work? Thanks in advance