ReactVisualAudioRecorder

A simple audio recorder compatible with a large part of the browsers.

ReactVisualAudioRecorder component

This component has been designed to render a sound wave when recording audio. The recording control functions are done via the ref of the component and the recording via the onData props for controlled and continuous recording or via the onChange props for data recording during breaks (pause/stop).

API Reference

ReactVisualAudioRecorder component props

None of the props are required

| Parameter | Type | Default | Description | | :------------------- | :----------------------------------------------------------------- | :------------------------- | :------------------------------------------------------------------------------------------------ | | width | number | 640 | Width of the canvas. | | height | number | 100 | Height of the canvas. | | onStart | (MediaRecorder, AudioContext, MediaStream, AnalyserNode) => void | | Called when the recording is started | | onStop | (BlobObject) => void | | Called when the recording is stopped. | | onChange | (BlobObject) => void | | Called when the recording is stopped or paused. | | onData | (blob: Blob) => void; | | Called during the recording. Sending all chunks as blob during the recording. | | handleStatus | (status: "pause" "recording" "stopped") => void | | Function that handle status of the recording instance. | | noVisualisation | boolean | false | Show visualisation canvas. | | showOnlyOnRecord | boolean | false | Show visualisation only if microphone is recording. | | audioBitsPerSecond | number | 128000 | Quality of the recording in bytes/second. | | echoCancellation | boolean | true | Reduces the echo of the recording. | | autoGainControl | boolean | true | Control circuit in an amplifier or a chain of amplifiers. | | noiseSuppression | boolean | true | Suppresses background noise of the recording. | | channelCount | number | 2 | Number of channels recorded. Default is left/right for a stereo recording. | | frequencySize | number | 512 | Sine wave spacing. | | mimeType | string | Depend of browser | https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#audio_and_video_types | | backgroundColor | string | rgba(255, 255, 255, 0.5) | BackgroundColor of the curve. | | strokeColor | string | #000000 | Color of the curve. | | className |string | | | |ref |(ref: ForwardedRef) => void | | Refs of the internal component functions. Setted withuseImperativeHandle`. |

ReactVisualAudioRecorderRefHandler

| function | Type | Description | | :--------------- | :----------- | :--------------------------------------------- | | start | () => void | Start recording. | | stop | () => void | Stop recording. | | reset | () => void | Reset recording. | | pause | () => void | Pause recording. | | resume | () => void | Resume recording. | | getFileExtension | () => string | Return the correct extension for the mimeType, |

Usage/Examples

import React, { useRef, useState } from "react";
import ReactVisualAudioRecorder from "react-visual-audio-recorder";
import type {
  ReactVisualAudioRecorderRefHandler,
  ReactVisualAudioRecorderBlobObject,
} from "react-visual-audio-recorder";

const visualizerWidth = 300;
const visualizerHeight = 70;

export default function App() {
  const [url, setUrl] = useState<string | null>(null);
  const [status, setStatus] = useState<"pause" | "recording" | "stopped">("stopped");

  const audioRecorder = useRef<ReactVisualAudioRecorderRefHandler | null>(null);

  function toggleRecording() {
    if (status === "stopped") audioRecorder.current?.start();
    else if (status === "pause") audioRecorder.current?.resume();
    else if (status === "recording") audioRecorder.current?.pause();
  }

  function onChange(blobObject: ReactVisualAudioRecorderBlobObject) {
    if (!blobObject) return;
    setUrl(blobObject.blobURL);
  }

  function reset() {
    audioRecorder.current?.reset();
    setUrl(null);
  }

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <div style={{ width: visualizerWidth, height: visualizerHeight }}>
        <ReactVisualAudioRecorder
          ref={audioRecorder}
          width={visualizerWidth}
          height={visualizerHeight}
          onChange={onChange}
          handleStatus={setStatus}
        />
      </div>
      <div>
        <button onClick={toggleRecording}>
          {status === "stopped" ? "Start recording" : status === "pause" ? "Resume" : "Pause"}
        </button>
        <button onClick={() => reset()} disabled={!url || status === "recording"}>
          Reset
        </button>
        {url ? (
          <a href={url} download={`file.${audioRecorder.current?.getFileExtension() || "ogg"}`}>
            <button>Download</button>
          </a>
        ) : null}
      </div>
      {url ? <audio src={url || ""} controls={true} /> : null}
    </div>
  );
}

License

MIT