前回の続きです。あと少し！
前回、BlazorというJavaScriptとC#を併用できるHTTPSウェブサーバーなフレームワークの紹介と、そのサンプルプログラムの実行をおこないました。
今回は、サンプルプログラムに、連載第３回で示したWeb Speech API による日本語音声認識機能を組み込んでみます。
Blazor + Web Speech API
サンプルプログラムに、音声認識機能を組み込みます。
連載第３回で示したソースコードが、ほぼそのまま使用できます。
まず、VoiceRecognitionプロジェクト内の「_Host.cshtml」ファイルを開き、headタグ内に以下のscriptを追記します。
これは、ほとんど第３回で示したソースコードそのままですが、一応、機能の実行部をstartVoiceRecognition()関数としてくくっています。
あと、ページ展開直後は、認識したテキストを表示するためのHTMLエレメント（result）が存在しないので、これをonresultの中だけで呼び出すように変更しました。
（というか、そもそもグローバルにいる必要がなかったわけで・・・）
console.log()や、onnomatchあたりも、ほぼいらないのでコメントアウトしています。
続いて、「Counter.razor」を開きます。
サンプルのカウンターの機能のかわりに、ボタンを押すと音声認識機能の動作を開始するように変更します。
ボタン押下時に音声認識機能を開始するためには、JavaScriptのstartVoiceRecognition()関数を呼び出す必要があります。
Blazorでは、razorコンポーネント内にJavaScriptのコードを直接記述することはできないので、JSRuntimeから呼び出す形をとります。
（ボタン押下時の参照先としては使えるのかな？でもまぁ、JSとC#の相互呼び出しを知るためにもこのような方法を取ります。）
2行目に、「@inject IJSRuntime JSRuntime;」と追記しています。
これが、JavaScriptの実行環境です。この上でJavaScriptが動作しているというイメージです。つまり、この上にはstartVoiceRecognition()関数も存在します。
ボタンを押下すると、StartVoiceRecognition()メソッドが呼び出されるように指定しています。紛らわしくしてしまいましたが、これはJavaScriptではなく、C#で実装されたメソッドになります。
先ほどのJSRuntimeを通して、C#側からJavaScriptの関数を呼び出すには、JSRuntime.InvokeVoidAsync() を使用します。
戻り値のないJavaScriptのfunctionを非同期呼び出しします。
ここでは指定していませんが、引数を与えることもできます。
以上の実装により・・・
Startボタンを押下
↓
C#のStartVoiceRecognition()メソッド呼び出し
↓
JavaScriptのstartVoiceRecognition()関数をJSRuntimeを通じて呼び出し
という動作の流れを実装できました。
あとは、認識結果の表示部として
<main id='result'></main>
を適当な場所に配置すればOKです。
以下の公開リポジトリにソースコードをプッシュしました。
ちなみに、都度プッシュしているので、ここで紹介したコードとは異なる内容・ファイル配置になっている場合がありますが、ご了承ください。
組み込んだ音声認識機能を試してみる
実装した機能を、デバッグ実行して確認してみます。
実行してCounterを開くと、次のような画面に切り替わります。
Startボタンを押すと、マイクの使用許可を求められるので、これを許可してください。
HTTPS上で動作しているため、１度許可すれば、次回以降の認識開始時に許可は求められません。（今後の仕様変更で動作が変わる場合があります）
マイクに向かって話すと、その内容が日本語音声認識され、画面上に表示されます。
最初、なぜか表示されなくて、なんでかなーと思ったらマイクがささってなかった・・・(´･ω･｀)
これで、無事に音声認識をBlazor内に取り込むことに成功しました。
このテキストはJavaScript内で保持されていますが、もちろんC#側のコードに持ち込むこともできます。
そして、C#からはEXEファイルを呼び出すこともできます。
つまりその先は・・・
言わなくても分かると思いますが、ちゃんと説明しますのでご安心を。
ではまた。
