元派遣プログラマの自称技術系ブログです。雑記とか自作のオープンソースプロジェクトの話とか。
Javaとか組込とかできます。お仕事ください。

漢字を忘れたときに音声検索するブラウザアプリを作った

ど忘れ漢字を書くときに、音声で検索できると便利そうなので作りました。
ブラウザから音声で漢字を検索するためのツールです。

PCか新しめのAndroidスマホで使用できます。残念ながらiPhoneでは動きません。

f:id:nyatla:20200707130831p:plain

使い方

基本的な使い方

ブラウザで以下のURL開いてください。スマホならQRコード読み取りでも行けます。
nyatla.jp

緑色の画面が開いたらマイクに向かって何かを話しかけてください。
音声が認識され、漢字を含む文章が現れます。

基本的に認識しっぱなしです。次の音声が入力されると画面は更新されます。

赤色の画面の時は、ほとんどの場合ブラウザからマイクを使うことができない状態です。OSとブラウザの設定を行ってください。

上級な使い方

文章で認識させたほうが、目的の漢字が出やすくなります。
たとえば、「家」を検索したいときは、「いえ」よりも「もう家に帰りたい」と入力したほうが良いでしょう。

右上の歯車は動作状態を表しています。白黒でゆっくり回っているときに発声を始めるとうまくゆきます。
緑色の時は音を検出した状態です。赤色の時は使えませんから再起動するかあきらめてください。
f:id:nyatla:20200707110439p:plain

緑のバーは認識の進行具合を示しています。入力が正常に行われている間は伸びていきます。
f:id:nyatla:20200707110541p:plain


歯車をクリックすると一時停止します。

音声コマンド

いくつかの音声コマンドが使えます。

  1. バージョン番号アプリのバージョンを表示します。
  2. リセット ページを再読込します。
  3. QRコード アプリのURLを示すQRコードを表示します。
  4. Amazon リンク表示。アフィリエイトリンクを表示します。
  5. コロナウイルス リンク表示。厚生省のコロナウイルス対策サイトを開きます
  6. うえうえしたしたひだりみぎひだりみぎびーえー デバック用のログを表示するようになります。汚いです。
  7. ????? リンク表示。いつもお世話になってるお得情報表示サイトです。
  8. ???? PartyPallotが出現し、育ちます。

利用上の注意

  • アプリはマイクを使用します。マイクをブラウザから利用できるように、OSやアプリの設定を行ってください。
  • Android端末によっては、マイクの起動音がキコンキコンうるさいことがあります。消し方がわからないので知ってる方いたら教えて下さい。
  • 同一IPに所属する複数の端末から起動すると動作が不安定になることがあります。

技術的なあれこれ

このアプリはWeb Speech APIを使って実装しました。
Web Speech API - Web API | MDN

APIが実装されているブラウザはChrome PC/Android、それとFirefoxOperaです。

現状のベータ版APIでは、以下のように少し癖があります。

  1. 結果、エラー、状態遷移を返すコールバックの呼び出し順番がやや不規則。認識セッションを通知する???-start,???-endの外側でonresultが呼び出されたり、onerrorが不規則なタイミングで発生します。
  2. AndroidChromeとPCのChromeでresultの仕様が異なる。PCの場合にはresultに常に文字列がありますが、Androidの場合は空文字が送られてきます。通信量削減のためかもしれません。
  3. start,stopの完了コールバックのタイミングが怪しい。コールバック関数実行後でも、API側の状態遷移が不完全なことがあります。これは継続認識を実装するときに問題になりました。

これらの問題を解決するために、泥臭いif文だらけのラッパーを組む羽目になりました。書き直せばもう少し綺麗になると思いますが…。
自前のアプリに組み込むときは、APIの挙動を過信せず、Promise等でイベントを並べなおしたりしたほうが良さそうです。