howler.js の「Audio Sprites」を活用して音声ファイルの特定の部分を指定して使う

以前、JavaScript で音を鳴らすのにちょこちょこ使っていた「howler.js」に関する記事です。

●howler.js - JavaScript audio library for the modern web
　https://howlerjs.com/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c5cdb3bc-0ef1-645b-7da7-eb419f37d38e.png)

公式ページを下に進むと、howler.js の特長が列挙されています。
「シンプルな API」「様々な音声コーデックをサポート」「他に依存しないライブラリ」などと、使いやすさを示すようなものもいくつか書かれています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/02e1547d-25b4-3c00-e544-b0439bd12562.png)

個人的に気になったのは、それとは別方向の特長になりますが、「Spatial Audio」が気になりました。

さらに下に進むと、デモがいくつか掲載された部分もあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/59bbbdf1-5ace-65f7-ac63-a63107a17e96.png)

## 余談： Spatial Audio関連
自分が気になったと書いた Spatial Audio関連の話は、GitHub の以下に書かれていたりするようです。

●goldfire/howler.js: Javascript audio library for the modern web.
　https://github.com/goldfire/howler.js?tab=readme-ov-file#plugin-spatial

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7bb60eb6-c681-85c7-20a9-d7d26cea578d.png)

このあたりは、また別途見てみようと思います。

また、デモの中にも Spatial Audio関連のものがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/913afc09-5dcf-c312-98be-aed7ee24d8e2.png)

## 本題： Audio Sprites
それでは、今回の本題の「Audio Sprites」の話です。

特長を列挙していた説明の部分では、以下のように説明されているものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ccd00780-7420-ce86-617e-6944c6d044e7.png)

できることは、「1つの音声ファイルをいくつかの部分に区切って、その区切った個々の部分を、指定して再生に使える」という感じのものです。

できることを具体的に体験できる以下の公式デモがあるので、これを試してみるのが分かりやすいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/26aecc04-69aa-cbe6-70da-1fa2d066cace.png)

### 利用方法
この Audio Sprites を使う方法は、GitHub の以下の部分に書かれています。

●goldfire/howler.js: Javascript audio library for the modern web.
　https://github.com/goldfire/howler.js?tab=readme-ov-file#define-and-play-a-sound-sprite

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/dee93a98-47f7-183f-6a1f-4fe56d2138e3.png)

音声ファイルの特定の部分を、「先頭からの秒数（単位はミリ秒）＝再生開始位置」と「再生開始位置を基準にして再生する区間の秒数（単位はミリ秒）」の数値を使って指定し、その区間に名前をつけ、その名前を指定して利用するというやり方になるようです。

### 実際に試してみる
それでは、実際に試してみます。

#### 利用する音声ファイル
今回利用する音声ファイルは、Springin’ Sound Stock　の「ジングル12-リザルト-」です。
以下のページで同じものを取得できます。

●10秒BGM | 無料 BGM・効果音のフリー音源素材 | Springin’ Sound Stock
　https://www.springin.org/sound-stock/category/bgm-short/

#### HTMLファイル
今回の内容を実装した HTMLファイルを以下に示します。

お試し用に、シンプルなものにしました。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Howler.js Audio Sprites Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js"></script>
  </head>
  <body>
    <h1>Howler.js Audio Sprites Example</h1>
    <button onclick="playSound('sound1')">Sound 1</button>
    <button onclick="playSound('sound2')">Sound 2</button>
    <button onclick="playSound('sound3')">Sound 3</button>

    <script>
      var sound = new Howl({
        src: ["jingle_12.mp3"],
        sprite: {
          sound1: [0, 1000],
          sound2: [2000, 1000],
          sound3: [4000, 1000],
        },
      });

      function playSound(soundId) {
        sound.play(soundId);
      }
    </script>
  </body>
</html>
```

#### 動作テスト
上記の HTMLファイルをブラウザで開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/404d4cae-0d54-0847-2f29-2e5725667812.png)

そして、3つあるボタンをそれぞれ押すと、MP3ファイルの一部のみを簡単に再生することができました。