---
slug: /amivoice-api/manual/how-to-run-client-library-sample-program-hrp-js
---

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

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

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

**Note**
- 実行にはマイページに表示されている自分の API キーもしくは`サービスID`と`サービスパスワード`を設定する必要があります

**Caution**
- 利用した音声認識に応じて利用料金が発生しますのでご注意ください

## 準備

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

1. [サンプルプログラム](/amivoice-api/manual/how-to-run-client-library-sample-program)をダウンロードし、ローカルマシンの任意のディレクトリに解凍します。
2. 解凍したディレクトリをターミナルで開きます
3. 以下のコマンドを実行し、HTTPサーバを起動させます。

```
python3 -m http.server --bind localhost 8081
```

4. ブラウザで以下にアクセスし、サンプルプログラムを開きます。

[http://localhost:8081/Hrp/javascript/hrp.html](http://localhost:8081/Hrp/javascript/hrp.html)

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

## 実行例

1. ブラウザでアクセスすると以下のように表示されます。
![](/img/amivoice-api/manual/hrp-js.png)
2. [サービス ID]に、マイページの[サービス ID]を入力します。
3. [サービスパスワード]に、マイページの[サービスパスワード]を入力します。
4. [サービス認証キーの取得]ボタンをクリックします。
5. [APPKEY]に API キーが入力されたことを確認します。もしくは、2～4をせずにマイページに表示されている自分の API キーを直接入力します。
6. [音声データの送信]ボタンを`Shift`+ クリックして録音を開始します。
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 & 2        | Opus         | Ogg 形式     | 24 kbps     | 約 9.4 %  | 高め      |
| 3 のみ       | ADPCM        | 独自形式     | 64 kbps      | 25 %     | 非常に低い |

エンコーダーをいずれも使わない場合は、音声データは圧縮されません。また、上記のいずれの場合も、非圧縮の場合と認識精度にほとんど違いはありません。処理を行う端末のスペックが満足に無い場合や 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`の記述は削除することを推奨します。

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

[【検証してみた！】サンプリングレートや圧縮率で音声認識の精度はどのように変化するのか!？](https://acp.amivoice.com/blog/2025-07-29/)