javascript - Reusing HTML5 Audio Object in Mobile Safari -

i want play short (less 1s) audio file in response user input on web app running in mobile safari on ipad minimum latency between event , audio playback. playback can triggered multiple times between page reloads, therefore want cache audio file.

the following plays file on first click after nothing happens:

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

if add event listener "ended" event reloads file can 2 playbacks same object , silence:

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

if manually set currenttime attribute 0 this:

var audio = new audio("ack.mp3"); audio.addeventlistener('ended', function() {   audio.currenttime=0; }, false); $("#button").click(function(e) {   e.preventdefault();   audio.play(); } 

i following error in error console:

index_size_err: dom exception 1: index or size negative, or greater allowed value. 

any ideas on how make work? in advance

set currenttime 0.1 instead of zero, don't use load() otherwise break ended event.

if need preload media file use:

media.play(); //start loading if(media.readystate !== 4){ //have_enough_data   media.addeventlistener('canplaythrough', oncanplay, false);   media.addeventlistener('load', oncanplay, false); //add load event avoid errors, 'canplaythrough' won't dispatch.   settimeout(function(){     media.pause(); //block play buffers before playing   }, 1); //it needs after delay, otherwise block download and/or won't pause. }else{   oncanplay(); }