Skip to content

An audio recording helper for React. Provides a component to help with audio recording.

Notifications You must be signed in to change notification settings

M-ZENHOM/React-Sound-Recorder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-sound-recorder

An audio recording helper for React. Provides a component to help with audio recording.

NPM downloads

Installation

npm install react-sound-recorder
yarn add react-sound-recorder

Usage

AudioRecorder Component (See it in action)

You can use an out-of-the-box component that takes onRecordingComplete method as a prop and calls it when you save the recording

import { AudioRecorder } from 'react-sound-recorder';

const getAudio = (blob: Blob, title: string | undefined) => {
    const url = URL.createObjectURL(blob);
    const audio = document.createElement('audio');
    audio.src = url;
    audio.controls = true;
    title && audio.setAttribute('title', title);
    document.getElementById('root')?.appendChild(audio);
};

return <AudioRecorder onRecordingComplete={(blob, title) => getAudio(blob, title)} />;

Usage 2

export function App() {
  const [audioUrl, setAudioUrl] = useState<{ url: string; title: string }>();

  const getAudio = (blob: Blob, title?: string) => {
    const url = URL.createObjectURL(blob);
    setAudioUrl({
      url,
      title: title!,
    });
  };

  const handleError = (error) => {
  console.error("AudioRecorder error:", error);
  // Display error to user or take other actions
};

  return (
    <>
      <AudioRecorder
        timeLimit={5}
        onRecordingComplete={(blob, title) => getAudio(blob, title)}
        onError={handleError}
      />
      {audioUrl && <audio src={audioUrl.url} title={audioUrl.title} controls />}
    </>
  );
}
Props Description Default Optional
onRecordingComplete A method that gets called when u need to save audio details to local state or displaying it to the dom N/A Yes
onError A Callback function for handling recording errors N/A Yes
timeLimit A Parameter to set the time limit for the audio recorder - "in Seconds" Unlimited Yes
customControls This Parameter allows you to create your own custom controls with your preferred style. N/A Yes
askForTitle This Parameter ask for audio title to set it for audio name [audioTitle.mp3] false Yes

Usage For customControls Param

The customControls parameter provides three arguments:

  • actions - Returns pauseRecording, stopRecording, and startRecording functions.
  • time - Returns the time being recorded.
  • status - Returns the recording status.
<AudioRecorder
    timeLimit={5}
    onRecordingComplete={(blob, title) => addAudioElement(blob, title)}
    customControls={(actions, time, status) => (
        <div>
            <h2>{time}</h2>
            <button disabled={status === 'inactive'} onClick={actions.pauseRecording}>
                Pause
            </button>
            <button onClick={actions.stopRecording}>Stop</button>
            <button onClick={actions.startRecording}>Start</button>
        </div>
    )}
/>

About

An audio recording helper for React. Provides a component to help with audio recording.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published