React Wave generator for browser mic
npm install react-mic-waverIt detects the user voice and renders a oscillating wave.
It provides the wave component and also a simple MediaStream context for simple usage.
npm
``sh`
npm install --save react-mic-waver
yarn
`sh`
yarn add react-mic-waver
The MediaStreamProvider and also the useMediaStream hook come with the AudioVisualiser default export as a little controller that works out of the box if you don't need a complex custom implementation of the stream context. The stream generated is passed as a parameter to the AudioVisualiser component to generate the analyzer over it and render the wave.
#### Wrapper Element
`tsx
...
import {
MediaStreamProvider,
} from "react-mic-waver"
...
...
`
#### Component
`tsx
...
import AudioVisualiser, { useMediaStream } from "react-mic-waver";
...
export const Component = () => {
...
const { stream, start, stop } = useMediaStream();
const toggleMic = () => stream ? stop() : start()
...
return (
...
``
| Props | Type | Default | Description |
|:---------:|:-------------:|:-------:|:----------------------------------------------:|
| stream | MediaStream | - | stream to analyze |
| color | string | "black" | color of the rendered wave |
| width | number/string | "auto" | width of the wave canvas |
| height | number/string | "auto" | height of the wave canvas |
| lineWidth | number | 2 | width of the rendered wave |
| onRender | () => void | - | callback that fires when wave is rendered |
| style | CSSProperties | - | extra styles applied to the canvas of the wave |