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 |