我尝试使音频的进度栏尽可能简单。我能够制作一个播放和停止按钮,并且它可以正常工作。我能够用简单的动画制作进度图形。 (这首歌有30秒,而我会设置30毫秒的动画。)现在,我陷入了这个问题:
单击栏的那部分时,如何在歌曲中的任何地方走动?
(我不需要任何插件。我尝试自己做所有事情并理解每个步骤)
这是要播放的代码:
http://jsfiddle.net/396aP/1/
HTML:
<div id="play">Play</div>
<div id="stop">Stop</div>
<div id="progressbar">
<div id="bar">
<div id="indicator"></div>
</div>
</div>
<br><br>
<audio id="audio" src="http://a3.mzstatic.com/us/r1000/075/Music/35/e5/c6/mzm.pffzpdco.aac.p.m4a">
</audio>
CSS:
#play {
position:absolute;
left:45px; top:20px;
cursor: pointer;
}
#stop {
position:absolute;
left:90px; top:20px;
cursor: pointer;
}
#progressbar{
position:absolute;
width:0px;
height:4px;
top:50px;
left:45px;
}
#bar{
position:absolute;
width:150px; height:10px;
background-color:#999;
}
#indicator{
position:absolute;
width:0px; height:10px;
background-color:#333;
}
JQUERY:
$(function(){
$("#play").click(function() {
$("#audio").trigger('play');
$("#indicator").animate({"width": "150px"}, 30000);
});
$("#stop").click(function() {
$("#audio").trigger('pause');
$("#indicator").stop();
});
});
最佳答案
如果您的问题出在鼠标的位置,请尝试以下操作:
$("#progressbar").mouseup(function(e){
var leftOffset = e.pageX - $(this).offset().left;
var songPercents = leftOffset / $(this).width;
var audio = $('audio');
audio.currentPosition = songPercents * audio.duration;
});
我还没有尝试过,所以不确定它是否会在第一次尝试中起作用,但是它应该为您提供一个开始。
关于jquery - 进度条:跳到一个点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23710984/