मोबाइल सफारी में एचटीएमएल 5 ऑडियो ऑब्जेक्ट का उपयोग करना

Question

मैं आईपैड पर मोबाइल सफारी में चल रहे अपने वेब ऐप पर उपयोगकर्ता इनपुट के जवाब में एक छोटा (1 से कम) ऑडियो फ़ाइल खेलना चाहता हूं जिसमें ईवेंट और ऑडियो प्लेबैक के बीच न्यूनतम विलंबता है। प्लेबैक पेज रीलोड के बीच कई बार ट्रिगर किया जा सकता है, इसलिए मैं ऑडियो फ़ाइल को कैश करना चाहता हूं।

के बाद पहले क्लिक पर फ़ाइल निभाता है लेकिन कुछ नहीं से बाद क्या होता है:

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

मैं "समाप्त" घटना है जो फ़ाइल मैं एक ही से दो प्लेबैक प्राप्त कर सकते हैं, पुन: लोड करने के लिए एक घटना श्रोता जोड़ते हैं वस्तु और फिर चुप्पी:

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

अगर मैं मैन्युअल रूप से इस तरह 0 को मौजूदा समय विशेषता निर्धारित:

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

मैं त्रुटि कंसोल में निम्न त्रुटि मिलती है:

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

यह कैसे काम करने के लिए पर कोई भी विचार? अग्रिम धन्यवाद

Answer 1

मुझे बिल्कुल वही समस्या थी। यह एक गंदा चाल है, लेकिन ध्वनि वस्तु पर src को रीसेट मेरे लिए काम किया:

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

Answer 2

शून्य के बजाय 0.1 को currentTime निर्धारित करते हैं, load() का उपयोग नहीं करते, अन्यथा यह ended घटना टूट जाएगा।

आप मीडिया फ़ाइल उपयोग पहले से लोड करने की जरूरत है:

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