react-mic-visualizer

React mic/audio visualizer component.

Usage

npm i react-mic-visualizer

Basic example

import { BarVisualizer } from 'react-mic-visualizer';

const [stream, setStream] = useState<MediaStream | null>(null);

useEffect(() => {
  navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
    setStream(stream);
  });
}, []);

return stream ? <BarVisualizer stream={stream} /> : null;

Props

Prop	Description	Default	Required
stream	MediaStream	-	Yes
size	Size of the visualizer	25	No
circle	Whether to use circle visualizer	true	No
addTransparency	Pass this prop to make the visualizer transparent. Adds 0.75 opacity.	false	No
padding	If provided it will be used instead of the default value, which gets calculated like this ${(32 / 100) * WIDTH}px	-	No
borderRadius	Only works if circle is false	-	No
bgColor	Background color	#f3f4f6	No
barBgColor	Bar background color	#D1D5DB	No
barColor	Bar color	#16a34a	No

Play and test

npm run storybook