simple audio recorder
Release 1.2.4
Eine einfache Web-Audioaufzeichnungsbibliothek mit Kodierung in MP3 (mit LameJS) und optionaler Streaming-/Chunked-Ausgabe. Hergestellt von Vocaroo, dem schnellen und einfachen Online-Diktiergerät!
Jetzt inklusive einer Vanilla-JS-Version und einem einfach zu verwendenden React-Hook und einer Komponente!
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 >
) ;
} Um die integrierten Beispiele im Verzeichnis ./examples/ auszuführen, starten Sie einen Entwicklungsserver im Projektstammverzeichnis und navigieren Sie dann zu ihnen.
Oder beginnen Sie mit der Entwicklung:
yarn install
yarn start... oder was auch immer das npm-Äquivalent ist.
yarn add simple - audio - recorder import AudioRecorder from "simple-audio-recorder" ;Alternativ können Sie einfach ein Skript-Tag verwenden:
< script type = "text/javascript" src = "audiorecorder.js" > < / script >Außerdem müssen Sie sicherstellen, dass Sie die Web-Worker-Datei „mp3worker.js“ zusammen mit Ihrer Anwendung verteilen.
// 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 ( ) ;Möchten Sie verschlüsselte Datenblöcke erhalten, sobald diese erstellt werden? Nützlich zum Streamen von Uploads auf einen Remote-Server.
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?Die Fehlerbehandlung kann entweder über Versprechen und das Abfangen von Fehlern oder über den Ereignishandler onerror erfolgen, sofern dieser festgelegt ist.
Diese werden über die Eigenschaft error.name benannt
Ein funktionierendes Anwendungsbeispiel finden Sie im React-Hook- und Komponentenbeispiel.
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} wenn die Aufnahme und Kodierung abgeschlossen ist.Dies ist eine sehr einfache Zustandsmaschinenkomponente, die je nach aktuellem Rekorderstatus eine andere Ansichtskomponente anzeigt.
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 von useSimpleAudioRecorder aufruft.stop und pause -Funktionen aufrufen. Anstatt eine workerUrl an useSimpleAudioRecorder zu übergeben, ist es besser, diese Funktion irgendwo am Anfang Ihrer App aufzurufen, um den Worker so schnell wie möglich vorab zu laden.
Eine Aufzählung möglicher Rekorderzustände. Wird von der SimpleAudioRecorder-Komponente verwendet.
RecorderStates = {
INITIAL ,
STARTING ,
RECORDING ,
PAUSED ,
ENCODING ,
COMPLETE ,
ERROR ,
COUNTDOWN
}Simple Audio Recorder verwendet einen AudioWorkletNode, um die Audiodaten zu extrahieren, sofern dies unterstützt wird, und greift bei älteren Browsern auf die Verwendung des veralteten ScriptProcessorNode zurück. Es scheint jedoch gelegentlich Probleme bei der Verwendung von AudioWorkletNode unter iOS/Safari zu geben. Nach etwa 45 Sekunden beginnen die Audiopakete vom Mikrofon verloren zu gehen, was zu einer kürzeren Aufnahme als erwartet mit Stottern und Störungen führt. Daher wird derzeit der veraltete ScriptProcessorNode immer unter iOS/Safari verwendet.
AFAIK, dies ist ein ungelöstes Problem, das möglicherweise damit zusammenhängt, dass Safari AudioWorklets implementiert und ihnen nicht genügend CPU-Priorität eingeräumt wird. Diese Probleme treten nur auf einigen Geräten auf. Seltsamerweise traten ähnliche Störungen auch bei der Verwendung des alten ScriptProcessorNode in Chrome auf anderen Plattformen auf.
Chrome ist unter iOS auch nicht besser, da sie gezwungen sind, Safari unter der Haube zu verwenden (irgendwie kommt mir das ziemlich vertraut vor).
SimpleAudioRecorder ist größtenteils MIT-lizenziert, aber der Worker ist wahrscheinlich LGPL, da er LameJS verwendet.
