如何不断更新我正在使用 JS 播放的这个 mp3 文件的持续时间？进度条不起作用
Posted
技术标签:
【中文标题】如何不断更新我正在使用 JS 播放的这个 mp3 文件的持续时间？进度条不起作用【英文标题】：How can I constantly update the duration of this mp3 file I'm playing with JS? The progress bar does not work 【发布时间】：2011-07-02 19:53:13 【问题描述】：这是来自音频播放器的脚本。我从 Jquery 食谱中得到，我似乎无法开始工作。我真的很难过，如果有任何帮助，我将不胜感激。
<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>
【问题讨论】：
【参考方案1】：您应该尝试 setInterval()。 setInterval 将每隔一定的毫秒数调用一个方法。您可以使用 setInterval 调用检查歌曲播放的当前时间的方法。
例子
setInterval(checkSongTime, 1000);
function checkSongTime()
// code to check the current time of the song and to display it
提示：“1000”是毫秒数，也等于1秒，所以你的时间会每秒更新一次。
【讨论】：
谢谢。我使用 setInterval 来检查加载元数据后的时间，现在我正在尝试确保进度条的所有组件都收到消息。 不客气！我希望它运作良好。另外，您介意在它旁边打勾来选择它作为正确答案吗？以上是关于如何不断更新我正在使用 JS 播放的这个 mp3 文件的持续时间？进度条不起作用的主要内容，如果未能解决你的问题，请参考以下文章