以前、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ファイルの一部のみを簡単に再生することができました。