Reactjs: How To Create A Audio Volume Meter

I need some suggestion to create a volume meter bar . I am using reactjs with material ui. I have a basic implmentation with LinearProgress. Now I want to upgrade this one with a n

Solution 1:

I'm not really fluent in react but this should point you into the right direction. If this isn't the "react way" to do it, I'm open to any suggestions.

https://stackblitz.com/edit/react-vg2j4b?file=src/App.js

The basic idea is that you have a certain amount of divs representing the bars. Each bar is colored gray at the beginning. When you have a volume (example 80 = 80% Volume) you iterate over each bar and check if the current iteration i is bigger than the volume divided by (100 / amount of bars). In my example this is 100 / 5 = 20 because there are 5 bars. If the condition is true add another class which colors the divs green. If you got any questions feel free to ask them.

Solution 2:

One option would be to use one of Material UI's premium themes. Pretty sure some of them have what you are looking for. You can find them here.