use-audio-capture

A React hook for audio recording using the Web APIs. It provides functionality for starting, stopping, pausing, and resuming recordings, with customizable callback events.

Features

• 🧠 Intuitive API
• 🎣 Customizable Callbacks: Easily react to various recording events such as starting, stopping, pausing, and data chunk availability.
• 🚫 Error Handling: Built-in error events to handle and manage recording issues.
• ⏸️ Pause and Resume: Not just start and stop! Pause your recordings and resume right where you left off.
• 🎙️ Data Chunk Access: Access raw audio data chunks as the recording progresses, allowing for advanced use-cases.
• 🕊️ No External Dependencies: Built with native Web APIs, ensuring a lightweight package with no extra dependencies.

Installation

npm install use-audio-capture

Getting Started

Basic usage - See live example

import { useAudioCapture } from 'use-audio-capture';

export const AudioRecorder: React.FC<AudioRecorderProps> = () => {
  const { start, stop, pause, resume } = useAudioCapture({
    onStart: () => {
      console.log('Recording started.');
    },
    onStop: (_e, chunks) => {
      const blob = new Blob(chunks, { type: chunks[0].type });
      const file = new File([blob], 'sampleFile.webm', {
        type: chunks[0].type,
      });
      console.log(file);
    },
  });

  return (
    <div>
      <button onClick={start}>Start Recording</button>
      <button onClick={stop}>Stop Recording</button>
      <button onClick={pause}>Pause Recording</button>
      <button onClick={resume}>Resume Recording</button>
    </div>
  );
};

Link to storybook

Functions returned by useAudioCapture

| Function Name | Description | Parameters | Returns | |---------------|---------------------------------------------------|--------------------------------|---------------| | start | Starts the audio recording. | None | void | | stop | Stops the audio recording. | None | void | | pause | Pauses the current recording session. | None | void | | resume | Resumes a paused recording session. | None | void |

Available Callbacks and Their Properties

| Callback | Description | Properties Received | |----------------|-------------------------------------------------|---------------------------------------------| | onStart | Called when recording starts. | event, { mediaStream } | | onChunk | Called when a data chunk is available. | blobEvent, { mediaStream } | | onStop | Called when recording stops. | event, chunks, { mediaStream } | | onPause | Called when recording is paused. | event, chunks, { mediaStream } | | onResume | Called when recording is resumed after pausing. | event, chunks, { mediaStream } | | onError | Called when an error occurs during recording. | event, { mediaStream, error } |

AudioRecorder component

Component example built based on use-audio-capture hook - See live example

License

MIT