みなさん、こんにちは！
今回は Zeroqode の人気プラグイン「Audio / Sound Player Howler.js」についてご紹介します。Howler.js は、HTML5 の Web Audio API を利用した Web アプリでのオーディオ再生を管理するための JavaScript ライブラリです。Zeroqode の「Audio / Sound Player Howler.js」プラグインでは、この Howler.js を利用して音源の管理を行っています。
この記事では「Audio / Sound Player Howler.js」の基本的な使い方についてご紹介しています。アプリでオーディオトラックを再生したい場合や、特定のイベントに応じて UI 音や通知音の挿入を検討されている方は、ぜひご参考くださいね。
また、「Audio / Sound Player Howler.js」プラグインには無料で使用可能な Lite と、有料プラグインの Pro （One time $70 or Monthly $7）の2種類が存在します。今回は、その両方を比較しつつ取り上げていきますので、プラグイン選定時の判断材料としてもご参考いただければと思います。
Lite 版
Pro 版
なお、今回執筆時点のそれぞれのバージョンは、Lite v1.12.0 、Pro v1.6.0 となっています。
1. Lite vs Pro
Lite は、基本的なオーディオ再生機能であれば充分網羅されています。音声の再生、一時停止、停止、ミュート、アンミュートなどの基本的なアクションが実行可能で、小規模なプロジェクトやシンプルなオーディオ機能が必要な場面では十分な機能を持っています。
一方、Pro の方は、より高度なオーディオ管理を可能にする機能が追加されています。例えば、音声ファイルの事前ロードや複数のトリガーイベントに対応し、音声が開始したときや再生が完了したときに特定のアクションを実行するなど、より細かいコントロールが可能です。さらに、音声ファイルのループ再生やダイナミックな音量調整もサポートされており、よりプロフェッショナルなオーディオ体験を提供することができます。
1.1. Event / Action
それぞれのプラグインが対応している Event や Action については、以下の表をご参考ください。
| カテゴリー | 機能 | 説明 | Lite | Pro |
|---|---|---|---|---|
| Event | Has Finished Playing | 音声の再生が完了した時に発火するイベント。 | ○ | ○ |
| Audio File Has Fully Loaded | 音声ファイルが完全にロードされた時に発火するイベント。 | × | ○ | |
| Has Started Playing | 音声の再生が開始した時に発火するイベント。 | × | ○ | |
| Has Been Manually Seeked | 音声が手動でシークされた時に発火するイベント。 | × | ○ | |
| Has Been Paused | 音声が一時停止された時に発火するイベント。 | × | ○ | |
| Action | Play | 音声の再生を開始するアクション。 | ○ | ○ |
| Pause | 音声の再生を一時停止するアクション。 | ○ | ○ | |
| Stop | 音声の再生を停止するアクション。 | ○ | ○ | |
| Mute | 音声をミュートするアクション。 | ○ | ○ | |
| Unmute | ミュートを解除するアクション。 | ○ | ○ | |
| Seek | 音声ファイル内の特定のポイントに移動するアクション。 | × | ○ |
1.2. Element
Lite も Pro どちらのプラグインも、基本 Element である「Howler」をページ上に配置して設定していきます。
それぞれの Element がカバーしている設定項目は以下の通りです。
| 設定項目 | 説明 | Lite | Pro |
|---|---|---|---|
| Sound File | 音声ファイルのアップロードまたはダイナミックリンクの指定。 | ○ | ○ |
| Preload | 音声ファイルの事前ロード設定。 | ○ | ○ |
| Autoplay | 自動再生設定。 | × | ○ |
| Loop | 音声ファイルのループ再生設定。 | ○（静的） | ○ （動的） |
| Force HTML5 Audio / Use HTML5 Audio | HTML5 Audio の使用選択。 | ○ | ○ |
| Playback rate | 再生速度の調整。 | ○（静的） | ○（動的） |
| Volume | 音量の調整。 | ○（静的） | ○（動的） |
| Format | 音声ファイルの形式設定。 | × | ○ |
| Maintain pitch on rate change | 再生速度変更時のピッチ維持設定。 | × | ○ |
| Limit to playing ones | 同時再生数の制限設定。 | × | ○ |
1.3. States
States については、Element の大きさ（width,height）以外は、Pro の方にしかありません。
| 状態の名前 | 説明 | Lite | Pro |
|---|---|---|---|
| is fully loaded | 音声ファイルが完全にロードされたかどうか。 | × | ○ |
| duration | 音声ファイルの全長。 | × | ○ |
| seek position | 現在の再生位置。 | × | ○ |
| duration as text | 音声ファイルの全長をテキスト形式（hh:mm:ss）で表示。 | × | ○ |
| seek position as text | 現在の再生位置をテキスト形式（hh:mm:ss）で表示。 | × | ○ |
| is muted | 音声がミュートされているかどうか。 | × | ○ |
| is playing | 音声が現在再生中かどうか。 | × | ○ |
| track image url | 音声トラックの画像URL。 | × | ○ |
なお、念のために補足しておきますと、States とは、各 Element が保持している状態値です。ここでは、Howler element が持っている状態値となりますので、値を使用したい場合は、下図のように「Element名's seek position as text(hh:mm:ss)」や「Element名's is muted」といった記述方法で参照することができます。
2. 使い方（サンプルアプリの作成）
では、実際にワークフローを設定して、サンプルアプリを作成してみたいと思います。
2.1. ページ作成（Lite）
まずは Lite で以下のような画面を作成しました。
ここではデータベースから取得した音声ファイルを、アイコンをクリックしたタイミングで「再生（Play）」「一時停止（Pause）」「停止（Stop）」「ミュート（Mute）」「アンミュート（Unmute）」することができるようにします。
Howler element の Dynamic link には、Custom state に保存している音声ファイルを設定しています。
参考までにデータベースは以下のような状態です。画面では Repeating group で音声ファイル一覧を取得してセットしています。
2.2. ワークフロー作成（Lite）
次にワークフローを設定していきます。
ページロード時にデータベースから取得したデータの音声ファイルをひとつだけ Custom state に Set state しておきます。
音声ファイルは一覧で表示していますので、音声ファイル名をクリックしたら、Custom state の中身もセットし直します。（ここでは音声ファイル名をクリックしたタイミングで別ファイルの音声が再生中の場合は停止するように「Stop」アクションを挿入しています。）
「再生（Play）」「一時停止（Pause）」「停止（Stop）」「ミュート（Mute）」「アンミュート（Unmute）」はそれぞれ、Element Actions の中にあるアクションを呼び出しています。
この他にも Lite には「Has Finished Playing」という、音声の再生が完了した時に発火するイベントがあります。例えば、音声ファイルの再生が終了したタイミングで、リプレイボタンを表示させるといったことができますね。
2.3. ページ作成（Pro）
次に Pro でできる部分をご紹介します。Pro では以下のような画面を作成しました。
Pro の場合は、States で「is playing（ 音声が現在再生中かどうか）」なども取得することができるので、再生中は「一時停止」や「停止」ボタンだけを表示させたり、「seek position（現在の再生位置）」を参照して、音声ファイルの進捗をリアルタイムで表示させるスライダーなんかも表示させることができます。
2.4. ワークフロー作成（Pro）
「再生（Play）」「一時停止（Pause）」「停止（Stop）」「ミュート（Mute）」「アンミュート（Unmute）」に関するアクションは、Lite と同様です。
Pro の場合は、Lite で網羅されているアクションに加えて、「Seek（音声ファイル内の特定のポイントに移動するアクション）」を使用することができます。今回の場合はスライダーの値が変更されたタイミングで値を取得して設定することで、音声ファイルのポイントを移動させています。
この他にも Pro にしかないイベントが複数あります。例えば、音声ファイルが完全にロードされた時に発火する「Audio File Has Fully Loaded」イベントを使えば、ファイルサイズの大きい音声ファイルの場合に、ロードアイコンを表示させるといったことも可能ですね。
| Proで使えるEvent | 説明 |
|---|---|
| Has Finished Playing | 音声の再生が完了した時に発火するイベント。 |
| Audio File Has Fully Loaded | 音声ファイルが完全にロードされた時に発火するイベント。 |
| Has Started Playing | 音声の再生が開始した時に発火するイベント。 |
| Has Been Manually Seeked | 音声が手動でシークされた時に発火するイベント。 |
| Has Been Paused | 音声が一時停止された時に発火するイベント。 |
また Pro では音量の設定も動的値を使用することができますので、スライダーを使用してユーザー自身で調整してもらうといったことも可能です。
| Proで動的に設定可能な値 |
|---|
| Loop（ループ再生） |
| Playback rat（再生速度） |
| Volum（音量） |
3. まとめ
今回は、Zeroqode の人気プラグイン Howler.js を利用した Audio / Sound Player プラグインをご紹介しました！Zeroqode の場合、万が一プラグインで不具合が発生した場合でも、サポートに問い合わせることで迅速な対応をしてもらうことができますので比較的安心です。もし、アプリでオーディオ再生を検討されている場合は、ぜひ参考にしてみてくださいね。
では、ここまでお読みいただきありがとうございました。次回もどうぞお楽しみに～！
