HTML5Experts.jp

SkyWay音声認識機能を使ってみよう！

岩瀬 義昌

SkyWay音声認識デモキャプチャ

連載： WebRTCプラットフォーム ”SkyWay” 入門 (3)

連載3回目の今回は、SkyWayの付加機能としてリリースされているSkyWay音声認識機能の利用方法についてお届けいたします。SkyWay音声認識機能とは、クライアント（ブラウザ側）でマイク等を通じて入力した自由発話音声を、サーバ（SkyWay側）と連携して、文字列として受け取る機能のことです。いますぐ試してみたい方は、デモサイトから試用可能です。(注：WebSocketが疎通する環境でないと、正常に動作しません)

同様の機能を実現するAPIとして、Speech Recognition APIがありますが、caniuse.comでも示されるように対応するブラウザが限定されています。SkyWay音声認識機能では、標準では対応していないFirefox等のブラウザも対応可能です。

準備

以降で記載するサンプルコードの中で、SkyWayが提供しているAPIキーが必要となります。実際にお手元で試される場合は、SkyWay公式サイトから開発者登録を行ってください。本記事のサンプルで利用するには、利用可能ドメインに「localhost」と書いた、APIキーを取得する必要があります。

今回作成するサンプル

作成するサンプルは、「音声認識を開始するボタン」と「認識結果を表示するエリア」の2要素のみで構成するシンプルな音声認識アプリケーションです。

スクリーンショットはこちらです。

SkyWay音声認識スクリーンショット

こちらを構成しているサンプルコードは以下の通りです。

<!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を設定しています。

SpeechRec.config({
   'SkyWayKey':'3969c30a-2789-4e46-9155-79a188256633',
   'OpusWorkerUrl':'libopus.worker.js'
});

SpeechRec.configには、その他のパラメータも設定可能であり、ドキュメントから確認できます。

次に各種コールバックの設定をします。サンプルでは2種類のコールバックを設定しています。

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が、音声認識を開始するための処理に該当します。

$("#start_rec").click(function(){
    SpeechRec.start();
    console.log("音声認識を開始します");
});

なお、開始だけではなく任意のタイミングで音声認識を終了させるSpeechRec.stop等もあります(サンプルでは省略)。その他の関数はドキュメントから確認いただけます。

おわりに

いかがでしたでしょうか。今回はSkyWayの付加機能である、音声認識機能について解説いたしました。

次回は画面共有を簡単に実現するSkyWayScreenShareライブラリについてお届けします。