<audio> 및 <progress> HTML5 요소에 대한 사용자 정의 진행률 막대

Question

태그와 간단한 자바 스크립트를 사용하여 오디오 플레이어에 대한 사용자 정의 검색 모음을 만드는 방법을 알아 내려고합니다.

현재 코드 :

<script> 
    function play() { 
    document.getElementById('player').play(); 
    } 

    function pause() { 
    document.getElementById('player').pause(); 
    } 
</script> 


<audio src="sample.mp3" id="player"></audio> 
<button onClick="javascript:play()" >Play</button> 
<button onClick="javascript:pause()" >Pause</button> 
<progress id="seekbar"></progress> 

가 내가 진행 상황이 표시됩니다 노래를 재생할 때 있도록 진행 표시 줄을 연결 할 수 있을까요?

Answer 1

예, 오디오 태그의 timeupdate 이벤트를 사용할 수 있습니다. 재생 위치가 업데이트 될 때마다이 이벤트가 수신됩니다. 그런 다음 오디오 요소의 currentTime 및 duration 속성을 사용하여 진행률 표시 줄을 업데이트 할 수 있습니다.

당신은 당신이 원활하게 진행 표시 줄을 원하는 경우에,이 fiddle

Answer 2

우선, progress 요소를 사용하지 마십시오. 지금은 엿 같은 요소이고 스타일링에 큰 고통이 있습니다. 음, 지루합니다. (제가 만든 약간의 프로젝트를보십시오. look at it (및 그것은 juste webkit/moz)).

어쨌든, MDN에 문서를 읽어야한다, 그것은 매우 간단하고 많은 예제와 함께합니다. 당신이 찾고있는 것은 작은 조각 여기 currentTime 속성입니다 :

var audio = document.querySelector('#player') 
audio.currentTime = 60 // will go to the 60th second 

그래서 당신은 교차 곱셈을 (div하면 진행률 표시 줄로 사용하는 요소)를 사용하는 것입니다 필요 : 내가 클릭 에 div | 시간은 내가 알고 싶은
----------------------------------------
총 길이는 div | 내 비디오/오디오의 총 시간 (audio.seekable.end())

Answer 3

에서 작동 예를 보려면 그

HTML처럼 somethink 시도 할 수 있습니다 :

<div class="hp_slide"> 
    <div class="hp_range"></div> 
</div> 

CSS :

.hp_slide{ 
    width:100%; 
    background:white; 
    height:25px; 
} 
.hp_range{ 
    width:0; 
    background:black; 
    height:25px; 
} 

JS :

,

var player = document.getElementById('player');  
player.addEventListener("timeupdate", function() { 
    var currentTime = player.currentTime; 
    var duration = player.duration; 
    $('.hp_range').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear'); 
}); 

꽤 거친하지만`의 onclick = 같은