simple audio recorder
Release 1.2.4
MP3 へのエンコード (lamejs を使用) とオプションのストリーミング/チャンク出力を備えたシンプルな Web オーディオ録音ライブラリ。 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 タグを使用するだけです。
< script type = "text/javascript" src = "audiorecorder.js" > < / script >また、Web ワーカー ファイル「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?エラー処理は、Promise とエラーのキャッチを介して、または 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機能を呼び出す停止ボタンと一時停止ボタンを表示したい場合があります。 workUrl をuseSimpleAudioRecorderに渡す代わりに、アプリの先頭のどこかでこの関数を呼び出して、できるだけ早くワーカーをプリロードすることをお勧めします。
考えられるレコーダーの状態の列挙。 SimpleAudioRecorder コンポーネントによって使用されます。
RecorderStates = {
INITIAL ,
STARTING ,
RECORDING ,
PAUSED ,
ENCODING ,
COMPLETE ,
ERROR ,
COUNTDOWN
}Simple Audio Recorder は、サポートされている場合は AudioWorkletNode を使用してオーディオ データを抽出し、古いブラウザでは非推奨の ScriptProcessorNode を使用するようにフォールバックします。ただし、iOS/Safari で AudioWorkletNode を使用すると、時折問題が発生するようです。約 45 秒後、マイクからのオーディオ パケットがドロップされ始め、途切れや不具合が発生し、予想よりも短い録音が作成されます。したがって、現時点では、非推奨の ScriptProcessorNode が常に iOS/Safari で使用されます。
私の知る限り、これは未解決の問題であり、おそらく Safari の AudioWorklets の実装と、それらに十分な CPU 優先度が与えられていないことに関連していると思われます。これらの問題は一部のデバイスでのみ発生します。不思議なことに、他のプラットフォームの Chrome で古い ScriptProcessorNode を使用したときにも、同様の不具合が発生しました。
iOS では Chrome の方が優れているわけではありません。iOS では内部で Safari を使用する必要があるからです (どういうわけか、これはかなり見慣れた感じがします)。
SimpleAudioRecorder は主に MIT ライセンスを取得していますが、ワーカーは lamejs を使用しているため、おそらく LGPL です。
