React.js:如何创建音频音量计 [英] Reactjs: How to create a audio volume meter

问题描述

我需要一些建议来创建音量计栏.我正在使用带有材质ui的reactjs.我有 LinearProgress 的基本实现.现在，我想用一种新的设计来升级它.我们如何使用 Material-ui 来做到这一点.任何建议对我朝正确的方向都会有所帮助.

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 new design. How can we do this with Material-ui. Any suggestion would be helpful for me for a right direction.

基本代码

class AudioProgress extends Component {
  render() {
    const { classes } = this.props;
    return (
        <LinearProgress variant="determinate" value={10} className="audio-meter"/>
     );
  }
}

export default  withStyles(styles)(AudioProgress);

更新将html添加到以进度栏开始.现在我想提出建议，我该如何相应地更新/更改颜色的html更新.请进一步提出建议.

UPDATE Added html to started with progress bar. Now i want suggestion how can I update/chaneg accordingly for html update with color. Any further suggestion please.

入门代码

render() {
    const value = 20;
    return (

          <div class="container">
            <div class="progress-segment">
              <div class="item "></div>
              <div class="item "></div>
              <div class="item "></div>
              <div class="item "></div>
              <div class="item"></div>
              <div class="item "></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item "></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>

            </div>
          </div>
          
     );
  }

设计

新设计

推荐答案

我的反应并不十分流利，但这应该为您指明了正确的方向.如果这不是反应方式"，则返回否".为此，我欢迎任何建议.

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

基本思想是，您有一定数量的div代表小节.每个栏的开头都是灰色.当您有一个体积(例如80 = 80％体积)时，您遍历每个柱，并检查当前迭代i是否大于体积除以(100/柱的数量).在我的示例中，这是100/5 = 20，因为有5条.如果条件为true，则添加另一个类，将div着色为绿色.如果您有任何疑问，请随时提问.

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.

这篇关于React.js:如何创建音频音量计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！