audioSprite - オーディオファイルでスプライト!
ほほー技術的に面白い!
一つの画像に複数のアイコンを入れてスタイルシートを使って切り出すことで複数画像をダウンロードするネットワークコストを低減してくれる技術がCSSスプライトですが、画像以外でも使うと便利そうです。
Web Fontsをアイコン代わりに使ったケースも似ていますが、今回はなんと音楽でやってしまおうというライブラリaudioSpriteを紹介します。
audioSpriteは一つのMP3ファイルに複数の音(ゲームの効果音など)を入れて、指定した部分から指定した秒数だけ再生するというライブラリです。使い方は簡単で、
var player, type;
type = /Firefox/.test(navigator.userAgent) ? '.ogg' : '.mp3';
player = new audioSprite({
src: 'sprite' + type,
n: 1,
spriteLength: 1,
trimTime: 0.1
});
player.play(1);
のように記述します。Firefoxの場合はogg、それ以外のブラウザはMP3を読み込みます。そしてplayer.play(1)
で実行します(デモの場合Oneと発生します)。player.play(2)
ならTwoと言います。
効果音が全て同じ長さに区切って作れるならば利用してみると面白いと思います。指定箇所からの再生機能を使ってスプライトオーディオを実現するとは面白いアイディアですね。
audioSpriteはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
yuhiisk/audioSprite