백분율 값을 사용하여 진행률 막대를 업데이트 하시겠습니까?

Question

반응 형으로 제작 된 맞춤식 플레이어를 만들었습니다. 지금까지는 사용자가 진행 막대를 클릭 한 지점에서 오디오를 재생할 수없는 것 외에는 모든 것이 잘 작동합니다. 내 플레이어가 백분율을 사용하는 반면에이 튜토리얼의 모든 사용법은 픽셀 값을 사용하므로 코드가 깨지고 barSize = 100 + '%';을 설정하면 "currentTime 속성을 설정하지 못했습니다. 제공된 오류 메시지가 표시되지 않습니다. -한정된".

HTML

<!-- PROGRESS BAR --> 
<div id="progress_bar"> 
    <div id="bar"></div> 
</div> 

JS 코드

// PROGRESS BAR 

// audio display 
var progress = document.getElementById('bar'); 
//click area 
var audioBar = document.getElementById('progress_bar'); 
var barSize = 100 + '%'; 

audio.addEventListener('timeupdate', updateProgress, false); 


function updateProgress() { 
    if (audio.currentTime > 0) { 
     var value = 0; 
     value = Math.floor((100/audio.duration) * audio.currentTime); 

     progress.style.width = value + '%'; 
    }  
    else{ 
     $('#play').html('<img src="img/play.png" width="70" height="70" />'); 

     $(curTimeDisplay).html('0:00'); 

     progress.style.width = 0; 
    } 

} 

// CHANGING TIME ON PROGRESS BAR 

$('#progress_bar').bind('click', function (e) { 
    var $div = $(e.target); 
    var $display = $div.find('#progress_bar'); 

    var offset = $div.offset(); 
    var x = e.clientX - offset.left; 

    //$('#bar').width(x); 

    var newtime = x*audio.duration/barSize; 

    audio.currentTime = newtime; 

    progress.style.width = x + '%'; 
}); 

CSS

(진행률 막대)

#progress_bar { 
border:1px solid #500012; 
margin:1em 0; 
cursor:pointer; 
background:#f2f2f2; 
width:100%; 
height:20px; 
display:inline-block; 
padding:0; 
} 

#bar { 
background:#77001A; 
height:20px; 
display:inline-block; 
float:left; 
width:0%; 
} 

어떤 도움에 감사드립니다 :) 감사합니다!

Answer 1

단서는 오류 메시지에 있습니다. 그것은 double 값을 원하고 barSize var은 초기화 할 때 문자열로 계산됩니다. 이것은 어떤 숫자에 + '%'를 추가 할 때 발생합니다. 자바 스크립트는 수치에서 문자열 값으로 변경합니다. 문자열에 대해 수학 연산을 수행하면 'NaN'이됩니다.

그러나이 경우 클릭이 발생한 위치에 비례하여 미디어를 전진 시키려면 barSize를 전체 막대 영역의 픽셀 너비로 바꿉니다. $ ('# progress_bar') 너비가 필요하다. 당신은 아마

브라우저에서 콘솔 및 디버깅 도구를 알아

var newtime = (x/$('#progress_bar').width()) * audio.duration; 

으로

var newtime = x*audio.duration/barSize; 

를 교체 ...과 같이 주위 식의 피연산자를 이동할 것입니다. 중단 점과 시계를 추가하면 이와 같은 코드를 사용하는 것이 좋습니다.