javascript - 仅第一次触发的连续 Html5 音频 .play()

Question

我想通过在每个函数中使用 .play() 进行函数调用回退来播放连续的声音序列，以逐一播放声音。

最有趣的是: 每次在我的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()被执行，播放下一个声音。
如果播放完最后一个声音，则移除事件监听器，并提醒结束。