Question

我有一个播放/暂停按钮，由于历史API脚本需要在timeupdate上更改。在timeupdate上更改按钮似乎毫无意义，但不是，正如我将解释的那样。

我有一个历史API脚本，可以让用户在没有整页刷新的情况下在页面加载之间切换。这还允许在页面加载之间连续播放音频。我遇到的问题是，如果用户在去往其他地方后返回轨道（它仍将在后台播放），则暂停按钮将成为播放按钮。因此，为了解决这个问题，我将暂停/播放功能放入timeupdate，以便更新。

$(song).on('timeupdate', function() {
    //Bind body_player controls to timeupdate so updates throughout pageloads. 
     if (song.paused){
         $('.main_controls').replaceWith('<div class="main_controls" id ="play" data-t_id="' + t_id +'"></div>'); //change main controls also
         $(".body_container*[data-t_id='" + t_id +"'] .player .controls").replaceWith('<div class="controls" id="play" title="Play"></div>');   
      }
      else {
          $('.main_controls').replaceWith('<div class="main_controls" id ="pause" data-t_id="' + t_id +'"></div>'); //change main controls also
          $(".body_container*[data-t_id='" + t_id +"'] .player .controls").replaceWith('<div class="controls" id="pause" title="Pause"></div>'); 
      }
}

正如您所看到的，这会导致问题，因为按钮会不断更新。因此，有时如果用户点击该按钮，则当时正在更新时不会发生任何事情。除此之外，更新DOM的效率极低。所以我想出了这个：

var i = 0;
$(song).on('timeupdate', function() {
    i++
    //Bind body_player controls to timeupdate so updates throughout pageloads. 
    if (song.paused){
    i = 0;
        $('.main_controls').replaceWith('<div class="main_controls" id ="play" data-t_id="' + t_id +'"></div>'); //change main controls also
        $(".body_container*[data-t_id='" + t_id +"'] .player .controls").replaceWith('<div class="controls" id="play" title="Play"></div>');   
    }
    else {
        if (i === 1){
            $('.main_controls').replaceWith('<div class="main_controls" id ="pause" data-t_id="' + t_id +'"></div>'); //change main controls also
            $(".body_container*[data-t_id='" + t_id +"'] .player .controls").replaceWith('<div class="controls" id="pause" title="Pause"></div>'); 
          }
     }
}

我希望你能看到它是如何运作的，它相当简单。 i使用timeupdate进行更新，如果i === 1，则会更改按钮。您无法使用i === 0，因为歌曲开始在i === 1上播放而不是0.如果是i === 0，则该按钮永远不会更新。

我现在遇到的问题是(if song.p...){无法正常运行。似乎添加的i++已经与timeupdate混淆，因此在用户暂停轨道后时间不会更新。我不完全确定这里发生了什么，但我认为这就是正在发生的事情。 timeupdate函数在音轨暂停或播放时不会改变，因此整个功能不会运行。

注意：作为旁注，timeupdate函数中有更多代码我刚删除它，因为它与手头的事情几乎没有关系。如果我认为它可以以任何方式影响这个我会添加它。

更改音频timeupdate上的播放/暂停按钮

0 个答案: