JavaScriptでWeb Audio APIを使って音声を収録する方法
この記事について
この記事ではJavaScriptで Web Audio API を使って音声を収録する方法について紹介します。関連リソースを下記に示します。
おおまかな手順
おおまかな手順を下記に示します。
- コーディングの準備
- コーディング
- 動作確認
コーディングの準備
下記のコマンドを実行してコーディングの準備をします。
mkdir javascript-audio-recorder
cd javascript-audio-recorder
npm init -y
npm install --save-dev http-server
touch audio-recorder.js encode-audio.js index.html main.js
コーディング
index.html
エディタでindex.htmlを開き、下記の内容を入力します。
audio-recorder.js
エディタでaudio-recorder.jsを開き、下記の内容を入力します。
ポイントを下記に示します。
- isRecordingパラメーターを定義します。
- isRecordingパラメーターが1の時にバッファーにサンプルを格納します。
- バッファーの要素数が1以上の時にメッセージを送信します。
- AudioRecorderをAudio Workletとして登録します。
encode-audio.js
エディタでencode-audio.jsを開き、下記の内容を入力します。
main.js
続いてエディタでmain.jsを開き、下記の内容を入力します。
ポイントを下記に示します。
- マイクから音声を取り込むためのメディアストリームを取得します。
- 分解能やサンプリング周波数などの設定値を取得します。
- audio-recorder.jsからモジュールを読み込みます。
- メディアストリームを扱うためのノードを作成します。
- ワークレットを利用するためのノードを作成します。
- ワークレットからメッセージを受信した時のイベントハンドラを設定します。
- ワークレットからのメッセージを受信を開始します。
- メディアストリーム、ワークレット、スピーカーを接続します。なお、ワークレットは何も出力しないのでスピーカーから音声は再生されません。
- ワークレットのisRecordingパラメーターを1に設定して収録を開始します。
- ワークレットのisRecordingパラメーターを0に設定して収録を停止します。
- encodeAudio関数を呼び出して収録された音声をWAVE形式に変換します。
動作確認
index.htmlをWebブラウザで開くだけではaudioContext.audioWorklet.addModuleの呼び出しに失敗するため、下記のコマンドを実行してWebサーバーを起動します。
npx http-server -c-1
Webブラウザを開いて http://localhost:8080 にアクセスします。
マイクへのアクセスの許可を求められるので「許可」ボタンをクリックします。
「Start」ボタンをクリックすると収録を開始します。
「Stop」ボタンをクリックすると収録が停止します。
再生ボタンをクリックすると音声が再生されます。
参考Webページ
記事を作成する上で参考にしたWebページを下記に示します。
- mattdiamond/Recorderjs: A plugin for recording/exporting the output of Web Audio API nodes
- An example of a recorder based on AudioWorklet API.
おわりに
音声を収録するには MediaStream Recording API を利用する方法もあり、こちらの方が圧倒的に簡単です。MediaStream Recording APIの使い方については JavaScriptでMediaStream Recording APIを使って音声を収録する方法の記事 で紹介していますので興味がありましたら併せてご覧いただければ幸いです。最後までお読みいただきありがとうございました！
Discussion