0

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>
indubitablee
  • 8,136
  • 2
  • 25
  • 49
Gijo Varghese
  • 11,264
  • 22
  • 73
  • 122
  • Possible duplicate of [How can I get the current time of the song playing in jPlayer?](http://stackoverflow.com/questions/13785631/how-can-i-get-the-current-time-of-the-song-playing-in-jplayer) – Danmoreng Oct 23 '15 at 13:51
  • ya i can get the current time. But i want to display a message at some specific times... – Gijo Varghese Oct 23 '15 at 13:52
  • Take a look into the documentation: http://jplayer.org/latest/developer-guide/ The Paragraph **jPlayer Data** basically describes all you need in an example. – Danmoreng Oct 23 '15 at 13:56

4 Answers4

0

Try something like;

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

This function takes time as input. Also setTimeout function will call the function every 1 sec and run the code. Hope this helps.

Alfred
  • 21,058
  • 61
  • 167
  • 249
0

What you want to do is set an interval to check your currentTime variable as the video plays. There are many ways to do this but here is a simple example of what you need to do.

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

setInterval(alertPlayerTime, 1000);

Send the function as a variable into setInterval and time is in milliseconds so you can check it how ever often you want. There are numerous posts in regards to this type of solution like this one.

Community
  • 1
  • 1
brharrison
  • 62
  • 6
0

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>
Gijo Varghese
  • 11,264
  • 22
  • 73
  • 122
-3

I assume currentTime is updated by the player into an element with id 'state1'. What you can do is get it content and parse it:

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

and then use it in your condition.

To do so periodically:

setTimeout(function(){
    var myCurrentTime = Number.parseInt(document.getElementById('state1').textContent);
    .... handling logic here
}, 1000);
Meir
  • 14,081
  • 4
  • 39
  • 47
  • i want this myCurrentTime updated every second. Then only i can it in a loop and check time in if condition – Gijo Varghese Oct 23 '15 at 14:03
  • @GijoVarghese did you read the link I gave you already? http://jplayer.org/latest/developer-guide/#jPlayer-data It's exactly what you need... – Danmoreng Oct 23 '15 at 14:05