在特定时间更改 div 的内容

Question

我正在使用 JPlayer js 库作为音频播放器。我想在歌曲的特定时间更改 div 的内容。在currentTime下面的代码中有时间。

我想做类似的东西

if currentTime=='00:15' alert('track is now on 15th second');

if currentTime=='00:45' alert('track is now on 45th second');

if currentTime=='01:20' alert('track is now on 01:20th second');

if currentTime=='02:15' alert('track is now on 02:15th second');

但我无法将curretnTime 作为变量或将其值分配给变量。我是js的新手。下面是jplayer的实际代码

<script type="text/javascript">
var current_time;
$(document).ready(function(){
    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                title: "Bubble",
                m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
                oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
            });
        },
        cssSelectorAncestor: "#jp_container_1",
        swfPath: "/js",
        supplied: "mp3, oga",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true,
        cssSelectorAncestor: "",
        cssSelector: {
            currentTime: "#state1",
        }
    });
});         
</script>   

Answer 1

试试类似的东西；

function messager(time){
    alert(time);
}
messager(currentTime);
setTimeout(messager(currentTime), 1000);

这个函数需要时间作为输入。此外setTimeout 函数将每 1 秒调用一次函数并运行代码。希望这会有所帮助。

Answer 2

您要做的是设置一个间隔，以便在视频播放时检查您的 currentTime 变量。有很多方法可以做到这一点，但这里是您需要做的一个简单示例。

function alertPlayerTime(){
    alert("Track is " + currentTime + " seconds in.");
    // other code can go here as well
}

setInterval(alertPlayerTime, 1000); 

将函数作为变量发送到setInterval，时间以毫秒为单位，因此您可以根据需要检查它的频率。关于这种类型的解决方案有很多帖子，例如this one。

Answer 3

我自己做的

<script type="text/javascript">

            $(document).ready(function(){
              $("#jquery_jplayer_1").jPlayer({


              timeupdate: function(event) { 
              var time = event.jPlayer.status.currentTime;

                  if (time > 2) $('#comment').html('My first comment'); 
                  if (time > 4) $('#comment').html('My second comment');
                  if (time > 8) $('#comment').html('My third comment'); 
                  if (time > 15) $('#comment').html('My 4th comment');
                  if (time > 25) $('#comment').html('My 5th comment');  
                  if (time > 35) $('#comment').html('My 6th comment');
                  if (time > 50) $('#comment').html('My 7th comment');  
                  if (time > 60) $('#comment').html('My 8th comment');
                  if (time > 70) $('#comment').html('My 9th comment');  
                  if (time > 90) $('#comment').html('My 10th comment');
                  if (time > 120) $('#comment').html('My 11th comment');    
                  if (time > 150) $('#comment').html('My 12th comment');
                  if (time > 180) $('#comment').html('My 13th comment');    
                  if (time > 200) $('#comment').html('My 14th comment');

               },


                ready: function () {
                  $(this).jPlayer("setMedia", {
                    title: "Bubble",
                    m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
                    oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
                  });
                },
        cssSelectorAncestor: "#jp_container_1",
        swfPath: "/js",
        supplied: "mp3, oga",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true,
        cssSelectorAncestor: "",
        cssSelector: {
          currentTime: "#state1",
        }       
      });
    });
          </script> 

Answer 4

我假设 currentTime 被玩家更新为 id 为“state1”的元素。你可以做的是获取内容并解析它：

var myCurrentTime = Number.parseInt(document.getElementById('state1').textContent);

然后在你的情况下使用它。

定期这样做：

setTimeout(function(){
    var myCurrentTime = Number.parseInt(document.getElementById('state1').textContent);
    .... handling logic here
}, 1000);