Change content of a div at specific time

224
November 23, 2016, at 12:59 PM

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

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.

Answer 2

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.

Answer 3

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

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);
READ ALSO
Using jQuery to generate a href inside an anchor tag with content from xml

Using jQuery to generate a href inside an anchor tag with content from xml

So I got a problem with my code, and after hours of googling I cant seem to find a solution. .

298
How to have a click anywhere hide a popover by jquery?

How to have a click anywhere hide a popover by jquery?

I have code which, when a button is clicked, shows a popover, which is working fine. But it persists in showing.

221
Get JSON response not working on mobile device with Ionic framework and jQuery

Get JSON response not working on mobile device with Ionic framework and jQuery

I am using the following script to get a JSON response from my server and append a HTML element in my mobile app. .

269
Gridster.js: Prevent dragging on clickable element

Gridster.js: Prevent dragging on clickable element

I am using Gridster in a project. My scenario is:.

186