Audio Recorder
npm install react-audio-recorderdist/AudioRecorder.min.js in your page. If you use this, make sure you have already included React, and it is available as a global variable.
npm install react-audio-recorder --save
`
Usage
The component can be instantiated with no properties to act as a simple client-side recorder/downloader. onChange is called when a recording is finished, with the audio data passed as a blob.
`
import React as * from 'react';
import AudioRecorder from 'react-audio-recorder';
`
For more detailed usage examples, see the live demo.
$3
property|type|default|Description
----|----|-------|-----------
initialAudio|Blob|An initial Blob of audio data
downloadable|boolean|true|Whether to show a download button
loop|boolean|false|Whether to loop audio playback
filename|string|'output.wav'|Downloaded file name
className|string|''|CSS class name on the container element
style|Object|{}|Inline styles on the container element
onAbort|() => void||Callback when playback is stopped
onChange|(AudioRecorderChangeEvent) => void||Callback when the recording buffer is modified
onEnded|() => void||Callback when playback completes on its own
onPause|() => void||(NYI)
onPlay|() => void||Callback when playback begins
onRecordStart|() => void||Callback when recording begins
playLabel|string|'🔊 Play'|Button label
playingLabel|string|'❚❚ Playing'|Button label
recordLabel|string|'● Record'|Button label
recordingLabel|string|'● Recording'|Button label
removeLabel|string|'✖ Remove'|Button label
downloadLabel|string|'💾 Save'|Button label
$3
This component is intended for use with short sounds only, such as speech samples and sound effects. The WAV encoder is not offloaded to a service worker, to make this component more portable. It is not space efficient either, recording at 1411kbps (16 bit stereo), so long recordings will drain the system of memory.
$3
Because of its usage of the Web Audio API, react-audio-recorder is not compatible with any version of Internet Explorer (Edge is compatible).
Development
To use the typescript watcher, run npm run dev`.