simple audio recorder
Release 1.2.4
ไลบรารีบันทึกเสียงบนเว็บแบบเรียบง่ายพร้อมการเข้ารหัสเป็น MP3 (โดยใช้ lamejs) และเอาต์พุตสตรีมมิ่ง/เป็นก้อนเสริม สร้างโดย Vocaroo เครื่องบันทึกเสียงออนไลน์ที่ง่ายและรวดเร็ว!
ตอนนี้รวมทั้งเวอร์ชัน vanilla-js และ hook และส่วนประกอบปฏิกิริยาที่ใช้งานง่าย!
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/ ให้เริ่มต้นเซิร์ฟเวอร์ dev จากรูทโปรเจ็กต์ จากนั้นไปที่ตัวอย่างเหล่านั้น
หรือเริ่มพัฒนาด้วย:
yarn install
yarn start...หรืออะไรก็ตามที่เทียบเท่า npm
yarn add simple - audio - recorder import AudioRecorder from "simple-audio-recorder" ;หรือเพียงใช้แท็กสคริปต์:
< script type = "text/javascript" src = "audiorecorder.js" > < / script >นอกจากนี้ คุณต้องแน่ใจว่าคุณได้แจกจ่ายไฟล์ web worker "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 จาก useSimpleAudioRecorderstop และ pause แทนที่จะส่ง workerUrl ไปยัง 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 และไม่ได้รับลำดับความสำคัญของ CPU เพียงพอ ปัญหาเหล่านี้ปรากฏบนอุปกรณ์บางชนิดเท่านั้น น่าแปลกที่ข้อผิดพลาดที่คล้ายกันนี้เกิดขึ้นได้เมื่อใช้ ScriptProcessorNode เก่าบน Chrome บนแพลตฟอร์มอื่น
Chrome ไม่ได้ดีไปกว่านี้บน iOS เนื่องจากถูกบังคับให้ใช้ Safari ภายใต้ประทุน (อย่างใดสิ่งนี้ให้ความรู้สึกค่อนข้างคุ้นเคย)
SimpleAudioRecorder ส่วนใหญ่ได้รับอนุญาตจาก MIT แต่ผู้ปฏิบัติงานน่าจะเป็น LGPL เนื่องจากใช้ lamejs
