在移動Safari中重複使用HTML5音頻對象

爲了響應用戶在iPad上移動Safari中運行的Web應用程序的用戶輸入，我想播放一小段（少於1秒）的音頻文件，並且事件和音頻播放之間的延遲時間最短。播放可以在頁面重新加載之間多次觸發，因此我想要緩存音頻文件。在移動Safari中重複使用HTML5音頻對象

下播放該文件的第一次點擊，但有總比沒有之後發生的情況：

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

如果我手動設置currentTime的屬性爲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.

如何使這項工作任何想法？在此先感謝

來源

2011-01-25 derfred

我有完全相同的問題。它是一個骯髒的伎倆，但重置聲音對象上的SRC爲我工作：

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

來源

2011-02-15 13:21:49 clamp

嘗試這樣做，但它似乎像你需要播放之間的延遲2秒。否則，後續的遊戲將不會發生。 – Crashalot

這對我也不起作用。即使在iOS 7中（2011年2月的最後一次回覆）。 –

設置currentTime到0.1而不是零，不使用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(); 
}

來源

2011-03-29 05:02:58

在移動Safari中重複使用HTML5音頻對象

回答

相關問題