jQuery的 - Rangeslider时间更新
问题描述:
我的问题是这样的:
我发现了一个可爱的小小提琴here *(该演示使用rangeslider.js),我想改变percentange测量秒(格式是这样的:00:00) 。
有人可以帮我解释一下吗?jQuery的 - Rangeslider时间更新
$("#range-control").rangeslider({
polyfill: false,
onSlideEnd: function(position, value){
audio.currentTime = audio.duration * value/100;
}
});
$(audio).bind('timeupdate', function(){
var percent = audio.currentTime/ audio.duration * 100;
$("#range-control").val(percent).change();
$("#status").text(Math.round(percent*100)/100+"%");
});
$("#btn-play").click(function(){
audio.play();
});
$("#btn-stop").click(function(){
audio.pause();
});
谢谢!
*干得好,@ alan0xd7
答
我会回答不仅仅是一次来到这里的格式多一点。
很明显,您希望使用RangeSlider具有自定义音频控件。
取决于触发需要改变显示的时间的情况下,你必须使用currentTime
或duration
乘以滑杆的位置。
使用中的两个事件在音频元素播放时是timeupdate
。以及用户移动滑块时的input
事件。
对于这些计算,您需要使用JavaScript Math.floor()
函数来删除小数点,格式化时间。您还需要使用“模数”运算符来正确显示秒数。 I already explained the use of modulo here。
最后,当音频播放时,我敢肯定你希望滑块随着时间的推移相应地移动。
,使功能有这三个部分:
- 当用户移动滑块
- 什么来当音频播放
- 而在所有的情况下怎么办,更新显示的时间。
所以这里是你的功能...我删除了所有的控制台日志,但你可以看到他们在这个CodePen。
var audio = $("#audio")[0];
function displayTime(e){
var newCurrentTime = 0;
// User moves the slider. Just update the audio currentTime.
if(e.type=="input"){
newCurrentTime = audio.duration * parseInt($("#range-control").val())/100;
audio.currentTime = newCurrentTime;
}
// The audio plays. Move the slider.
if(e.type=="timeupdate"){
newCurrentTime = audio.currentTime;
// Update the slider position
var rangeSliderWidth = $(".rangeslider").width() - $(".rangeslider__handle").width();
var audioPercent = audio.currentTime/audio.duration;
var sliderPos = rangeSliderWidth*audioPercent;
// The "handle" and the green fill at its left.
$(".rangeslider__handle").css({"left":sliderPos});
$(".rangeslider__fill").css({"width":sliderPos+21});
}
// Display formatted time
var minutes = Math.floor(newCurrentTime/60);
var seconds = Math.floor(newCurrentTime%60);
if(seconds<10){seconds = "0"+seconds}
$("#status").text(minutes+":"+seconds);
}
为了达到这个目的你有尝试过什么吗?提示:使用'currentTime'并将其格式化,然后将其附加到'#status'。 –
感谢您的回复@Louys Patrice Bessette。你能帮我一点吗? –