use-record-mp3

React hook for recording MP3s

Usage no npm install needed!

<script type="module">
  import useRecordMp3 from 'https://cdn.skypack.dev/use-record-mp3';
</script>

README

use-record-mp3

Record MP3s in React using hooks

Install

npm i use-record-mp3

Usage

import useUserMedia from "react-use-user-media";
import useRecordMp3 from "use-record-mp3";

const constraints = { audio: true };

const Example = () => {
  const { stream } = useUserMedia(constraints);
  const {
    isRecording,
    startRecording,
    stopRecording,
    blobUrl,
    channelData,
  } = useRecordMp3(stream, {
    vbrQuality: 2, // 1 (highest) to 9 (lowest)
  });

  return (
    <div>
      <button onClick={isRecording ? stopRecording : startRecording}>
        {isRecording ? "Stop" : "Record"}
      </button>
      {blobUrl && <audio controls src={blobUrl}></audio>}
    </div>
  );
};

Instead of vbrQuality you can specify bitrate (e.g. 96, 128).

Heads up

  • AirPods don't work. Pull requests accepted.

License

MIT © aaronshaf