jQuery를 - Rangeslider 시간 업데이트

Question

내 문제는 다음
나는 좋은 작은 바이올린을 발견 here * (데모 rangeslider.js을 사용), 그리고 난 초로 percentange 측정을 변경하려면 (형식이 있습니다 00:00) .
누군가 나를 도울 수 있습니까?

$("#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(); 
}); 

고마워요!

는 * 그럼 내가 여기에 서식 단지 시간보다 좀 더 대답한다

Answer 1

alan0xd7 @ 다.
RangeSlider를 사용하여 사용자 지정 오디오 컨트롤을 사용하고자하는 것은 분명합니다.

표시된 시간을 변경해야 할 필요를 트리거 이벤트에 따라 슬라이더 위치를 곱한 currentTime또는duration을 사용해야합니다.

사용중인 두 이벤트는 오디오 요소가 재생 될 때 timeupdate입니다. 그리고 사용자가 슬라이더를 움직일 때 input 이벤트가 발생합니다.

시간 계산시 십진수를 제거하려면 JavaScript Math.floor() 함수가 필요합니다. 초를 올바르게 표시하려면 "모듈러스"연산자를 사용해야합니다. I already explained the use of modulo here.

마지막으로 오디오가 재생되면 슬라이더가 경과 된 시간에 따라 적절히 움직이기를 바랍니다. 함수가 그 세 부분을 할 수 있도록

는

: 사용자가

어떤 오디오는

을 재생할 때에에 그리고 모든 경우에 슬라이더를 이동할 때해야 할 일

1. , 표시되는 시간을 업데이트 .

그래서 여기에 사용자의 기능이 있습니다 ... 모든 콘솔 로그를 제거했지만이 내용은이 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); 
}