Web Audio APIを使ったユーザー音声の録音

Web Audio APIを使えば音声データをブラウザ上で流したり、それにフィルタをかけたり色々なことができます。録音ももちろんできますがファイルとして保存したり、ArrayBufferにしてバックエンドに渡したい場合などは少々手順が必要です。なので、TypeScriptで書いたMediaRecorderのWrapperクラスをここにまとめておきます。

declare const MediaRecorder: any; // 2018年6月5日現在では型宣言が自前で必要

class Recorder {
    // インスタンス作成時にMediaRecorderを初期化
    private recorder = navigator.mediaDevices.getUserMedia({
        audio: true,
        video: false,
    }).then((stream) => new MediaRecorder(stream));

    public startRecording = async (): Promise<void> => {
        const recorder = await this.recorder;

        if (recorder.state === "recording") {
            throw new Error("duplicate recording");
        }

        recorder.start();
    }

    public stopRecording = async (): Promise<AudioBuffer> => {
        const recorder = await this.recorder;

        const blob: Promise<Blob> = new Promise((resolve) =>
            recorder.ondataavailable = ({ data }) => resolve(data));

        recorder.stop(); // この時点でrecorder.ondataavailableコールバックが呼ばれる

        // Blob -> ArrayBuffer

        const reader = new FileReader();
        const buffer: Promise<ArrayBuffer> = new Promise((resolve) =>
            reader.onload = () => resolve(reader.result));

        reader.readAsArrayBuffer(await blob); // loadイベントが発動しreader.resultにblobの中身が書き込まれる

        // ArrayBuffer -> AudioBuffer

        return await (new AudioContext()).decodeAudioData(await buffer);
    }
}

因みに、録音した音声を再生したいというだけであればもっと簡単です。MediaRecorderを使用せずnavigator.mediaDevices.getUserMedia()から返されたMediaStreamを引数にAudioContext.createMediaStreamSourceからSourceNodeを作るだけです。詳細はここ。