simple audio recorder
Release 1.2.4
Una biblioteca de grabación de audio web sencilla con codificación a MP3 (usando lamejs) y salida en streaming/fragmentada opcional. ¡Hecho por Vocaroo, la grabadora de voz en línea rápida y fácil!
¡Ahora incluye una versión vanilla-js y un gancho y componente de reacción fáciles de usar!
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 >
) ;
} Para ejecutar los ejemplos integrados en el directorio ./examples/, inicie un servidor de desarrollo desde la raíz del proyecto y luego navegue hasta ellos.
O comience a desarrollar con:
yarn install
yarn start...o cualquiera que sea el equivalente de npm.
yarn add simple - audio - recorder import AudioRecorder from "simple-audio-recorder" ;Alternativamente, simplemente use una etiqueta de script:
< script type = "text/javascript" src = "audiorecorder.js" > < / script >Además, debe asegurarse de distribuir el archivo de trabajo web "mp3worker.js" junto con su aplicación.
// 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 ( ) ;¿Quiere recibir fragmentos de datos codificados a medida que se producen? Útil para transmitir cargas a un servidor remoto.
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?El manejo de errores se puede realizar mediante promesas y captura de errores, o mediante el controlador de eventos onerror si está configurado.
Estos se nombran mediante la propiedad error.name.
Consulte el ejemplo de componente y gancho de reacción para ver un ejemplo práctico de uso.
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} cuando finaliza la grabación y codificación.Este es un componente de máquina de estado muy simple que muestra un componente de vista diferente dependiendo del estado actual del registrador.
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 desde useSimpleAudioRecorder.stop y pause . En lugar de pasar un trabajadorUrl para useSimpleAudioRecorder , es mejor llamar a esta función en algún lugar al inicio de su aplicación para precargar el trabajador lo antes posible.
Una enumeración de posibles estados del registrador. Utilizado por el componente SimpleAudioRecorder.
RecorderStates = {
INITIAL ,
STARTING ,
RECORDING ,
PAUSED ,
ENCODING ,
COMPLETE ,
ERROR ,
COUNTDOWN
}Simple Audio Recorder utiliza un AudioWorkletNode para extraer los datos de audio, cuando sea compatible, y recurre al uso del obsoleto ScriptProcessorNode en navegadores más antiguos. Sin embargo, parece haber algunos problemas ocasionales al utilizar AudioWorkletNode en iOS/Safari. Después de unos 45 segundos, los paquetes de audio del micrófono comienzan a perderse, creando una grabación más corta de lo esperado con tartamudeos y fallos. Por lo tanto, actualmente, el ScriptProcessorNode obsoleto siempre se usará en iOS/Safari.
AFAIK, este es un problema sin resolver, tal vez relacionado con la implementación de AudioWorklets de Safari y no se les da suficiente prioridad de CPU. Estos problemas sólo aparecen en algunos dispositivos. Curiosamente, también se han experimentado fallos similares al utilizar el antiguo ScriptProcessorNode en Chrome en otras plataformas.
Chrome tampoco es mejor en iOS, ya que se ven obligados a usar Safari bajo el capó (de alguna manera, esto resulta bastante familiar).
SimpleAudioRecorder tiene principalmente licencia MIT, pero el trabajador probablemente sea LGPL ya que usa lamejs.
