React Volume Indicator

Get your mic's volume (via webRTC) in normalized 0-100 range!

react-volume-indicator

Install

npm install react-volume-indicator

Usage

1. useVolumeLevel hook

  const [startRecording, stopRecording, volume] = useVolumeLevel();

• startRecording : Function called to start mic's recording; after calling this function value of volume will start changing
• stopRecording : Function called to stop mic's recording; after calling this function value of volume will remain 0
• volume : The value of mic's input volume in a 0-100 range, changing every 50ms

2. VolumeIndicator component

 <VolumeIndicator backgroundColor="blue" indicatorColor="grey" volume={volume} />

• backgroundColor : Color of the container's background

• indicatorColor : Color of the volume value display within the container

• volume : A state variable between 0-100 that determines its value (similar to progress % in a progress bar)

Together they can be used like this -

import {useVolumeLevel, VolumeIndicator} from 'react-volume-indicator'

function App() {
 const [startRecording, stopRecording, volume] = useVolumeLevel();
   return (
     <div>
       <div style={{margin: 10}}>
      <VolumeIndicator backgroundColor="blue" indicatorColor="grey" volume={volume} />
      </div>
      <button onClick={startRecording} style={{backgroundColor: 'red', padding: 10, margin: 10}}>
       Record
      </button>
      <button onClick={stopRecording} style={{backgroundColor: 'green', padding: 10, }}>
       Stop
      </button>
     </div>
   );
}

export default App;

Looking forward to pushing improvements iteratively and make it better!