simple audio recorder
Release 1.2.4
MP3로 인코딩(lamejs 사용) 및 선택적 스트리밍/청크 출력을 갖춘 간단한 웹 오디오 녹음 라이브러리입니다. 빠르고 쉬운 온라인 음성 녹음기 Vocaroo가 제작했습니다!
이제 바닐라 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 기능을 호출하는 "녹화 시작" 버튼을 표시해야 합니다.stop 및 pause 기능을 호출하는 중지 및 일시 중지 버튼을 표시할 수 있습니다. useSimpleAudioRecorder 에 WorkerUrl을 전달하는 대신 앱 시작 부분에서 이 함수를 호출하여 최대한 빨리 작업자를 미리 로드하는 것이 좋습니다.
가능한 레코더 상태의 열거입니다. SimpleAudioRecorder 구성 요소에서 사용됩니다.
RecorderStates = {
INITIAL ,
STARTING ,
RECORDING ,
PAUSED ,
ENCODING ,
COMPLETE ,
ERROR ,
COUNTDOWN
}Simple Audio Recorder는 지원되는 경우 AudioWorkletNode를 사용하여 오디오 데이터를 추출하고 이전 브라우저에서는 더 이상 사용되지 않는 ScriptProcessorNode를 사용하도록 대체합니다. 그러나 iOS/Safari에서 AudioWorkletNode를 사용하는 데 가끔 문제가 있는 것 같습니다. 약 45초 후에 마이크의 오디오 패킷이 끊어지기 시작하여 끊김 현상과 결함이 있는 예상보다 짧은 녹음이 생성됩니다. 따라서 현재는 더 이상 사용되지 않는 ScriptProcessorNode가 iOS/Safari에서 항상 사용됩니다.
AFAIK 이는 해결되지 않은 문제입니다. 아마도 Safari의 AudioWorklets 구현과 관련이 있으며 CPU 우선 순위가 충분하지 않습니다. 이러한 문제는 일부 장치에서만 나타납니다. 흥미롭게도 다른 플랫폼의 Chrome에서 이전 ScriptProcessorNode를 사용할 때도 비슷한 결함이 발생했습니다.
iOS에서도 Chrome은 내부적으로 Safari를 사용해야 하기 때문에 더 좋지 않습니다(어쨌든 이는 다소 친숙한 느낌입니다).
SimpleAudioRecorder는 대부분 MIT 라이선스를 받았지만 lamejs를 사용하므로 작업자는 아마도 LGPL일 것입니다.
