Skip to content

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

Notifications You must be signed in to change notification settings

nikhil-sachdeva/react-volume-indicator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
  1. VolumeIndicator component

Screenshot 2022-09-20 at 10 16 42 PM

 <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!

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published