ブラウザでマイク音声からwavファイルを生成する手引 1

Google Cloud Speech APIを使うときクラアイアントとサーバサイドを連携するときに必要な知識。

React ReduxでWebRTC使う前に知識をまとめておく

navigator.mediaDevices.getUserMedia()

カメラやスクリーンシェアリング、マイクのようなビデオやオーディオ入力装置の使用許可をユーザーに要求する。
最近よく見かける「通知を許可しますか？」というポップアップと同じUIです。

要求項目はこのように設定できます。

{ audio: true, video: true }

AudioContext()

AudioContextコンストラクタです。
すべての音声の再生を管理します。

AudioContext.createMediaStreamSource()

getUserMedia()で入出力デバイスの使用許可が降りるとstreamが渡されるので、AudioContextで音声ストリームを扱えるようにします。

const audioCtx = new AudioContext();
const source = audioCtx.createMediaStreamSource(stream);

AudioContext.createScriptProcessor()

直接音声データを触るために必要なオブジェクトを生成します。
bufferSizeについてはOSごとに最適なサイズがあります。
https://weblike-curtaincall.ssl-lolipop.jp/portfolio-web-sounder/webaudioapi-basic/custom

const source = context.createMediaStreamSource(stream);
const processor = context.createScriptProcessor(bufferSize, 2, 2);

source.connect(processor);
processor.connect(context.destination);

ScriptProcessorNode.onaudioprocess

イベントハンドラーです。
ScriptProcessorNodeが生きている間呼ばれます。

processor.onaudioprocess = evt => {
  console.log(evt.inputBuffer);  // AudioBuffer
};

感想

Recording Audio from the User | Web Fundamentals | Google Developersにサンプルがあるので少し触るぐらいであれば直ぐに実装できました。
次はこれを活用していきます。