HTML5 AudioPlayer 事件操作“已结束”被多次调用答案

【问题标题】：HTML5 AudioPlayer Event Action 'Ended' is being call more than One timeHTML5 AudioPlayer 事件操作“已结束”被多次调用
【发布时间】：2014-09-10 21:44:16
【问题描述】：

我正在使用 HTML5 音频播放器。我正在实施播放列表。我正在使用“结束”事件操作来播放下一个音频媒体文件。但是，在媒体文件的末尾，“结束”事件被触发了不止一次。（因为我记录的消息出现不止一次。）

这是我的事件监听器：

    //Event Listener
function addPlayerListener() {
    console.log("Recording Index: "+combinedSessionIndex);

    var audio = document.getElementById("playarea");
    audio.addEventListener('ended', function () {

        sessionsToPlay = $("#audio_files").val().split(',');

        console.log ("In Recording End Event Listener...!!!"+combinedSessionIndex);
        //It Shows Length '1' not '0'
        if (sessionsToPlay.length == 1) {
            console.log("Returned Due to Session To Play length..!!!")
            return;
        }

        //As CombinedSessionIndex Starts with 1
        if (combinedSessionIndex == sessionsToPlay.length) {
            console.log("Returned Due to All Session To Play Got Finish..!!!")
            $("#audio_files").val("");
            sessionsToPlay = [];
            combinedSessionIndex = 0;
            return;
        }

        var filePath = '${properties["RECORDED_SESSION_RETREIVAL_PATH"]}';
        filePath = filePath + sessionsToPlay[combinedSessionIndex] + ".mp4";
        combinedSessionIndex++;       
        audio.src = filePath;
        audio.play();
    }, false);
}

因此，当特定媒体文件结束时，它会跳过下一个媒体文件并开始播放下一个（跳过 1,2 后）文件。对于每一个跳过的媒体文件，控制权都在事件监听器中，这表明事件监听器在单个调用结束时被重复调用。

我第一次用这个代码播放音频文件：

  //PlayBack Session
function play(data) {

    //Just to deal with a scenario that when we play a combined session and in the mean while we start listening any other single
    //session, then after completion of this single session, remaining previous combined session should not resume.
    //console.log("Re-setting Player ...!!!");
    //$("#audio_files").val("");
    //sessionsToPlay = [];
    //combinedSessionIndex = 0;

    var filePath = '${properties["RECORDED_SESSION_RETREIVAL_PATH"]}';
    filePath = filePath + data + ".mp4";
    console.log("filePath: " + filePath);
    if (data == null || data == "") {
        alert("Nothing to Play ...!!!");
        return;
    }
    $("#playarea").attr({
        "src": filePath,
        "autoplay": "autoplay"
    })
}

在此结束后，使用“结束”事件侦听器播放更多剪辑。

我找不到原因。如果我做错了什么，请指导我？

在此先感谢 :)

【问题讨论】：

如果您将事件处理程序更改为只有一行代码调用console.log('ENDED event handled'); 并删除所有其他代码，您还会收到多个事件吗？我想知道您在事件处理程序中执行的操作是否会导致新的结束事件，例如，如果找不到音频文件，或者音频文件非常短，或者其他类似问题？
但是播放下一个媒体文件的代码会保留在那里吗？
暂时把它拿出来，因为我们想测试你是否在没有任何代码的情况下获得多个事件。
实际上，我遇到了一个非常奇怪的问题。当我刷新页面并播放时，所有媒体文件都会正常播放。现在，我再次按下播放按钮（不刷新页面），它通过跳过一个文件来播放媒体文件。当它完成所有文件时。然后再次如果我按下播放按钮（再次不刷新页面）然后它通过跳过两个文件等播放媒体文件......只是第一次它工作正常

标签： javascript html html5-audio audio-player

【解决方案1】：

啊，我的错。我经常注册同一个事件监听器“结束”（每次用户按下播放按钮，而它应该只是一次）。这就是为什么我不止一次得到“结束”事件的原因。它实际上会为我注册“结束”事件的次数生成“结束”事件操作。

你不认为它应该只考虑一次吗？因为我们的目的只是在媒体文件结束时收到通知。虽然我们注册了多次，但没有多次通知的逻辑。

【讨论】：