3

.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);
}
4

2 回答 2

1

This should fix your problem, and at very least, it will keep your code more maintainable:

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>

Each time the music finishes, playhtml5sound() is executed, playing the next sound.
If the last sound is played, remove the event listener, and alert the ending.

于 2012-12-13T07:56:48.923 回答
0

Not directly an answer, but the code is too large for showing in a comment.

I suggest you add the following code to your script and check the console log for any other events than ended (for example stalled or error events). I tested in iPad and iPod, both work ok, maybe you have errors due to networking.

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'));

Especially for those who want the short notation:

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}
于 2012-12-13T07:58:07.383 回答