1. はじめに
近々、Webブラウザで音声認識を行うWebアプリを開発する必要があるため、Webブラウザでの音声認識方法をいくつか試してみました。
2. Webブラウザでの音声認識アプローチ
調べてみたところ、ブラウザで音声認識を行うアプローチは主に以下の3つが考えられました。今回はこれらのアプローチについて、ローカルLLM（主にQwen）の力を借りてサンプルコードを作成しました。基本的にプロンプトへの指示のみでコードを生成しているため、非効率な記述などがあるかもしれませんが、ご容赦ください。
| アプローチ | 概要 |
|---|---|
| 1. Web Speech API | ブラウザ標準で利用できる音声認識API。無料で利用可能で、ブラウザが音声データをサーバーに送信し、音声認識処理が行われます。ChromeではGoogleのサーバーが使用されます。 |
| 2. Speech to Text APIサービス | オンプレミスまたはクラウドサービス上の音声認識APIを利用します。 |
| 3. バックエンドサーバーで独自に音声認識 | 音声データをバックエンドサーバーに送信し、サーバー側で音声認識処理を行います。 |
3. アプローチ1 (Web Speech APIを利用した音声認識)
Web Speech APIを使って音声をリアルタイムでテキストに変換し、画面に表示するサンプルコードです。3秒間無音状態が続いた場合、音声入力結果を確定します。
4. アプローチ2 (ブラウザからSpeech to Text APIを呼び出す音声認識)
MediaRecorderで音声を録音し、それをSpeech to Text API（今回はOpenAIの文字起こしサービス）に送信して文字起こしを行いました。また、Web Audio APIで無音状態を検知し、1秒間無音が続いた時点でそこを区切りとし、それまでの音声をSpeech to Text APIに送信するようにしています。これにより、連続した音声認識が可能です。セキュリティ上の懸念はありますが、検証目的のため、今回はWebブラウザから直接OpenAIの文字起こしサービスを呼び出しています。
5. アプローチ3 (バックエンドサーバーで独自に音声認識)
ブラウザから音声データをバックエンドサーバーに送信し、バックエンドサーバーで音声認識プログラム（Whisper）を実行して音声認識を行います。ブラウザとバックエンドサーバー間の音声データおよび音声認識結果のやり取りにはWebSocketを使用しました。音声はMediaRecorderで録音しており、無音状態の検知もブラウザ側でWeb Audio APIを使って実現しています。
まとめ
今回はいくつかの方法で、Webブラウザでの音声認識を試しました。率直な感想として、Web Speech APIは非常に優秀だと感じました。 MediaRecorderと音声認識APIを使って独自に音声認識を実装するのは、生成AIを使っても何度か試行錯誤が必要で、比較的骨が折れる作業でした。機微な情報を扱い、外部サーバーに音声データを送信できないといった特別な事情がない限り、Web Speech APIを利用するのが賢明でしょう。
また、今回は検証できませんでしたが、WebRTCを使ってブラウザからバックエンドサーバーに音声データをリアルタイムに送信し、それをGoogle Cloud Speech-to-Textなどのストリーム対応音声認識サービスに流し込んでリアルタイム音声認識を行うアプローチも考えられます。そのうち試してみたいと思います。