Search code examples
javascriptjqueryhtmlcssjplayer

Change content of a div at specific time


I am using JPlayer js library as an audio player. I want to change the content of a div at specific time of the song. In the code below currentTime has the time.

I want to make something like

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');

But i'm unable to take curretnTime as a variable or assign its value to a variable. I'm newbie in js. Below is the actual code from 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>   

Solution

  • I have done that myself

    <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>