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

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

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

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

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

余談： 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

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

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

本題： Audio Sprites

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

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

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

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

利用方法

この 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

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

実際に試してみる

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

利用する音声ファイル

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

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

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ファイルをブラウザで開きます。

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