前置き
この記事はQiita Advent Calendar 2025 / ひとりアドベントカレンダー 分野における ふぐおの配信関係多めひとり Advent Calendar 2025 の1 日目記事となります。
こんにちは! AI Tuberなどの開発を行っているふぐおです。
AI Tuberや対話型AIを作るときに、リアルタイム音声認識が必要な場面があると思います。
色んなところでWhisperを使う記事がよく出てきますが、私が制作した対話型AI TuberはWeb Speech APIを使用しています。
技術選定の理由と実際の使い方も軽く説明していきたいと思います。
Web Speech APIを使うメリット
- 無料である
- 音声ファイルを作る必要がない
- 難しい知識が不要
- まあまあな認識精度
音声ファイルを作る必要がない
音声認識について調べると、Whisperがよく勧められています。
しかし、Whisperはマイク入力を直接受け取れません。
なので、音声ファイルを作る必要があります。この音声ファイルを作るというのがすごい面倒なんですよね。なぜなら、録音開始→会話の切れ目を認識して録音終了という処理をずっと繰り返す必要があります。
この会話の切れ目を認識するという機能はWhisper自体に無いので、自分でなんとかするしかないからです。
音声文字入力とかなら、ユーザーにボタンを押してもらえばいいんですけどね。
一方、Web Speech APIはマイクからダイレクトに入力され、会話の切れ目を自動で認識して、都度文字起こししてくれます。
デメリット
- Google Chromeがほぼ必須
ブラウザを使って文字起こしするためブラウザが必須です。ブラウザによって音声認識の精度が変わります。Google Chromeは音声をサーバーに送信しています。バックエンドに恐らくspeech recognition apiを使っているので、高品質な文字起こしができます。他のブラウザ、例えばMicrosoft Edgeとかでも使えるけど、うん。
使い方
【使い方その1】コードを書かないで使いたい場合
ゆかりネットコネクターを使うと、ソフトをインストールするだけで使えます。
後は自作のプログラムとゆかりネットコネクターをWebSocketで接続すれば、完了です。
詳しい使い方は公式サイトを見てみてください。
【使い方その2】自作する場合。
MDNを見て、実装してみてください。
一応、私なりの最小限のコードをおいておきます。
<!DOCTYPE html>
<html lang="ja">
<body>
<div id="output"></div>
<script>
const outputDiv = document.getElementById('output');
function startRecognition() {
const api = new SpeechRecognition();
api.lang = "ja";
api.onresult = (event) => {
outputDiv.innerText += event.results[0][0].transcript + "\n";
};
// 止まったら再開（ループ）
api.onend = () => api.start();
api.start();
}
startRecognition();
</script>
</body>
</html>
ミソはapi.onend = () => api.start();です。
このAPIは一つの文を文字起こししたら、終了してしまう仕様になっているので、継続的に音声認識をしたい場合は、終了したら再度再開するようにしてあげれば、永遠に音声認識してくれます。
ちなみに、このAPIはhttpsでのみ使用可能なので、サーバーに上げなければいけません。Cloudflare Workersとかを使えば、一瞬でサーバーに上げられます。
参考になりそうなredditの投稿をおいておきます。
精度はどうなの？
以下のリンクから試せるようにしておきました。
マイクを許可すると文字認識されるはずです。
上記に書いたコードをそのままデプロイしたものです。
またゆかりネットを使って配信しているゆかりネッターの方々も参考になると思います。
おまけ
ニコ生で毎日ライブコーディングしてます。来てね。