simple audio recorder

Gravador de áudio simples

Uma biblioteca simples de gravação de áudio da web com codificação para MP3 (usando lamejs) e streaming/saída fragmentada opcional. Feito pela Vocaroo, o gravador de voz online rápido e fácil!

Agora incluindo uma versão vanilla-js e um gancho e componente de reação fáceis de usar!

Baunilha-js

 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 ) ;
} ) ;

Gancho e componente React

 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 >
	) ;
} 

Exemplos

No codepen

• Exemplo de promessa mínima
• Exemplo principal de todos os recursos
• Exemplo de gancho e componente React

Incluído no projeto

• Exemplo de promessa mínima
• Exemplo principal de todos os recursos
• Exemplo de gancho e componente React

Para executar os exemplos integrados no diretório ./examples/, inicie um servidor de desenvolvimento a partir da raiz do projeto e navegue até eles.

Ou comece a desenvolver com:

yarn install
yarn start

...ou qualquer que seja o equivalente npm.

Uso

Incluindo

 yarn add simple - audio - recorder 

 import AudioRecorder from "simple-audio-recorder" ;

Alternativamente, basta usar uma tag de script:

 < script type = "text/javascript" src = "audiorecorder.js" > < / script >

Além disso, você deve distribuir o arquivo do web trabalhador "mp3worker.js" junto com seu aplicativo.

Pré-carregue o trabalhador do codificador MP3:

 // This is a static method.
// You should preload the worker immediately on page load to enable recording to start quickly
AudioRecorder . preload ( "./mp3worker.js" ) ;

Crie um gravador de áudio

 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
} ) ;

Use promessas para iniciar e parar a gravação

 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 ) ;
} ) ;

Ou use eventos

 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 ( ) ;

Lidar com blocos de dados codificados

Quer receber blocos de dados codificados à medida que são produzidos? Útil para streaming de uploads para um 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" } ) ;
} ) ;

Outras funções/atributos

 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?

Tratamento de erros

O tratamento de erros pode ser feito por meio de promessas e captura de erros ou por meio do manipulador de eventos onerror, se estiver definido.

Erros

Eles são nomeados por meio da propriedade error.name

• CancelStartError - se stop() for chamado enquanto start() não foi concluído (talvez devido ao carregamento lento do trabalhador), então ambas as promessas de início e parada serão rejeitadas com este erro. No entanto, se estiver usando o manipulador de eventos onerror, esse erro não será fornecido (pois não é realmente um erro, mas uma ação deliberada do usuário). Nesse caso, o manipulador de eventos onstop receberá null em vez de um blob mp3.
• WorkerError - houve algum problema ao carregar o trabalhador, talvez a URL estivesse incorreta ou a internet quebrou
• Erros getUserMedia - qualquer erro com o qual getUserMedia possa falhar, como NotAllowedError ou NotFoundError
• Erros diversos sem nome - se você fizer algo como chamar start() enquanto a gravação já começou ou esquecer de chamar preload() antes de criar um AudioRecorder, provavelmente verá alguns outros erros.

Gancho e componente React

Consulte o gancho de reação e o exemplo do componente para obter um exemplo prático de uso.

Importando

 import {
	useSimpleAudioRecorder ,
	SimpleAudioRecorder ,
	preloadWorker ,
	RecorderStates
} from "simple-audio-recorder/react" 

gancho useSimpleAudioRecorder

 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
} )

• trabalhadorUrl - URL do codificador mp3. Alternativamente, pode ser especificado usando preloadWorker()
• onDataAvailable - retorno de chamada opcional para receber dados codificados à medida que são criados.
• onComplete - retorno de chamada opcional, recebe {mp3Blob, mp3Url} quando a gravação e a codificação são concluídas.
• onError - retorno de chamada opcional, recebe qualquer objeto de erro.
• opções - consulte a documentação do AudioRecorder.
• limpeza - se verdadeiro, qualquer mp3Urls criado via URL.createObjectURL será liberado durante a desmontagem. Por padrão, isso é falso e pode ser necessário liberá-los se houver uma quantidade excessiva de gravações.
• timeUpdateStep - com que frequência, em milissegundos, o tempo retornado será atualizado.
• contagem regressiva - um tempo de contagem regressiva em milissegundos até que a gravação realmente comece, a partir do momento em que start() foi chamado e o acesso ao microfone foi concedido. O padrão é zero.

Componente SimpleAudioRecorder

Este é um componente de máquina de estado muito simples que mostra um componente de visualização diferente dependendo do estado atual do gravador.

 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
} )

• viewInitial - estado inicial do gravador, você deve mostrar um botão "iniciar gravação" que chama a função start de useSimpleAudioRecorder.
• viewStarting - estado opcional, mostrará quando a gravação está começando, mas ainda não começou, por exemplo, enquanto o usuário está respondendo ao prompt de acesso ao microfone.
• viewCountdown - opcional, mostrará quando estiver no estado de contagem regressiva se um tempo de contagem regressiva maior que zero tiver sido definido.
• viewRecording - estado obrigatório, a gravação está em andamento! Você pode querer mostrar aqui os botões de parar e pausar que chamam as funções stop e pause .
• viewPaused - necessário se a função de pausa for usada. Mostrar botões de retomar ou parar.
• viewEncoding - opcional. Isso pode aparecer em casos muito raros, quando o usuário tem um dispositivo muito lento e a codificação do mp3 ainda está em andamento após a interrupção da gravação.
• viewComplete - opcional, mostrado após a conclusão da gravação com sucesso. O padrão é viewInitial.
• viewError - opcional, mas altamente recomendado. Mostrado quando há um erro de gravação. Você pode exibir o conteúdo do objeto de erro ou errorStr de useSimpleAudioRecorder.

preloadWorker(workerUrl)

Em vez de passar um trabalhadorUrl para useSimpleAudioRecorder , é melhor chamar essa função em algum lugar no início do seu aplicativo para pré-carregar o trabalhador o mais rápido possível.

Estados do gravador

Uma enumeração de possíveis estados do gravador. Usado pelo componente SimpleAudioRecorder.

 RecorderStates = {
	INITIAL ,
	STARTING ,
	RECORDING ,
	PAUSED ,
	ENCODING ,
	COMPLETE ,
	ERROR ,
	COUNTDOWN
}

Problemas conhecidos

iOS/Safari

O Simple Audio Recorder usa um AudioWorkletNode para extrair os dados de áudio, quando compatível, e volta a usar o obsoleto ScriptProcessorNode em navegadores mais antigos. No entanto, parece haver alguns problemas ocasionais ao usar AudioWorkletNode no iOS/Safari. Após cerca de 45 segundos, os pacotes de áudio do microfone começam a ser descartados, criando uma gravação mais curta do que o esperado, com interrupções e falhas. Portanto, atualmente, o obsoleto ScriptProcessorNode sempre será usado no iOS/Safari.

AFAIK, este é um problema não resolvido, talvez relacionado à implementação de AudioWorklets no Safari e à falta de prioridade de CPU suficiente. Esses problemas aparecem apenas em alguns dispositivos. Curiosamente, falhas semelhantes também ocorreram ao usar o antigo ScriptProcessorNode no Chrome em outras plataformas.

O Chrome também não é melhor no iOS, pois eles são forçados a usar o Safari nos bastidores (de alguma forma, isso parece bastante familiar).

Licenças

SimpleAudioRecorder é principalmente licenciado pelo MIT, mas o trabalhador provavelmente é LGPL, pois usa lamejs.