あさりのみそしるダイアリー

非常事態が日常です…そんな時こそ声を上げないと人生ジエンドにゃん(´・ω・`)

誰だって美少女ボイスになりたいよね?(´・ω・`) その9

前回の続きです。あと少し!

www.asarinomisosoup.com

 

前回、BlazorというJavaScriptとC#を併用できるHTTPSウェブサーバーなフレームワークの紹介と、そのサンプルプログラムの実行をおこないました。

 

今回は、サンプルプログラムに、連載第3回で示したWeb Speech API による日本語音声認識機能を組み込んでみます。

 

 

Blazor + Web Speech API

サンプルプログラムに、音声認識機能を組み込みます。

連載第3回で示したソースコードが、ほぼそのまま使用できます。

www.asarinomisosoup.com

 

まず、VoiceRecognitionプロジェクト内の「_Host.cshtml」ファイルを開き、headタグ内に以下のscriptを追記します。

f:id:asarinomisosoup:20200726183600p:plain

 

これは、ほとんど第3回で示したソースコードそのままですが、一応、機能の実行部をstartVoiceRecognition()関数としてくくっています。

あと、ページ展開直後は、認識したテキストを表示するためのHTMLエレメント(result)が存在しないので、これをonresultの中だけで呼び出すように変更しました。

(というか、そもそもグローバルにいる必要がなかったわけで・・・)

 

console.log()や、onnomatchあたりも、ほぼいらないのでコメントアウトしています。

 

 

f:id:asarinomisosoup:20200726183946p:plain

続いて、「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です。

 

以下の公開リポジトリにソースコードをプッシュしました。

ちなみに、都度プッシュしているので、ここで紹介したコードとは異なる内容・ファイル配置になっている場合がありますが、ご了承ください。

dev.azure.com

 

 

組み込んだ音声認識機能を試してみる

実装した機能を、デバッグ実行して確認してみます。

 

f:id:asarinomisosoup:20200726185127p:plain

実行してCounterを開くと、次のような画面に切り替わります。

 

Startボタンを押すと、マイクの使用許可を求められるので、これを許可してください。

HTTPS上で動作しているため、1度許可すれば、次回以降の認識開始時に許可は求められません。(今後の仕様変更で動作が変わる場合があります)

 

f:id:asarinomisosoup:20200726185329p:plain

マイクに向かって話すと、その内容が日本語音声認識され、画面上に表示されます。

最初、なぜか表示されなくて、なんでかなーと思ったらマイクがささってなかった・・・(´・ω・`)

 

 

これで、無事に音声認識をBlazor内に取り込むことに成功しました。

このテキストはJavaScript内で保持されていますが、もちろんC#側のコードに持ち込むこともできます。

そして、C#からはEXEファイルを呼び出すこともできます。

 

つまりその先は・・・

言わなくても分かると思いますが、ちゃんと説明しますのでご安心を。

 

ではまた。