Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom progress bar for <audio> and <progress> HTML5 elements

Tags:

I am mind boggled at working out how to create a custom seekbar for an audio player using the tag and simple Javascript.

Current Code:

    <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> 

Would it be possible to link the progress bar so that when i play a song the progress is shown?

like image 277
Zach Boyd McTague Avatar asked Sep 07 '12 08:09

Zach Boyd McTague


2 Answers

Yes, it is possible using the timeupdate event of the audio tag. You receive this event every time the position of the playback is updated. Then, you can update your progress bar using the currentTime and duration properties of the audio element.

You can see a working example in this fiddle

like image 72
jbalsas Avatar answered Jan 08 '23 11:01

jbalsas


If you want smooth progress bar,try somethink like that

HTML:

<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'); }); 

Pretty rough,but works

like image 45
Vladislav Filonov Avatar answered Jan 08 '23 13:01

Vladislav Filonov