メインコンテンツまでスキップ

Hrp.html

Hrp.jsのサンプルプログラム (hrp.html)はブラウザ上で動作するアプリケーションです。

hrp.htmlファイルをダブルクリックして直接ブラウザで開いた場合は動作しません。このファイルをWebサーバーに配置してhttps://、または、http://localhost/から開いてください。

ヒント

hrp.htmlファイルをダブルクリックして直接ブラウザで開いても動作しないのは、バージョン1.1.9以降のサンプルプログラムでは、音声処理にWeb Audio APIのAudioWorkletを使っており、ファイルを直接file://として開いた場合はこのAPIが動作しないためです。ファイルを直接開いて動作させたい場合は、DEPRECATEDフォルダにあるhrp.htmlを利用してください。ただし、このフォルダにあるファイルは、非推奨になったAPIのScriptProcessorNodeを使用しており、今後使用できなくなる可能性があります。また、今後ScriptProcessorNodeを使用したサンプルプログラムは更新されません。

注記
  • 実行にはマイページに表示されている自分のAPPKEYもしくはサービスIDとサービスパスワードを設定する必要があります
注意
  • 利用した音声認識に応じて利用料金が発生しますのでご注意ください

準備​

ここではPython3がインストールされている環境でサンプルプログラムを動作させる手順を説明します。

  1. サンプルプログラムをダウンロードし、ローカルマシンの任意のディレクトリに解凍します。
  2. 解凍したディレクトリをターミナルで開きます
  3. 以下のコマンドを実行し、HTTPサーバを起動させます。
python3 -m http.server --bind localhost 8081
  1. ブラウザで以下にアクセスし、サンプルプログラムを開きます。

http://localhost:8081/Hrp/javascript/hrp.html

以下の実行例のような画面が表示されるはずです。

実行例​

  1. ブラウザでアクセスすると以下のように表示されます。
  2. [サービス ID]に、マイページの[サービス ID]を入力します。
  3. [サービスパスワード]に、マイページの[サービスパスワード]を入力します。
  4. [サービス認証キーの取得]ボタンをクリックします。
  5. [APPKEY]にワンタイム APPKEY が入力されたことを確認します。もしくは、2～4をせずにマイページに表示されている自分のAPPKEYを直接入力します。
  6. [録音開始]ボタンをクリックします。
  7. マイクの使用許可ダイアログで[許可]をクリックします。
  8. 日本語を自由に発話します。
  9. ページの下半分に、認識結果テキストと、サーバから送られてくるイベントが次々と表示されます。

エンコーダーの設定​

バージョン 1.1.12 以降では、音声データを圧縮するエンコーダーを利用できます。エンコーダーは３種類あり、どれを使うかによって圧縮の仕方が異なります。それぞれの違いと使い方を以下に説明します。

エンコーダーの種類と圧縮形式​

Hrp.jsでは、以下の３種類のエンコーダーが利用できます。

  1. encoder_opus.js
  2. encoder_opus_ogg.js
  3. encoder_adpcm.js

これらを使う組み合わせにより、音声データの形式や圧縮率、エンコーディングの CPU 負荷などは以下のようになります。

エンコーダーコーデックコンテナ形式ビットレート圧縮率CPU 負荷
1 のみOpus独自形式24 kbps約 9.4 %高め
1 & 2OpusOgg 形式24 kbps約 9.4 %高め
3 のみADPCM独自形式64 kbps25 %非常に低い

エンコーダーをいずれも使わない場合は、音声データは圧縮されません。また、上記のいずれの場合も、非圧縮の場合と認識精度にほとんど違いはありません。処理を行う端末のスペックが満足に無い場合や CPU の余裕が足りない場合は 3 のみを使用した ADPCM を、そうでなければ 1 のみを利用した Opus を推奨します。

なお、Opus については、recorder.jsの以下の箇所を書き換えることで圧縮率を変更できます。デフォルトで 24kbps です。極端に圧縮すると認識精度も下がる可能性があるので注意してください。

		if (!encoder_ && recorder_.opusPacking && window.Encoder && window.Encoder.createOpusEncoder) {
			encoder_ = window.Encoder.createOpusEncoder(audioSamplesPerSec_, /* bitsPerSec */ 24000, /* vbr: VBR */ 1, /* application: AUDIO */ 1, /* complexity */ 10);
		}

エンコーダーの使い方​

hrp.htmlファイルのheadに、以下の記述があります。

  <script type="text/javascript" src="encoder_adpcm.js"></script>
  <script type="text/javascript" src="encoder_opus.js"></script>
  <script type="text/javascript" src="encoder_opus_ogg.js"></script>

利用するエンコーダーに応じて、この部分から必要なものを残し、不要な部分は削除してください。エンコーダーを利用しない場合は、全て削除してください。

なお、デフォルトのように３種類とも記載されている場合は、encoder_opus.jsとencoder_opus_ogg.jsを利用することになります。不要なコードが残っているとわずかながら読み込み時間が余計にかかってしまうので、encoder_opus.jsとencoder_opus_ogg.jsを利用する場合でもencoder_adpcm.jsの記述は削除することを推奨します。

ヒント

AmiVoice Tech Blogで、圧縮率による音声認識の精度の変化について検証していますので、参考にしてください。

【検証してみた！】サンプリングレートや圧縮率で音声認識の精度はどのように変化するのか!？