連續HTML5音頻.play（），只有第1次觸發

Question

我想在每一個功能的做函數調用回退與.play()由1

最有趣的播放聲音1播放連續的聲音序列是： 每次在iPad設備上播放時都會有不同的聲音表現。 * 有時播放音頻3次，有時4次，甚至只有1次！ *

只有iPad中的「突然停止問題」，在我的谷歌瀏覽器上沒問題。

它不是iPad上的自動播放的問題，我想怎麼我已經在第一時間觸發...

請看看，並有一個測試的iPad也許並請幫助...

的Html - 身體：

<audio id="html5soundtag"> 
    <source src="1.mp3" type="audio/mpeg"> 
</audio> 
<a href="javascript://" onClick="playhtml5sound1('1.mp3')">aaaa</a> 

的Javascript：

var audioPath =""; 

var audioElement = document.getElementById('html5soundtag'); 

function playhtml5sound1(filename){ 
    audioPath = filename; 
    audioElement.src = audioPath; 
    audioElement.src = audioPath 
    audioElement.load() 
    audioElement.play(); 
    audioElement.addEventListener("ended",soundcallback1); 
}; 
var soundcallback1 = function(){ 
    alert("1st"); 
    audioElement.removeEventListener("ended",soundcallback1); 
    playhtml5sound2("1.mp3"); 
} 


function playhtml5sound2(filename){ 
    audioPath = filename; 
    audioElement.src = audioPath; 
    audioElement.src = audioPath 
    audioElement.load();   
    audioElement.play(); 
    audioElement.addEventListener("ended",soundcallback2); 

}; 
var soundcallback2 = function(){ 
    alert("2nd"); 
    audioElement.removeEventListener("ended",soundcallback2); 
    playhtml5sound3("1.mp3"); 
} 

function playhtml5sound3(filename){ 
    audioPath = filename; 
    audioElement.src = audioPath; 
    audioElement.src = audioPath 
    audioElement.load(); 
    audioElement.play(); 
    audioElement.addEventListener("ended",soundcallback3); 

};var soundcallback3 = function(){ 
    alert("3rd"); 
    audioElement.removeEventListener("ended",soundcallback3); 
    playhtml5sound4("1.mp3"); 
} 

function playhtml5sound4(filename){ 
    audioPath = filename; 
    audioElement.src = audioPath; 
    audioElement.src = audioPath 
    audioElement.load(); 
    audioElement.play(); 

    audioElement.addEventListener("ended",soundcallback4); 

};var soundcallback4 = function(){ 
    alert("4th"); 
    audioElement.removeEventListener("ended",soundcallback4); 
    playhtml5sound5("1.mp3"); 
} 

function playhtml5sound5(filename){ 
    audioPath = filename; 
    audioElement.src = audioPath; 
    audioElement.src = audioPath 
    audioElement.load(); 
    audioElement.play(); 

    audioElement.addEventListener("ended",soundcallback5); 

};var soundcallback5 = function(){ 
    alert("5th"); 
    audioElement.removeEventListener("ended",soundcallback5); 
    playhtml5sound6("1.mp3"); 
} 

function playhtml5sound6(filename){ 
    alert("This is End. " + filename); 
} 

Answer 1

這應該可以解決你的問題，並在非常至少，它會讓你的代碼更易於維護：

var audioPath = ""; 
var audioElement = document.getElementById('html5soundtag'); 

var soundIndex = 0; 
var sounds = ["1.mp3","2.mp3","3.mp3","4.mp3","5.mp3"] 

function playhtml5sound(){ 
    if(soundIndex < sounds.length){ 
     audioPath = sounds[soundIndex]; 
     audioElement.src = audioPath; 
     audioElement.load() 
     audioElement.play(); 
     soundIndex++; 
    }else{ 
     audioElement.removeEventListener("ended",playhtml5sound); 
     alert("Last sound ended!") 
    } 
}; 

audioElement.addEventListener("ended", playhtml5sound); 

<a href="javascript://" onClick="playhtml5sound()">aaaa</a> 

每當音樂結束時，執行playhtml5sound()，播放下一個聲音。
如果播放了最後一個聲音，請移除事件偵聽器並提醒結束。

Answer 2

不是直接回答，但代碼太大，無法在評論中顯示。

我建議您將以下代碼添加到您的腳本中，並檢查控制檯日誌中是否有結束的事件（例如停滯或錯誤事件）。我在iPad和iPod上測試過，兩者都可以正常工作，也許由於網絡連接而出現錯誤。

var media_events = new Array(); 
function audioattachevents(selector) { 
    media_events["abort"] = 0; 
    media_events["error"] = 0; 
    media_events["mousewheel"] = 0; 
    media_events["blur"] = 0; 
    media_events["focus"] = 0; 
    media_events["pause"] = 0; 
    media_events["canplay"] = 0; 
    media_events["formchange"] = 0; 
    media_events["play"] = 0; 
    media_events["canplaythrough"] = 0; 
    media_events["forminput"] = 0; 
    media_events["playing"] = 0; 
    media_events["change"] = 0; 
    media_events["input"] = 0; 
    media_events["progress"] = 0; 
    media_events["click"] = 0; 
    media_events["invalid"] = 0; 
    media_events["ratechange"] = 0; 
    media_events["contextmenu"] = 0; 
    media_events["keydown"] = 0; 
    media_events["readystatechange"] = 0; 
    media_events["dblclick"] = 0; 
    media_events["keypress"] = 0; 
    media_events["scroll"] = 0; 
    media_events["drag"] = 0; 
    media_events["keyup"] = 0; 
    media_events["seeked"] = 0; 
    media_events["dragend"] = 0; 
    media_events["load*"] = 0; 
    media_events["seeking"] = 0; 
    media_events["dragenter"] = 0; 
    media_events["loadeddata"] = 0; 
    media_events["select"] = 0; 
    media_events["dragleave"] = 0; 
    media_events["loadedmetadata"] = 0; 
    media_events["show"] = 0; 
    media_events["dragover"] = 0; 
    media_events["loadstart"] = 0; 
    media_events["stalled"] = 0; 
    media_events["dragstart"] = 0; 
    media_events["mousedown"] = 0; 
    media_events["submit"] = 0; 
    media_events["drop"] = 0; 
    media_events["mousemove"] = 0; 
    media_events["suspend"] = 0; 
    media_events["durationchange"] = 0; 
    media_events["mouseout"] = 0; 
    media_events["timeupdate"] = 0; 
    media_events["emptied"] = 0; 
    media_events["mouseover"] = 0; 
    media_events["volumechange"] = 0; 
    media_events["ended"] = 0; 
    media_events["mouseup"] = 0; 
    media_events["waiting"] = 0; 

    for (key in media_events) { 
     selector.bind(key, function (e, data) { 
     console.log(e.type); 
     }); 
    } 
} 

audioattachevents($('#html5soundtag')); 

特別是對於那些誰想要短期符號：

media_events = {"abort":0,"error":0, "mousewheel":0, "blur":0, "focus":0, "pause":0, 
    "canplay":0, "formchange":0, "play":0, "canplaythrough":0, "forminput":0, 
    "playing":0, "change":0, "input":0, "progress":0, "click":0, "invalid":0, 
    "ratechange":0, "contextmenu":0, "keydown":0, "readystatechange":0,  
    "dblclick":0, "keypress":0, "scroll":0, "drag":0, "keyup":0, "seeked":0, 
    "dragend":0, "load*":0, "seeking":0, "dragenter":0, "loadeddata":0, 
    "select":0, "dragleave":0, "loadedmetadata":0, "show":0, "dragover":0, 
    "loadstart":0, "stalled":0, "dragstart":0, "mousedown":0, "submit":0, 
    "drop":0, "mousemove":0, "suspend":0, "durationchange":0, 
    "mouseout":0, "timeupdate":0, "emptied":0, "mouseover":0, 
    "volumechange":0, "ended":0, "mouseup":0, "waiting":0}