Custom progress bar for

Question

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?

HTML5 and stuff like `onClick="javascript:play()"` is an atrocious pairing. — MaxArt, Sep 07 '12 at 08:22

score 38 · Accepted Answer · edited Sep 23 '17 at 18:08

38

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

edited Sep 23 '17 at 18:08

Mona Lisa

193
1
12

answered Sep 07 '12 at 08:58

jbalsas

3,484
22
25

Is it possible to have this code as regular javascript rather than JQuery? – Zach Boyd McTague Sep 07 '12 at 09:18
3

It now checks every 250ms for the new time. Is it possible to do this a little faster so the bar fills more smoothly? – Luc Apr 05 '15 at 17:35
Btw, this is one of the 1000s of reasons not to link to W3fools.com, that link is dead. – Valentin Klinghammer May 12 '15 at 12:13
2

@ValentinKlinghammer I've updated the link to point to the mediaevents mdn page instead. – jbalsas May 12 '15 at 15:21
@Luc Check out `Vladislav Filonov` answer below. – PepsiGam3r Sep 04 '16 at 00:22
when i am using the `timeupdate` the audio is playing but lagging ??? what is the solution ? – void Aug 21 '20 at 09:40

score 13 · Answer 2 · answered Nov 19 '15 at 11:30

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

ggorlen · Answer 3 · 2022-01-09T15:16:58.187

Here's a simple vanilla example:

const url = "https://upload.wikimedia.org/wikipedia/en/a/a9/Webern_-_Sehr_langsam.ogg";
const audio = new Audio(url);
const playBtn = document.querySelector("button");
const progressEl = document.querySelector('input[type="range"]');
let mouseDownOnSlider = false;

audio.addEventListener("loadeddata", () => {
  progressEl.value = 0;
});
audio.addEventListener("timeupdate", () => {
  if (!mouseDownOnSlider) {
    progressEl.value = audio.currentTime / audio.duration * 100;
  }
});
audio.addEventListener("ended", () => {
  playBtn.textContent = "▶️";
});

playBtn.addEventListener("click", () => {
  audio.paused ? audio.play() : audio.pause();
  playBtn.textContent = audio.paused ? "▶️" : "⏸️";
});

progressEl.addEventListener("change", () => {
  const pct = progressEl.value / 100;
  audio.currentTime = (audio.duration || 0) * pct;
});
progressEl.addEventListener("mousedown", () => {
  mouseDownOnSlider = true;
});
progressEl.addEventListener("mouseup", () => {
  mouseDownOnSlider = false;
});

button {
  font-size: 1.5em;
}

<button>▶️</button>
<input type="range" value="0" min="0" max="100" step="1">

The approach is to use an input[type="range"] slider to reflect the progress and allow the user to seek through the track. When the range changes, set the audio.currentTime attribute, using the slider as a percent (you could also adjust the max attribute of the slider to match the audio.duration).

In the other direction, I update the slider's progress on timeupdate event firing.

One corner case is that if the user scrolls around with their mouse down on the slider, the timeupdate event will keep firing, causing the progress to hop around between wherever the user's cursor is hovering and the current audio progress. I use a boolean and the mousedown/mouseup events on the slider to prevent this from happening.

See also JavaScript - HTML5 Audio / custom player's seekbar and current time for an extension of this code that displays the time.

score 1 · Answer 4 · answered Sep 07 '12 at 08:42

First of all, don't use the progress element, it's a shitty element (for now) and styling it is a huge pain in... well it's boring (look at a little project I made, look at it (and it's juste webkit/moz)).

Anyway, you should read the doc on MDN, it's very easy and with a lot of examples. What you are looking for is the currentTime attribute, here a little snippet :

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

So what you need is to use the cross-multiplication (div is the element you use as a progress bar) : Where I clicked on div | THE TIME I WANT TO KNOW
————————————————————————————————————————
Total length of div | The total time of my video/audio (audio.seekable.end())

Custom progress bar for

4 Answers4

Linked

Custom progress bar for and HTML5 elements

4 Answers4

Linked

Custom progress bar for