0

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>
MaximLensky
  • 256
  • 3
  • 14

1 Answers1

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)
Jakub Ujvvary
  • 421
  • 4
  • 13