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>
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.
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.
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>
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);
Java JSONObject storing decimals and integers getting mixed up
Application error #400 [error:2045] [error:1045] in MantisBT (Ubuntu 18.04)
So I got a problem with my code, and after hours of googling I cant seem to find a solution. .
I have code which, when a button is clicked, shows a popover, which is working fine. But it persists in showing.
I am using the following script to get a JSON response from my server and append a HTML element in my mobile app. .
I am using Gridster in a project. My scenario is:.