simple audio recorder
Release 1.2.4
Une simple bibliothèque d'enregistrement audio Web avec encodage au format MP3 (à l'aide de lamejs) et sortie streaming/bloc en option. Fabriqué par Vocaroo, l'enregistreur vocal en ligne simple et rapide !
Comprenant désormais à la fois une version vanilla-js et un crochet et un composant de réaction faciles à utiliser !
import AudioRecorder from "simple-audio-recorder" ;
AudioRecorder . preload ( "mp3worker.js" ) ;
let recorder = new AudioRecorder ( ) ;
recorder . start ( ) . then ( ( ) => {
console . log ( "Recording started..." ) ;
} ) . catch ( error => {
console . log ( error ) ;
} ) ;
recorder . stop ( ) . then ( mp3Blob => {
console . log ( "Recording stopped..." ) ;
const newAudio = document . createElement ( "audio" ) ;
newAudio . src = URL . createObjectURL ( mp3Blob ) ;
newAudio . controls = true ;
document . body . append ( newAudio ) ;
} ) . catch ( error => {
console . log ( error ) ;
} ) ; import { SimpleAudioRecorder , useSimpleAudioRecorder } from "simple-audio-recorder/react" ;
export default function App ( ) {
const recorder = useSimpleAudioRecorder ( { workerUrl : "mp3worker.js" } ) ;
const viewInitial = < button onClick = { recorder . start } > start recording < / button > ;
const viewRecording = < button onClick = { recorder . stop } > stop recording < / button > ;
const viewError = ( < > { viewInitial } < div > Error occurred! { recorder . errorStr } < / div > < / > ) ;
return (
< div >
< SimpleAudioRecorder
{ ... recorder . getProps ( ) }
viewInitial = { viewInitial }
viewRecording = { viewRecording }
viewError = { viewError } / >
{ recorder . mp3Urls . map ( url =>
< audio key = { url } src = { url } controls / >
) }
< / div >
) ;
} Pour exécuter les exemples intégrés dans le répertoire ./examples/, démarrez un serveur de développement à partir de la racine du projet, puis accédez-y.
Ou commencez à développer avec :
yarn install
yarn start... ou quel que soit l'équivalent npm.
yarn add simple - audio - recorder import AudioRecorder from "simple-audio-recorder" ;Alternativement, utilisez simplement une balise de script :
< script type = "text/javascript" src = "audiorecorder.js" > < / script >Vous devez également vous assurer de distribuer le fichier Web Worker « mp3worker.js » avec votre application.
// This is a static method.
// You should preload the worker immediately on page load to enable recording to start quickly
AudioRecorder . preload ( "./mp3worker.js" ) ; let recorder = new AudioRecorder ( {
recordingGain : 1 , // Initial recording volume
encoderBitRate : 96 , // MP3 encoding bit rate
streaming : false , // Data will be returned in chunks (ondataavailable callback) as it is encoded,
// rather than at the end as one large blob
streamBufferSize : 50000 , // Size of encoded mp3 data chunks returned by ondataavailable, if streaming is enabled
constraints : { // Optional audio constraints, see https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
channelCount : 1 , // Set to 2 to hint for stereo if it's available, or leave as 1 to force mono at all times
autoGainControl : true ,
echoCancellation : true ,
noiseSuppression : true
} ,
// Used for debugging only. Force using the older script processor instead of AudioWorklet.
// forceScriptProcessor : true
} ) ; recorder . start ( ) . then ( ( ) => {
console . log ( "Recording started..." ) ;
} ) . catch ( error => {
console . log ( error ) ;
} ) ;
recorder . stop ( ) . then ( mp3Blob => {
// Do something with the mp3 Blob!
} ) . catch ( error => {
console . log ( error ) ;
} ) ; recorder . onstart = ( ) => {
console . log ( "Recording started..." ) ;
} ;
recorder . onstop = ( mp3Blob ) => {
// Do something with the mp3 Blob!
// When using onstop, mp3Blob could in rare cases be null if nothing was recorded
// (with the Promise API, that would be a stop() promise rejection)
} ;
recorder . onerror = ( error ) => {
console . log ( error ) ;
} ;
// if onerror is set, start and stop won't return a promise
recorder . start ( ) ;
// later...
recorder . stop ( ) ;Vous souhaitez recevoir des morceaux de données codées au fur et à mesure de leur production ? Utile pour diffuser des téléchargements sur un serveur distant.
let recorder = new AudioRecorder ( {
streaming : true ,
streamBufferSize : 50000
} ) ;
let audioChunks = [ ] ;
recorder . ondataavailable = ( data ) => {
// 50 KB of MP3 data received!
audioChunks . push ( data ) ;
} ;
recorder . start ( ) ;
// No mp3Blob will be received either with the promise API or via recorder.onstop if streaming is enabled.
recorder . stop ( ) . then ( ( ) => {
// ...do something with all the chunks that were received by ondataavailable
let mp3Blob = new Blob ( audioChunks , { type : "audio/mpeg" } ) ;
} ) ; recorder . start ( paused = false ) ; // Supports starting in paused mode
recorder . pause ( ) ;
recorder . resume ( ) ;
recorder . setRecordingGain ( gain ) ; // Change the volume while recording is in progress (0.0 to 1.0)
recorder . time ; // Access the current recorded duration in milliseconds. Time pauses when recording is paused.
// Get the amount of data remaining to be encoded
// Will only be much above zero on very slow systems as mp3 encoding is quite fast.
// A large value indicates there might be a delay between calling stop() and getting the mp3Blob
recorder . getEncodingQueueSize ( ) ;
AudioRecorder . isRecordingSupported ( ) ; // Static method. Does this browser support getUserMedia?La gestion des erreurs peut être effectuée soit via des promesses et des erreurs de détection, soit via le gestionnaire d'événements onerror s'il est défini.
Ceux-ci sont nommés via la propriété error.name
Veuillez consulter l'exemple de hook et de composant React pour un exemple fonctionnel d'utilisation.
import {
useSimpleAudioRecorder ,
SimpleAudioRecorder ,
preloadWorker ,
RecorderStates
} from "simple-audio-recorder/react" const {
error , // Any current error object, or null
errorStr , // Error object as string, or null
time , // Current recorded time in milliseconds
countdownTimeLeft , // Time left of the countdown before recording will start, if one was set
mp3Blobs , // List of all recordings as a blob
mp3Urls , // List of all recordings as URLs (created with URL.createObjectURL)
mp3Blob , // Single most recent recording blob
mp3Url , // Single most recent recording URL
start , stop , pause , resume , // Recording functions
recorderState , // Current state of recorder (see RecorderStates)
getProps // Function to get the props that can be passed to the SimpleAudioRecorder react component
} = useSimpleAudioRecorder ( {
workerUrl , onDataAvailable , onComplete , onError , options , cleanup = false , timeUpdateStep = 111 , countdown = 0
} ){mp3Blob, mp3Url} lorsque l'enregistrement et l'encodage sont terminés.Il s'agit d'un composant de machine d'état très simple qui affiche un composant de vue différent en fonction de l'état actuel de l'enregistreur.
SimpleAudioRecorder ( {
// As returned by useSimpleAudioRecorder
recorderState ,
// The components to display in each of the states.
// Only viewInitial and viewRecording are absolutely required.
viewInitial , viewStarting , viewCountdown , viewRecording , viewPaused , viewEncoding , viewComplete , viewError
} )start de useSimpleAudioRecorder.stop et pause . Au lieu de transmettre un workerUrl à useSimpleAudioRecorder , il est préférable d'appeler cette fonction quelque part au début de votre application pour précharger le travailleur dès que possible.
Une énumération des états possibles de l'enregistreur. Utilisé par le composant SimpleAudioRecorder.
RecorderStates = {
INITIAL ,
STARTING ,
RECORDING ,
PAUSED ,
ENCODING ,
COMPLETE ,
ERROR ,
COUNTDOWN
}Simple Audio Recorder utilise un AudioWorkletNode pour extraire les données audio, lorsqu'elles sont prises en charge, et revient à l'utilisation du ScriptProcessorNode obsolète sur les anciens navigateurs. Cependant, il semble y avoir quelques problèmes occasionnels lors de l'utilisation d'AudioWorkletNode sur iOS/Safari. Après environ 45 secondes, les paquets audio du microphone commencent à être supprimés, créant un enregistrement plus court que prévu avec des bégaiements et des problèmes. Ainsi, actuellement, le ScriptProcessorNode obsolète sera toujours utilisé sur iOS/Safari.
AFAIK, il s'agit d'un problème non résolu, peut-être lié à l'implémentation d'AudioWorklets par Safari et au fait qu'ils ne reçoivent pas suffisamment de priorité CPU. Ces problèmes n'apparaissent que sur certains appareils. Curieusement, des problèmes similaires ont également été rencontrés lors de l'utilisation de l'ancien ScriptProcessorNode sur Chrome sur d'autres plates-formes.
Chrome n'est pas non plus meilleur sur iOS car ils sont obligés d'utiliser Safari sous le capot (d'une manière ou d'une autre, cela semble plutôt familier).
SimpleAudioRecorder est principalement sous licence MIT, mais le travailleur est probablement LGPL car il utilise lamejs.
