HTML5は多彩な機能をWebにもたらしてくれますが、機能が多彩でブラウザによってサポートされている機能が異なるなどまだまだ課題も多いのが実情です。しかしその課題こそプログラミングによって解決できる余地がある部分でもあります。 今回はオーディオ系APIを一つにまとめて提供してくれるライブラリBoombox.jsを紹介します。

Boombox.jsのデモ

実行中です。

Boombox.jsはHTMLAudio/WebAudio/HTMLVideoの3つのAPIを透過的にサポートするライブラリです。さらにブラウザが非アクティブな時には音を消したり、同時に複数の音を鳴らすのもサポートしています。

ミックスもサポートされています。

単純な再生、停止はもちろんのこと途中から再生したりループ再生、ボリュームの調整もできます。フィルタリングもサポートされています。サポートブラウザとしてはiOS/Android/Chrome for Mac OSXなどデスクトップ、モバイル双方をサポートしています。

Boombox.jsの使い方

使い方としてはまずオプションとともにオーディオファイルを読み込みます。

var options = {
    src: [
        {
            media: 'audio/mp4',
            path: 'http://0.0.0.0:1109/m/spec/media/sound.m4a'
        }
    ]
};
boombox.load('sound', options, function (err, audio) {
    // サウンドファイルのロード
});

後は再生を実行します。

boombox.play()

ボリュームの調整は次のようになります。

boombox.get.volume(0.5)

電源のオフ。途中で再生を停止させます。

boombox.power(boombox.POWER_OFF);

WebAudio系はゲームに限らず使い道が多いでしょう。そこで各ブラウザの環境誤差をサポートするのは大変なので、そういったノウハウが詰まったBoombox.jsを使うのが良さそうです。

Boombox.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Boombox.js Single Sound - boombox.js CyberAgent/boombox.js