Custom audio progress bar

Elements Audio & Video
1

Hello,

I’m creating a podcast player and I want to make a progress bar for the mp3 file. How can I do that?

Thanks.

2

You would create an rectangle element and style it.

Then use javascript to increase the width using a value calculated by combining the duration and current time of the audio.

//audio is a variable created by setting the ID of the HTML5 audio tag
if (audio.currentTime > 0) {
      value = Math.floor((100 / audio.duration) * audio.currentTime);
   }
   *your-element*.style.width = value + "%";

D

3 Likes
3

Thanks!!

1 Like
4

Where must be placed the javascript, in the play button?

5

Hi Jose

This download is a symbol you can import into your project (Symbol->Import Symbol…)

Also inside is the audio file I used but you can change the reference to whatever file you have.

Just use this symbol as an example and take the code and place it in your project (on scene load).

D

progressBar.zip (234.5 KB)

1 Like
6

Thanks again for you quick and kind answer.

1 Like
7

Is there any way to get the progress bar to be reacting to the mouse click, so you can go to a specific time of the audio?

Many thanks for sharing this tip!

Pablo

8

You can use a click and drag motion on where the time is (use on drag action) and update the currenttime on release of the drag.

Here is a document for you to look at. It shows some functionality of dragging a progress bar that “seeks” the audio and plays when you let go from the point at which you release.

basicAudioProgressBar.zip (236.7 KB)

1 Like