1.0.0 • Published 2 years ago
react-mic-waver v1.0.0
About
It detects the user voice and renders a oscillating wave. It provides the wave component and also a simple MediaStream context for simple usage.
Instalation
npm
npm install --save react-mic-waver
yarn
yarn add react-mic-waver
Example
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
...
import {
MediaStreamProvider,
} from "react-mic-waver"
...
<MediaStreamProvider video={false} audio={true}>
<Component />
</MediaStreamProvider>
...
Component
...
import AudioVisualiser, { useMediaStream } from "react-mic-waver";
...
export const Component = () => {
...
const { stream, start, stop } = useMediaStream();
const toggleMic = () => stream ? stop() : start()
...
return (
...
<div style={{width: "300px", height: "200px", background: "#fff"}}>
<button className="App-btn" onClick={toggleMic}>
{stream ? 'Close Microphone' : "Open Microphone"}
</button>
<AudioVisualiser stream={stream} onRender={() => console.log("Render!")} style={{background: "red"}}/>
</div>
...
);
};
Props
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 |