連載3回目の今回は、SkyWayの付加機能としてリリースされているSkyWay音声認識機能の利用方法についてお届けいたします。SkyWay音声認識機能とは、クライアント（ブラウザ側）でマイク等を通じて入力した自由発話音声を、サーバ（SkyWay側）と連携して、文字列として受け取る機能のことです。いますぐ試してみたい方は、デモサイトから試用可能です。(注：WebSocketが疎通する環境でないと、正常に動作しません)
同様の機能を実現するAPIとして、Speech Recognition APIがありますが、caniuse.comでも示されるように対応するブラウザが限定されています。SkyWay音声認識機能では、標準では対応していないFirefox等のブラウザも対応可能です。
準備
以降で記載するサンプルコードの中で、SkyWayが提供しているAPIキーが必要となります。実際にお手元で試される場合は、SkyWay公式サイトから開発者登録を行ってください。本記事のサンプルで利用するには、利用可能ドメインに「localhost」と書いた、APIキーを取得する必要があります。
今回作成するサンプル
作成するサンプルは、「音声認識を開始するボタン」と「認識結果を表示するエリア」の2要素のみで構成するシンプルな音声認識アプリケーションです。
スクリーンショットはこちらです。
SkyWay音声認識スクリーンショット
こちらを構成しているサンプルコードは以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="ja"> <head> <title>SkyWay Speech Recognition Sample</title> </head> <body> <!-- 音声認識開始用のボタン、および結果表示用のエリア --> <button id="start_rec">start</button> <div id="result"></div> <!-- 必要なライブラリ群の読み込み --> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://skyway.io/dist/msgpack.codec.js"></script> <script src="https://skyway.io/dist/libspeexdsp.js"></script> <script src="https://skyway.io/dist/resampler.min.js"></script> <script src="https://skyway.io/dist/speechrec.min.js"></script> <!-- 音声認識用のコードサンプル --> <script> SpeechRec.config({ 'SkyWayKey':'3969c30a-2789-4e46-9155-79a188256633', 'OpusWorkerUrl':'libopus.worker.js' }); $("#start_rec").click(function(){ SpeechRec.start(); console.log("音声認識を開始します"); }); SpeechRec.on_proc(function(info){ console.log(info.volume); }); SpeechRec.on_result(function(result){ console.log(result.candidates); $("#result").text(result.candidates[0].speech); }); </script> </body> </html> |
上記HTMLを任意の名前で保存してください。本記事ではsample.htmlという名前で保存します。また、htmlを格納するディレクトリと同じ階層に
の2ファイルを保存して置いてください。音声認識に必要なライブラリとなります。
動かしてみよう
既にApacheやNginxをインストールされている場合はそちらも活用できますが、今回はpythonからシンプルなWebサーバを起動してみます。コマンドはpython -m SimpleHTTPServerです。
localhostの8000番でWebサーバが起動するので、http://localhost:8000/sample.htmlへ、Chrome/Firefox/Operaのいずれかでアクセスしてみましょう。画面が表示されたら、「start」ボタンをクリックすると、マイク使用許可確認のポップアップが表示されますので、Allow/許可を押下します。その後に自由に発話して、適当なタイミングで発話をやめてください。音声認識結果が上手くいくと、数秒以内に音声認識結果の文字列が表示されます。
コードのポイント解説
SkyWay音声認識機能を利用するためには、大きく分けて2つの処理が必要になります。
1. コンフィグの設定・コールバックの設定
まずSpeechRec.config関数を利用して、SkyWayKeyおよびlibopus.worker.jsへのパスを設定します。サンプルでは、以下のようにconfigを設定しています。
|
1 2 3 4 |
SpeechRec.config({ 'SkyWayKey':'3969c30a-2789-4e46-9155-79a188256633', 'OpusWorkerUrl':'libopus.worker.js' }); |
SpeechRec.configには、その他のパラメータも設定可能であり、ドキュメントから確認できます。
次に各種コールバックの設定をします。サンプルでは2種類のコールバックを設定しています。
|
1 2 3 4 5 6 7 8 |
SpeechRec.on_proc(function(info){ console.log(info.volume); }); SpeechRec.on_result(function(result){ console.log(result.candidates); $("#result").text(result.candidates[0].speech); }); |
1つ目のon_procは、発話時の音声ボリュームを取得できた場合に発火するコールバック関数です。サンプルでは、コンソール画面に音量を表示するようにしています。
2つ目のon_resultは、音声認識結果を取得できた場合に発火するコールバック関数です。サンプルでは、結果をコンソール画面に表示する処理、および#resultで指定されるdivエリアに、音声認識結果を書き込む処理をしています。
サンプルでは分かりやすいように、コールバックを2つのみしか設定していませんが、実際にはさらに多くのコールバックを設定可能です。詳細はコールバック関数一覧をご確認ください。
2. 開始・停止の実行
コンフィグおよびコールバックの設定が完了したら、実際に音声認識を開始・停止するための関数を呼び出します。サンプルでは、#start_recボタンがクリックされた際に呼び出すSpeechRec.startが、音声認識を開始するための処理に該当します。
|
1 2 3 4 |
$("#start_rec").click(function(){ SpeechRec.start(); console.log("音声認識を開始します"); }); |
なお、開始だけではなく任意のタイミングで音声認識を終了させるSpeechRec.stop等もあります(サンプルでは省略)。その他の関数はドキュメントから確認いただけます。
おわりに
いかがでしたでしょうか。今回はSkyWayの付加機能である、音声認識機能について解説いたしました。
次回は画面共有を簡単に実現するSkyWayScreenShareライブラリについてお届けします。
