ブラウザでライブキャプションを構築しました

Whisperは不要です。APIキーも不要です。サーバーも必要ありません。

ChromeとEdgeには、音声文字起こしエンジンが内蔵されています。私はこれを利用して、わずか30行のコードでライブキャプションを構築しました。

こちらでお試しください: https://dev48v.infy.uk/solve/day8-live-captions.html

このコードはSpeechRecognition APIを使用しています。

単なる音声入力ボックスと、本当のライブキャプションとの違いを生むのは、次の2つの設定です：

これらがないと、エンジンはポーズ（間）を置いた後にしかテキストを表示しません。これらを使うことで、リアルタイムで推測結果が表示されます。これにより、あの字幕がチカチカと更新されるエフェクトが生まれます。

長い沈黙が続くと、エンジンは停止してしまいます。これは onend イベント内でエンジンを再起動することで解決できます。このループにより、沈黙や静かな瞬間があってもキャプションが動き続けます。

このプロセスにおいて、Chromeは音声をGoogleのサーバーにストリーミングします。つまり、インターネット接続が必要です。

これはマイク以外にも活用できます。ビデオ通話やYouTubeのタブから音声をキャプチャすることも可能です。getDisplayMedia を使用して音声を取得し、文字起こしエンジンに渡します。

ブラウザには、まだ活用されていない機能がたくさんあります。ライブキャプションや音声コマンドは、わずか1行のコードで利用可能です。バックエンドは必要ありません。

出典: https://dev.to/dev48v/i-built-live-captions-in-the-browser-no-api-key-no-server-4i7n