mattvick / use-voice-recorder

React hook for use MediaRecorder

React hook for recording users' audio.

This project is using MediaRecorder as its underhood.

How to use

See full example in /example folder

First you need to call hook with a callback function. This callback gets Blob with a recorded audio after recording was stopped.

Hook provide 3 methods:

• isRecording – status of recording user media
• start – call when you want to start recording
• stop – call when you want to stop recording

const Recorder: React.FC<{
  onRecorded: (data: Blob) => void
}> = ({onRecorded}) => {
  const {isRecording, stop, start} = useVoiceRecorder(onRecorded);
  return (
    <div>
      <div>
        On air: {isRecording ? 'on' : 'off'}
      </div>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
    </div>
  )
};

Audio is stored as Blob format, so if you want to play a record you may create link with window.URL.createObjectURL(blobAudio).

const Player: React.FC<{
  audioBlob: Blob
}> = ({audioBlob}) => {
  const link = window.URL.createObjectURL(audioBlob)
  return <audio src={link} controls />
};

Full example:

import * as React from "react";
import { useVoiceRecorder } from "use-voice-recorder";
import { useState } from "react";

export const App: React.FC = () => {
  const [records, updateRecords] = useState([]);
  const {isRecording, stop, start} = useVoiceRecorder((data) => {
    updateRecords([...records, window.URL.createObjectURL(data)]);
  });
  return (
    <div>
      <h1>Voices:</h1>
      <div>
        <h3>On air: {isRecording ? 'on' : 'off'}</h3>
        <button onClick={start}>Start</button>
        <button onClick={stop}>Stop</button>
      </div>
      <div>
        <h1>Records:</h1>
        {records.map((data, idx) => (
          <div key={idx}>
            <audio src={data} controls preload={'metadata'} />
          </div>
        ))}
      </div>
    </div>
  )
};

ATTENTION

This hook is using MediaRecorder API, so you need to check the browser compatibility before useing it: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API

Also, there are different browsers that provide different codecs and audio formats. Be careful about this. You can check supported codecs with this method MediaRecorder.isTypeSupported

If you want to polyfill MediaRecorder, you can use Evil Martians Solution.