SoundJSでオーディオスプライトが使えるようになります。GitHubのNEXTバージョンにこの機能が加えられました。オーディオスプライトは、CSSスプライトやスプライトシートのように、複数のオーディオ素材をひとつのファイルにまとめて扱います。CreateJS Blog「Audio Sprite Support Added To SoundJS」にもとづいてご紹介します。

01 オーディオスプライトのよいところ

1. iOS5のような、オーディオのインスタンスがひとつしか扱えない古いブラウザやデバイスでも、より確かなサポートが得られます。
2. Internet Explorer 9のaudio要素の制限が避けられます。これまでは、1度に読込めるサウンドの数にかぎりがありました。
3. 複数のサウンドを1回のリクエストで素速く読込めます。とくに、モバイルデバイスでは、1ファイルごとのネットワークのラウンドトリップには時間がかかります。
4. ファイルサイズを小さくできるので、読込みが速められます。今のところ、簡単なテストではつぎのような結果が得られました。最適化と圧縮を工夫すれば、さらに改善できると思われます。
   • 合わせて30KBの3つのoggがひとつの21KBのファイルになりました。
   • 同じ3つのサウンドをmp3形式にしたところ、合わせて33KBのファイルが45KBに膨らみました。

02 オーディオスプライトの悪いところ

1. HTMLまたはFlashオーディオを用いたとき、滑らかなループ再生ができるとはかぎりません。スムーズに繰返したいサウンドを、Web Audioがサポートされないブラウザで再生したい場合には、オーディオスプライトは避けるのが望ましいです。
2. HTMLオーディオは、とくに初回は直ちに再生できるとはかぎりません。ブラウザによっては(たとえばChrome)、HTMLオーディオを再生する分だけ読込みます。そのため、“canplaythrough”イベントにより、オーディオがロードされたかを確かめます。オーディオスプライトでは、再生するサウンドにジャンプするので、そのオーディオはダウンロードできていないことがあります。
3. 処理が増えます。とくに、再生の初めと継続の時間を定めておかなければなりません。複数のオーディオファイルをまとめて扱う手間がかかります。
4. オーディオファイルは、コアのソースを共有します。したがって、5つのサウンドをもつスプライトであっても、同時再生できるインスタンスがふたつなら、一度にふたつのサウンドしか再生できません。

03 オーディオスプライトのつくり方

1. 複数のオーディオファイルをひとつのファィルにまとめます。各オーディオクリップの間には、少なくとも300msの無音を挟むのがよいでしょう。これにより、HTMLのaudio要素の正確さが増し、後のサウンドクリップが一部再生されてしまう問題が避けられます。
2. つぎのようなコードを書きます。
   

   createjs.Sound.initializeDefaultPlugins(); var assetsPath = "./assets/"; var manifest = [{   src:"MyAudioSprite.ogg",   data: {     audioSprite: [       {id:"sound1", startTime:0, duration:500},       {id:"sound2", startTime:1000, duration:400},       {id:"sound3", startTime:1700, duration: 1000}     ]}   } ]; createjs.Sound.alternateExtensions = ["mp3"]; createjs.Sound.addEventListener("fileload", loadSound); createjs.Sound.registerManifest(manifest, assetsPath); // 読込み終えたら createjs.Sound.play("sound2");

3. SoundJSがオーディオスプライトを扱えるようになったことで、さらによいことがあります。soundInstanceオブジェクトのサウンドも、オーディオスプライトのように開始時と再生時間を使って再生できるのです。

   createjs.Sound.play("MyAudioSprite", {startTime: 1000, duration: 400});

04 SoundJS次期バージョン候補

SoundJSライブラリの次期バージョン候補(NEXT)は、GitHubに公開されました。また、ご意見やご質問はCommunity forumsで受付けています。

作成者: 野中文雄
作成日: 2014年4月24日