How do I change my download band based on the duration of the audio?

Question

I salute everyone.I want to make my audio player.Changing volume is not a problem.

But here's to make the music download band show the current status can not.

I did an imitation of the audio start button- it's square and the music starts.

Then I placed a rectangle inside which has a line that should be the width of the audio duration.

That's what I can't do.

in the example there is an audio tag, it is hidden, it is it I run

How to make the width of the line depending on the duration of the music?

my attempt

 rect.onclick = function() { audio.play(); rect.style.display = "none"; circle.style.display = "block"; } circle.onclick = function() { rect.style.display = "block"; circle.style.display = "none"; audio.pause(); audio.currentTime = 0; } line.width = audio.timeupdate + "%"

 #audio { display: none; } #rect { width: 50px; height: 50px; background: red; } #circle { width: 50px; height: 50px; border-radius: 50%; background: green; display: none; } #progress { width: 250px; height: 30px; border: 1px solid #000; padding: 0; } #line { width: 1px; height: inherit; background: #000; margin: 0; }

 <audio id="audio" controls> <source src="https://sefon.pro/api/mp3_download/direct/149166/3vUCANmBX7mfWhZQzAC2W2bci3su76uyLlxX4Jsj8Fd4OK2bsVkfkZ7QbcVKyeJelmfE8631OxZYGzJvTsVm22lgsfJIaPpWDFRJx6OOq3snoWQvOrbt0yUx8buTt_Sl5ioUlnJdMfJVcK8M-7dZGTN1PIe2q6MvG8_MiQAJ/"/> </audio> <div id="rect"></div> <div id="circle"></div> <div id="progress"> <div id="line"></div> </div>

Answer 1

I suggest You to research little: How to change progress bar in loop?

Solution for Your needs:

1. Add function that checks every 10 ms what is audio.currentTime and set progress bar position to it in % (track position *100 / track lenght)