Create voice visualizer in react

Learn how to create voice visualizer in react.

Voice visualizer is used to represent the volume of the user while he is speaking. The most common scenario where you will be using this component is for testing your microphone.

We will be creating a similar component which will use three ticks to represent the volume of the user speech.

To make our development little comfortable we are going to use few extra packages.

• prop-types: To validate the props we will receive.
• classnames: Helps us to use CSS classes as javascript objects, we just need to name our CSS file as filename.module.css.

Following is the folder structure of our app.

Let us begin creating our component by importing all the required packages at the top.

import React from "react";
import styles from "./index.module.css";
import PropTypes from "prop-types";

const VoiceVisualizer = () => {
  //other code will go here
}

export default VoiceVisualizer;

This is a functional component because we want the parent to have control over it. There is only one thing that we are expecting and that is the level of the speech volume.

Because all the API’s of services like AGORA.IO, ZOOM, Hangouts etc provide the volume level between the range of 0 to 1.

Validate the props and set the default in case the required props are not passed.

VoiceVisualizer.propTypes = {
  level: PropTypes.number.isRequired
};

VoiceVisualizer.defaultProps = {
  level: 1
};

Now we will be creating the layout of component. It is going to be extremely simple and there is going to be three bar indicators which will show the volume range.

return (
    <div className={styles.wrapper}>
      <span style={{ height: `${siblingHeight}%` }}></span>
      <span style={{ height: `${height}%` }}></span>
      <span style={{ height: `${siblingHeight}%` }}></span>
    </div>
  );

The height will be calculated based on the value of level we have received in the prop.

Here I am assuming the level of volume will be in the range of 1 to 10 and we will be multiplying it by 10 to get the height in the percentage.

level = level > 10 ? 9 : level;
const height = level * 10;

Also we will keep the first and last bar a little smaller than the middle bar to make it more iteractive.

const siblingHeight = height * 0.7;

You can generate a random number and use it to set the sibling heights. This will make the visualizer as little more iteractive.

const randomNumber = Math.random();
const siblingHeight = height * randomNumber;

Complete code of voice visualizer in react.

import React from "react";
import styles from "./index.module.css";
import PropTypes from "prop-types";

const VoiceVisualizer = ({ level }) => {
  level = level > 10 ? 9 : level;
  const height = level * 10;
  //const randomNumber = Math.random();
  const siblingHeight = height * 0.7;

  return (
    <div className={styles.wrapper}>
      <span style={{ height: `${siblingHeight}%` }}></span>
      <span style={{ height: `${height}%` }}></span>
      <span style={{ height: `${siblingHeight}%` }}></span>
    </div>
  );
};

VoiceVisualizer.propTypes = {
  level: PropTypes.number.isRequired
};

VoiceVisualizer.defaultProps = {
  level: 1
};

export default VoiceVisualizer;

Complete style code of voice visualizer in react.

We have kept the style very simple.

Keeping all the bars inside a wrapper so that it can be contained.

//index.module.css
.wrapper {
  width: 30px;
  height: 50px;
  position: relative;
  text-align: center;
  line-height: 50px;
}

.wrapper > span {
  display: inline-block;
  width: 10px;
  height: 10%;
  background: green;
  border-radius: 20%;
  transition: height 0.05s ease-in-out;
  margin: 0 2px;
  vertical-align: bottom;
}

---

Input

We are generating a random number between 1 to 10 after a given interval to mock the voice visualizer.

import React, { Component } from "react";
import VoiceVisualizer from "./index";

class VoiceVisualizerTest extends Component {
  state = {
    level: 1
  };

  componentDidMount = () => {
    this.interval = setInterval(() => {
      const randomNumber = Math.floor(Math.random() * 10);
      this.setState({ level: randomNumber });
    }, 100);
  };

  componentWillUnmount = () => {
    clearInterval(this.interval);
  };

  render() {
    const { level } = this.state;
    return <VoiceVisualizer level={level} />;
  }
}

export default VoiceVisualizerTest;

Output