Javascript 更改音频时间更新上的播放/暂停按钮

我有一个播放/暂停按钮，需要在时间更新时更改，因为有一个历史API脚本。在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>'); 
      }
}

$（歌曲）.on（'timeupdate'，function（））{
//将body_player控件绑定到timeupdate，以便在整个页面加载过程中进行更新。
如果（歌曲暂停）{
$（'.main_controls'）。替换为（''）；//同时更改主控件
$（“.body_container*[data-t_id=”“+t_id+”].player.controls”）.replacetwith（“”）；
}
否则{
$（'.main_controls'）。替换为（''）；//同时更改主控件
$（“.body_container*[data-t_id=”“+t_id+”].player.controls”）.replacetwith（“”）；
}
}

正如您所看到的，当按钮不断更新时，这会导致问题。因此，有时如果用户单击按钮，在更新时不会发生任何事情。除此之外，更新如此多的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>'); 
          }
     }
}

var i=0；
$（宋）。on（'timeupdate'，function（）{
我++
//将body_player控件绑定到timeupdate，以便在整个页面加载过程中进行更新。
如果（歌曲暂停）{
i=0；
$（'.main_controls'）。替换为（''）；//同时更改主控件
$（“.body_container*[data-t_id=”“+t_id+”].player.controls”）.replacetwith（“”）；
}
否则{
如果（i==1）{
$（'.main_controls'）。替换为（''）；//同时更改主控件
$（“.body_container*[data-t_id=”“+t_id+”].player.controls”）.replacetwith（“”）；
}
}
}

我希望你能看到它是如何工作的，它相当简单。

I

用timeupdate更新，如果

I

==

1

则按钮将被更改。当歌曲开始播放时，你不能使用

I===0

，而不是0。如果是

I==0

按钮将永远不会被更新

我现在遇到的问题是

（if song.p.）{

功能不正常。添加的

i++

似乎弄乱了时间更新，因此在用户暂停曲目后时间不会更新。我不完全确定这里发生了什么，但我认为这就是正在发生的事情。时间更新功能不会在曲目暂停或播放时更改，因此整个功能不会重新启动联合国

---

注意：作为旁注，我刚刚删除了timeupdate函数中的代码，因为它与手头的事情关系不大。如果我认为它会以任何方式影响这一点，我会添加它。

我不太明白你的目的……你所说的“我遇到的问题是，如果用户在去其他地方后返回到曲目@ParthikGosar抱歉，我的解释不够好。如果用户播放一首曲目，然后转到另一个页面，然后再回到该曲目，暂停按钮将不再显示。当用户转到另一个页面时，是否暂停该曲目？我有一个类似的isse，其中的“时间更新”cal当你转到另一个页面，然后按后退按钮时，lback不起作用（在Safari中）。页面上的其他jQuery绑定仍然起作用。有什么办法解决这个问题吗？