0

At first look at my image which I am uploaded. mic frequency catch Bar

I want to do this with HTML and JS. I am trying in many ways, but don't do this. when my mic value is increased my progress bar also increase with the different color. like my uploaded image.

Julian
  • 33,915
  • 22
  • 119
  • 174
Tonmoy Rudra
  • 5
  • 3
  • 1
    Possible duplicate of [How to get microphone input volume value with web audio api?](http://stackoverflow.com/questions/21247571/how-to-get-microphone-input-volume-value-with-web-audio-api) – Yogu Apr 19 '17 at 10:49
  • no, i don't need to get microphone data, i need only UI design. – Tonmoy Rudra Apr 19 '17 at 11:05
  • Then don't state "when my mic value is increased my progress bar also increase" in your question ;) An idea would be to use an image of the whole progress bar and crop it horizontally to just the part that should be shown. – Yogu Apr 20 '17 at 07:25

1 Answers1

0

This is quite an answer to your problem but your job to do the analogy. First, see bootstrap progress bar and how to manipulate it here: https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp

Now, you can connect it to your case to do so go here

Oussama Ben Ghorbel
  • 2,132
  • 4
  • 17
  • 34
  • ok. but i want to design my progress bar like this.. in every progress bar have only one color.. but there are in 3-4 color with vertical view. how can i do this. :( – Tonmoy Rudra Apr 19 '17 at 11:03