使用setinterval

Question

我正在创建一个音频网络播放器，我希望它能够连续运行，这意味着当一段音频完成播放时，它会继续播放下一个音频。

然而，我遇到了一个问题，一切都按预期工作，但是一旦上一个音频完成播放，下一个音频开始，每2秒，新的音频将播放＆amp;暂停;的连续

这是我当前的JavaScript代码块：

function playPauseButton(button, wave, trackID){
    var button = $(button); // play button

    if(wave.isPlaying()){ // if the audio is playing and the user clicks play button, pause the audio
        button.removeClass("playing");
        wave.pause();
    } else { // vice versa
        button.addClass("playing");
        wave.play();
    }
    waveDuration = wave.getDuration(); // audio duration
    var nextTrack = ++trackID; // get the current audio track ID and plus 1 to get the new track ID

    setInterval(function(){ // check every 2 seconds if the audio is finished playing
        if(wave.getCurrentTime() >= waveDuration){ // if it has, make the play button a pause button
            button.removeClass("playing");
            $(nextTrack + '-ppbutton').click(); // simulate new track play button click
        }    
    }, 2000);
}

＆安培;我非常简单的HTML播放按钮：

<!-- onclick play audio (if paused), pause audio (if playing) !-->
<div onclick="playPauseButton(this, a2wave, 2);" id="2-ppbutton"></div>
<!-- 2 is the id !-->

我一直在努力解决这个问题几个小时，然而，它仍然让我感到困惑（我不擅长JavaScript）

所有帮助＆amp;建议表示赞赏。

我试图评论所有内容以帮助您理解

更新：

感谢Vlaz解决我的问题;真的很感激！ :)

然而，如果人们仍然想提出建议或编辑，那么你也非常欢迎！

感谢。

Answer 1

每次点击播放/暂停按钮，都会拨打setInterval。因此，您可能同时拥有多个基于时间的触发器，并且这种情况可能仍然存在。

如果您将来自setInterval的电话替换为：

，该怎么办？

var trigger = setInterval(function(){ // check every 2 seconds if the audio is finished playing
        if(wave.getCurrentTime() >= waveDuration){ // if it has make the play button, a pause button
            button.removeClass("playing");
            $(nextTrack + '-ppbutton').click(); // simulate new track play button click
            clearInterval(trigger);
        }    
    }, 2000);

Answer 2

问题

您对[{1}}的使用将在按下按钮的每个时间启动新的代码。因此，在三次按下之后，你会有三个按下它们。此外，请记住，每个人都将运行自己的检查。所以我相信我知道你的问题在哪里，这是一个概述

第一次调用
1. setInterval，我们称之为 intervalPrime 。我们假设歌曲的持续时间是60秒。
2. 歌曲每2秒继续检查一次，最终结束。
3. 点击播放按钮时会调用新的setInterval - 这会创建一个新的间隔 - 让我们称之为 intervalSecond 。这个将检查新歌和新的持续时间，但细节是无关紧要的。
4. 歌曲播放， intervalSecond 监听歌曲是否已完成。
5. 同时 intervalPrime 仍在进行检查。由于setInterval可能会返回wave.getCurrentTime()（歌曲的结尾），然后检查它会通过60，因此它会点击按钮。

如何避免

删除旧间隔

您可以做的是确保您一次只有一个60 >= 60有效。该函数返回计时器的ID，因此您可以执行与此相似的操作

setInterval

（说明性）

因此，基本上尝试通过在开始新的间隔之前停止前一个间隔来维持单个间隔。

只保留一个间隔

另一种方法是只激活一个间隔并保持状态，这样就可以有类似

的东西

var currentChecker;

function playPause() {
   /* .... */
   if (shouldClick) {
     clearTimeout(currentChecker);
     currentChecker = setInterval( /* ... */ );
   }
}

歌曲结束时使用var masterLoop = setInterval(function() { var wave = getCurrentWave(); //fetching it will depend on your application if(wave.getCurrentTime() >= wave.getDuration()){ /* handle what happens */ } } , 2000); 。

我不熟悉用于播放声音的API，但是如果可以挂钩到结束事件，那么当发生这种情况时你可能会使用简单的setInterval，就像这样

setTimeout

不止一个

如果API没有提供挂钩完成的播放事件的方法，更好的选择是组合最后两个。有一个主循环检查曲目的状态，完成后，使用 //assuming the API allows to do something like this wave.onFinish(function() { setInterval(playNext, 2000); }) 来安排下一首歌曲。间隔延迟可能需要设置得更低，但它会导致音轨之间的时间更加一致，因为一首歌曲可能会结束，0.3秒后间隔会检查并播放歌曲，或者一首歌曲可能会在间隔结束，所以你有2秒的间隙。

维护一个setInterval

这类似于第一个清除旧间隔但不完全相同的建议。

问题是你不需要继续检查歌曲是否已经播放完毕，因为你已经知道 它将完成。因此，当它播放时，您可以使用setTimeout排队下一首歌

setTimeout

所以，这样你就不需要继续检查了。

但是，唯一的问题是如果用户点击//assuming wave returns time in milliseconds var playNextIn = (wave.getDuration() - wave.getCurrentTime()) + 2000; nextSongTimer = setTimeout(function() { /* code to play next song */ }, playNextIn); ，在这种情况下，您需要调用pause，因为不再需要它。所以这样，每次播放一首歌时你只需要启动一次计时器。