🚀 新規事業

audio-recorder

最終更新 2026年05月09日 / 40_新規事業/SCALE_Build/カタログ/機能集/audio-recorder.md

音声録音(MediaRecorder)

用途

ブラウザで音声録音 → Blobで保存・送信。議事録・音声メモに。

特徴

  • 録音/停止
  • リアルタイム波形表示
  • Blob出力
  • WAV変換

コード(コピペ用)

export class AudioRecorder {
  private recorder: MediaRecorder | null = null;
  private chunks: Blob[] = [];

  async start() {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    this.recorder = new MediaRecorder(stream);
    this.chunks = [];
    this.recorder.ondataavailable = (e) => this.chunks.push(e.data);
    this.recorder.start();
  }

  stop(): Promise<Blob> {
    return new Promise(resolve => {
      this.recorder!.onstop = () => {
        resolve(new Blob(this.chunks, { type: 'audio/webm' }));
        this.recorder!.stream.getTracks().forEach(t => t.stop());
      };
      this.recorder!.stop();
    });
  }
}

使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

注意事項

  • 依存パッケージを忘れず追加