React-mic-visualizer NPM

react-mic-visualizer

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

react react component react mic visualizer react audio visualizer mic animation mic visualizer

@everything-registry/sub-chunk-2567

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago