This is script from an audio player. I got from the Jquery cookbook that I can’t seem to get working. I’m really stumped and would appreciate any help.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery- ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
</head>
<body>
<script>
var $audio = $('audio');
console.log($audio);
var audioEl = $audio[0];
console.log(audioEl);
var secondsTotal = audioEl.currentTime;
console.log(secondsTotal);
var audio = {
currentTime: 0,
duration: secondsTotal,
volume: 0.5,
set: function(key, value) {
this[key] = value;
try { audioEl[key] = value; } catch(e) {}
if (key != 'currentTime') {
$audio.trigger('timeupdate');
}
if (key != 'volume') {
$audio.trigger('volumechange');
}
},
play: function() {
audioEl.play && audioEl.play();
},
pause: function() {
audioEl.pause && audioEl.pause();
}
};
console.log(audio);
$audio.bind('timeupdate', function() {
audio.currentTime = audioEl.currentTime;
});
audio.set('currentTime', 0);
audio.set('volume', 0.5);
//end compatibility layer
//play pause button
var $audio = $('audio'), audioEl = $audio[0];
var audio = {
currentTime: 0,
duration: secondsTotal,
volume: 0.5,
set: function(key, value) {
this[key] = value;
try { audioEl[key] = value; } catch(e) {}
if (key == 'currentTime') {
$audio.trigger('timeupdate');
}
if (key == 'volume') {
$audio.trigger('volumechange');
}
},
play: function() {
audioEl.play && audioEl.play();
},
pause: function() {
audioEl.pause && audioEl.pause();
}
};
$audio.bind('timeupdate', function() {
audio.currentTime = audioEl.currentTime;
});
audio.set('currentTime', 0);
audio.set('volume', 0.5);
//end compatibility layer
//play pause button
$('.mplayer .playpause').click(function() {
var player = $(this).parents('.mplayer');
if (player.is('.paused')) {
$('.mplayer').removeClass('paused');
audio.play();
} else {
$('.mplayer').addClass('paused');
audio.pause();
}
return false;
})
.hover(function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); })
.focus(function() { $(this).addClass('ui-state-focus'); })
.blur(function() { $(this).removeClass('ui-state-focus'); });
$('.mplayer').addClass('paused');
// current and total time labels
function minAndSec(sec) {
sec = parseInt(sec);
return Math.floor(sec / 60) + ":" + (sec % 60 < 10 ? '0' : '') +
Math.floor(sec % 60);
}
$('.mplayer .currenttime').text(minAndSec(audio.currentTime));
$('.mplayer .duration').text(minAndSec(secondsTotal));
$audio.bind('timeupdate', function(event) {
$('.mplayer .currenttime').text(minAndSec(audio.currentTime));
});
// slider
$('.mplayer .track').slider({
range: 'min',
max: audio.duration,
slide: function(event, ui) {
$('.ui-slider-handle', this).css('margin-left',
(ui.value < 3) ? (1 - ui.value) + 'px' : '');
if (ui.value >= 0 && ui.value <= audio.duration) {
audio.set('currentTime', ui.value);
}
},
change: function(event, ui) {
$('.ui-slider-handle', this).css('margin-left',
(ui.value < 3) ? (1 - ui.value) + 'px' : '');
}
})
.find('.ui-slider-handle').css('margin-left', '0').end()
.find('.ui-slider-range').addClass('ui-corner-left').end();
$audio.bind('timeupdate', function(event) {
$('.mplayer .track').bind(function() {
if ($(this).slider('value') != audio.currentTime) {
$(this).slider('value', audio.currentTime);
}
});
$('.mplayer .currenttime').text(minAndSec(audio.currentTime));
});
//
var secondsCached = 0, cacheInterval;
$('.mplayer .track').progressbar({
value: secondsCached / secondsTotal * 100
})
$('.mplayer .track').find('.ui-progressbar-value').css('opacity', 0.2).end();
cacheInterval = setInterval(function() {
secondsCached += 2;
if (secondsCached > secondsTotal) clearInterval(cacheInterval);
$('.mplayer .track.ui-progressbar').progressbar('value', secondsCached / secondsTotal * 100);
}, 30);
//volume control
$('.mplayer .volume').slider({
max: 1,
orientation: 'vertical',
range: 'min',
step: 0.01,
value: audio.volume,
start: function(event, ui) {
$(this).addClass('ui-slider-sliding');
$(this).parents('.ui-slider').css({
'margin-top': (((1 - audio.volume) * -100) + 5) + 'px',
'height': '100px'
}).find('.ui-slider-range').show();
},
slide: function(event, ui) {
if (ui.value >= 0 && ui.value <= 1) {
audio.set('volume', ui.value);
}
$(this).css({
'margin-top': (((1 - audio.volume) * -100) + 5) + 'px',
'height': '100px'
}).find('.ui-slider-range').show();
},
stop: function(event, ui) {
$(this).removeClass('ui-slider-sliding');
var overHandle = $(event.originalEvent.target)
.closest('.ui-slider-handle').length > 0;
if (!overHandle) {
$(this).css({
'margin-top': '',
'height': ''
}).find('.ui-slider-range').hide();
}
},
change: function(event, ui) {
if (ui.value >= 0 && ui.value <= 1) {
if (ui.value != audio.volume) {
audio.set('volume', ui.value);
}
}
}
})
.mouseenter(function(event) {
if ($('.ui-slider-handle.ui-state-active').length) {
return;
}
$(this).css({
'margin-top': (((1 - audio.volume) * -100) + 5) + 'px',
'height': '100px'
}).find('.ui-slider-range').show();
})
.mouseleave(function() {
$(this).not('.ui-slider-sliding').css({
'margin-top': '',
'height': ''
}).find('.ui-slider-range').hide();
})
.find('.ui-slider-range').addClass('ui-corner-bottom').hide().end();
$('.mplayer').each(function() {
$('.bg:first', this).css('opacity', 0.7);
$('.bg:last', this).css('opacity', 0.3);
})
$('.mplayer .rod').css('opacity', 0.4);
$('.mplayer .hl').css('opacity', 0.25);
$('.mplayer .hl2').css('opacity', 0.15);
});
</script>
You should try setInterval(). setInterval will call a method every certain amount of milliseconds. You can use setInterval to call a method that checks the currentTime of the song playing.
Example
Tip: “1000” is the amount of milliseconds, and it also equals 1 second, therefore your time will be updated once every second.