jQuery的 - Rangeslider时间更新

-1

我的问题是这样的：
我发现了一个可爱的小小提琴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

来源

2017-09-24 22_4

为了达到这个目的你有尝试过什么吗？提示：使用'currentTime'并将其格式化，然后将其附加到'＃status'。 –

感谢您的回复@Louys Patrice Bessette。你能帮我一点吗？ –

我会回答不仅仅是一次来到这里的格式多一点。
很明显，您希望使用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); 
}

来源

2017-09-26 16:32:53

jQuery的 - Rangeslider时间更新

回答

相关问题