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時間更新

回答

相關問題