Experts.jp日本に、もっとエキスパートを。(3)連載3回目の今回は、SkyWayの付加機能としてリリースされているSkyWay音声認識機能の利用方法についてお届けいたします。SkyWay音声認識機能とは、クライアント(ブラウザ側)でマイク等を通じて入力した自由発話音声を、サーバ(SkyWay側)と連携して、文字列として受け取る機能のことです。いますぐ試してみたい方は、デモサイトから試用可能です。APIがありますが、caniuse.comでも示されるように対応するブラウザが限定されています。SkyWay音声認識機能では、標準では対応していないFirefox等のブラウザも対応可能です。以降で記載するサンプルコードの中で、SkyWayが提供しているAPIキーが必要となります。実際にお手元で試される場合は、SkyWay公式サイトから開発者登録を行ってください。本記事のサンプルで利用するには、利用可能ドメインに「localhost」と書いた、APIキーを取得する必要があります。今回作成するサンプル作成するサンプルは、「音声認識を開始するボタン」と「認識結果を表示するエリア」の2要素のみで構成するシンプルな音声認識アプリケーションです。スクリーンショットはこちらです。SkyWay音声認識スクリーンショットこちらを構成しているサンプルコードは以下の通りです。--><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を格納するディレクトリと同じ階層にlibopus.jslibopus.worker.jsの2ファイルを保存して置いてください。音声認識に必要なライブラリとなります。動かしてみよう既にApacheやNginxをインストールされている場合はそちらも活用できますが、今回はpythonからシンプルなWebサーバを起動してみます。SimpleHTTPServerです。localhostの8000番でWebサーバが起動するので、http://localhost:8000/sample.htmlへ、Chrome/Firefox/Operaのいずれかでアクセスしてみましょう。画面が表示されたら、「start」ボタンをクリックすると、マイク使用許可確認のポップアップが表示されますので、Allow/許可を押下します。その後に自由に発話して、適当なタイミングで発話をやめてください。音声認識結果が上手くいくと、数秒以内に音声認識結果の文字列が表示されます。コードのポイント解説SkyWay音声認識機能を利用するためには、大きく分けて2つの処理が必要になります。コンフィグの設定・コールバックの設定まずSpeechRec.config関数を利用して、SkyWayKeyおよびlibopus.worker.jsへのパスを設定します。サンプルでは、以下のようにconfigを設定しています。});1234SpeechRec.config({'SkyWayKey':'3969c30a-2789-4e46-9155-79a188256633','OpusWorkerUrl':'libopus.worker.js'});SpeechRec.configには、その他のパラメータも設定可能であり、ドキュメントから確認できます。次に各種コールバックの設定をします。サンプルでは2種類のコールバックを設定しています。});12345678SpeechRec.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つのみしか設定していませんが、実際にはさらに多くのコールバックを設定可能です。詳細はコールバック関数一覧をご確認ください。開始・停止の実行コンフィグおよびコールバックの設定が完了したら、実際に音声認識を開始・停止するための関数を呼び出します。サンプルでは、#start_recボタンがクリックされた際に呼び出すSpeechRec.startが、音声認識を開始するための処理に該当します。});1234$("#start_rec").click(function(){SpeechRec.start();console.log("音声認識を開始します");});なお、開始だけではなく任意のタイミングで音声認識を終了させるSpeechRec.stop等もあります(サンプルでは省略)。その他の関数はドキュメントから確認いただけます。おわりにいかがでしたでしょうか。今回はSkyWayの付加機能である、音声認識機能について解説いたしました。次回は画面共有を簡単に実現するSkyWayScreenShareライブラリについてお届けします。