react-mic-visualizer
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

react-mic-visualizer


example

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

storybook

Package Sidebar

Install

npm i react-mic-visualizer

Weekly Downloads

4

Version

1.0.2

License

MIT

Unpacked Size

4.96 kB

Total Files

4

Last publish

Collaborators

  • dstamenkovic