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 . بدلاً من تمرير عاملUrl إلى useSimpleAudioRecorder ، من الأفضل استدعاء هذه الوظيفة في مكان ما في بداية التطبيق الخاص بك لتحميل العامل مسبقًا في أقرب وقت ممكن.
تعداد حالات المسجل المحتملة. يُستخدم بواسطة مكون SimpleAudioRecorder.
RecorderStates = {
INITIAL ,
STARTING ,
RECORDING ,
PAUSED ,
ENCODING ,
COMPLETE ,
ERROR ,
COUNTDOWN
}يستخدم Simple Audio Recorder عقدة AudioWorkletNode لاستخراج البيانات الصوتية، عندما تكون مدعومة، ويعود إلى استخدام ScriptProcessorNode المهمل في المتصفحات الأقدم. ومع ذلك، يبدو أن هناك بعض المشكلات العرضية عند استخدام AudioWorkletNode على iOS/Safari. بعد حوالي 45 ثانية، تبدأ حزم الصوت من الميكروفون في السقوط، مما يؤدي إلى إنشاء تسجيل أقصر من المتوقع مع التأتأة والأخطاء. لذا، سيتم حاليًا استخدام ScriptProcessorNode المهملة دائمًا على iOS/Safari.
AFAIK هذه مشكلة لم يتم حلها، ربما تتعلق بتنفيذ Safari لـ AudioWorklets وعدم منحهم أولوية كافية لوحدة المعالجة المركزية. تظهر هذه المشكلات على بعض الأجهزة فقط. ومن الغريب أنه قد تمت أيضًا مواجهة مواطن الخلل المماثلة عند استخدام ScriptProcessorNode القديم على Chrome على منصات أخرى.
Chrome ليس أفضل على نظام التشغيل iOS أيضًا لأنهم مجبرون على استخدام Safari تحت الغطاء (بطريقة ما، يبدو هذا مألوفًا إلى حد ما).
SimpleAudioRecorder مرخص في الغالب من معهد ماساتشوستس للتكنولوجيا (MIT)، لكن العامل على الأرجح هو LGPL لأنه يستخدم lamejs.
