simple audio recorder
Release 1.2.4
Простая библиотека веб-аудиозаписей с кодированием в MP3 (с использованием lamejs) и дополнительным потоковым/частичным выводом. Создано Vocaroo, быстрым и простым онлайн-диктофоном!
Теперь включает в себя как версию vanilla-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 ) ;
} ) ; 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 >
) ;
} Чтобы запустить встроенные примеры в каталоге ./examples/, запустите сервер разработки из корня проекта, а затем перейдите к ним.
Или начните разработку с:
yarn install
yarn start... или какой-то другой эквивалент npm.
yarn add simple - audio - recorder import AudioRecorder from "simple-audio-recorder" ;Альтернативно, просто используйте тег сценария:
< script type = "text/javascript" src = "audiorecorder.js" > < / script >Кроме того, вы должны убедиться, что вы распространяете рабочий веб-файл «mp3worker.js» вместе со своим приложением.
// 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 ( ) ;Хотите получать закодированные фрагменты данных по мере их создания? Полезно для потоковой загрузки на удаленный сервер.
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?Обработка ошибок может выполняться либо с помощью обещаний и перехвата ошибок, либо с помощью обработчика событий onerror, если он установлен.
Они называются через свойство error.name.
Пожалуйста, ознакомьтесь с примером реагирования и компонента для рабочего примера использования.
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} после завершения записи и кодирования.Это очень простой компонент конечного автомата, который отображает различные компоненты представления в зависимости от текущего состояния рекордера.
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 из useSimpleAudioRecorder.stop и pause . Вместо передачи workUrl в useSimpleAudioRecorder лучше вызвать эту функцию где-нибудь в начале вашего приложения, чтобы как можно скорее предварительно загрузить работника.
Перечень возможных состояний рекордера. Используется компонентом SimpleAudioRecorder.
RecorderStates = {
INITIAL ,
STARTING ,
RECORDING ,
PAUSED ,
ENCODING ,
COMPLETE ,
ERROR ,
COUNTDOWN
}Simple Audio Recorder использует AudioWorkletNode для извлечения аудиоданных, если это поддерживается, и возвращается к использованию устаревшего ScriptProcessorNode в старых браузерах. Однако, похоже, время от времени возникают проблемы с использованием AudioWorkletNode в iOS/Safari. Примерно через 45 секунд аудиопакеты с микрофона начинают пропадать, в результате чего запись оказывается короче, чем ожидалось, с заиканиями и сбоями. Поэтому в настоящее время устаревший ScriptProcessorNode всегда будет использоваться в iOS/Safari.
AFAIK, это нерешенная проблема, возможно, связанная с реализацией AudioWorklets в Safari, и им не уделяется достаточного приоритета процессора. Эти проблемы возникают только на некоторых устройствах. Любопытно, что подобные сбои наблюдались и при использовании старого ScriptProcessorNode в Chrome на других платформах.
Chrome также не лучше работает на iOS, поскольку они вынуждены использовать Safari под капотом (почему-то это кажется довольно знакомым).
SimpleAudioRecorder в основном имеет лицензию MIT, но рабочий, вероятно, LGPL, поскольку использует lamejs.
