[音声認識] Webブラウザの音声認識APIを使う：ブラウザ間の差異など

本件は、JavaScript Advent Calendar 2022 の2022年12月9日づけ記事でもあります。

前日は @mariuzさんの node-firebird driver status for Firebird Advent 2022 でした。

翌日は @kawazu1008 さんの 思いつきで、HTMLコードからマテリアルアイコンを抽出して10進数に変換してみた です。

本件では、ブラウザ上の音声認識を扱います。今回のテーマは次の通りです。

• 音声認識できないブラウザと、その挙動
• EdgeおよびWebView2の挙動
• AndroidやiOS上の挙動

今回示す調査結果は、次の字幕カメラに反映されています。

CaptionCam：Webブラウザで動作する自動字幕つきカメラ
https://github.com/sksthrs/CaptionCam

なお、音声認識の動かし方については、1年ほど前に書いたので、そちらをどうぞ。

[音声認識] Webブラウザの音声認識APIを使う - mekiku.com
https://mekiku.com/view.php?a=76

音声認識できるブラウザ、できないブラウザ

2022年12月現在、音声認識できるブラウザは次のようなあたりでしょうか。他にも中国製のものがあるかもしれませんが、調査対象外です。

• Google Chrome（おそらくiOS向けを除く全て）
• Apple Safari（mac、iOS両方）
• Microsoft Edge（Windows向けのうち一部：詳細は後述）
• Android上の（おそらくは）WebViewを用いた多くのブラウザ（例：Vivaldi、Edge）

なお、少なくともAndroid上のブラウザの音声認識は、ChromeだとしてもPC上とは違う感じです（途中経過の更新が少ない）。

一方、確認した範囲で、音声認識できないブラウザは次の通りです。iOSはSafariだけ使えるというのはまだしも、SafariをPWA化すると使えなくなるのは解せません。

• Mozilla Firefox（おそらく全て）
• PC上のBlinkを使ったブラウザのうちChromeとEdge以外の大半（例：Vivaldi、Chromium）
• iOS上のSafari以外の（おそらく）全て（SafariをPWA化したものも含む）

音声認識できないブラウザの挙動

音声認識できないブラウザの、JavaScript上での挙動は、主に次のようなもののようです。

• window.SpeechRecognition と window.webkitSpeechRecognition の両方が存在しない（例：Firefox）
• SpeechRecognition.start()メソッドを呼んだ後、onstart , onaudiostart イベントは発生するものの、onspeechstart イベントは発生せず、networkエラーになる（例：PC上のVivaldiなどBlink系の多く）
• SpeechRecognition.start()メソッドを呼んだ後、onstart , onaudiostart イベントは発生するものの、onspeechstart イベントは発生せず、not-allowed または service-not-allowed エラーになる（例：iOSのSafari以外のブラウザやPWA）

なので、SpeechRecognitionが存在しない以外に、エラーイベント時にイベント引数のerrorプロパティ（文字列型）を比較することで音声認識非対応ブラウザを峻別できるようです。

なおエラーイベント時のerrorプロパティが no-speech だった場合は、単に静かだっただけなので、その後のendイベントの処理で再度start()すると音声認識を続けられます。

SpeechRecognitionErrorEvent.error - Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionErrorEvent/error

Edgeの挙動

今回、衝撃だったのは、Microsoft EdgeのWindows版で音声認識できないものがあるということでした。

次のケースでは、Edgeで音声認識を試みてもnetworkエラーになってしまいました。同じPCでChromeを使えば音声認識できるのですが、何が問題なのかは不明です。

・Core i5 2540MのPC、Windows10 32bit
・Pentium N3700のPC、Windows10 64bit

なお、Core M 5Y70でWindows10 64bitだと音声認識できます。

WebView2の挙動

Microsoft Edgeをプログラムから利用できるWebView2ですが、前述のようにEdgeで音声認識できないPCでは、当然WebView2も音声認識できません。

一方、WebView2は、音声認識をstart()するタイミングが早いとエラーになってしまうようです。さらに、PC（の性能？）によって許容されるタイミングが違う模様。こちらではカメラと音声認識を使うこととして、カメラの映像がとれてから2秒後に音声認識のstart()を呼び出すと、概ね成功するという結果が出ています。ただ、そもそもEdge自身が音声認識できないPCがあるため、WebView2を音声認識に使うのは、まだ時期尚早といったところでしょう。

Androidの挙動（2022年11月）

Android上では、なぜかVivaldiなどでも音声認識できてしまうのですが、応答はPCのChromeとは違いを感じます。

なお、これらの結果は連続認識有効（continuous=true）、途中経過出力あり（interimResults=true）という条件下のものです。

• 頻繁に確定される（1分に100回以上確定される場合も）。
• 大半は空文字列が「認識」されている。
• 確定のたびに「ピロリ」という効果音が鳴る（マナーモード設定で聞こえなくなる）
• 確定結果が空でない場合、認識結果が出てくるのがやや遅い。
• 確定結果が空でない場合、以前の認識結果も含んでいることが多い。

iOSの挙動（2022年11月）

iOS上では、Safariだけが音声認識できるようです。1年前は音声認識結果がおかしい感じでしたが、今回の調査では、確定がかなり遅いのを除けば、比較的妥当な結果が出るようです。

• 割と頻繁に途中経過が出てくるが、なかなか確定しない。
• 無音がしばらく続くと、ようやく確定する。

まとめ

ブラウザでの音声認識について調査を進め、次の結果を得ました。使えないブラウザも多いことから、使う頻度は低いかもしれませんが、使う際にはこの辺にご注意を。

• 音声認識の可否は、SpeechRecognitionオブジェクトの存在だけでなく、エラーイベントオブジェクトのerrorプロパティからも判断する必要があります。
• EdgeはWindows版でも音声認識できないPCがあるようです。
• WebView2は音声認識のタイミングが早いとエラーになるようです。
• AndroidやiOSは、音声認識の挙動がPCとは違う傾向があるようです。2022年11月現在だと、Androidが認識結果が出るのが遅いことや、確定結果に前の部分が含まれる点で、注意が必要です。

---

◀（前記事）[音声認識] Webブラウザの音声認識APIを使う ～iPhoneの挙動～
▶（次記事）[音声認識] Windows11 23H2の音声認識（ライブキャプション）を使ってみる

（一覧）[2.技術情報 (tech)]