そろそろ実践投入もありうる？Audio Sprite

ご存知の通りスマホのHTML5 Auidoは現状酷い状態です。

全プラットフォーム共通で再生できるフォーマットが無かったり、iPhoneは独自仕様で自動再生はできず、ユーザー操作由来のアクションからしか再生できなかったり、複数音が再生できなかったり、Androidは2.2までは全然動かなかったり。

対応策として知られているのがCSS SpriteならぬAudio Sprite。複数の音楽ファイルをつなげて一つのファイルにし、シーク位置を制御することで好きな音を鳴らしたりループしたりする姑息なテクです。

そんな面倒なことやってられるかと思ってたんですが、そろそろAudio Sprite用のツールも揃って来ました。

jukebox

ひとつはAudio Sprite用の再生ライブラリjukebox。Zyngaが作ってるのでちょっとマジっぽいです。

var settings = { 
  spritemap: { 
    bgmusic: { 
      start: 0.00,
      end:  20.00,
      loop: true
    },
    shoot: { 
      start: 21.00,
      end: 22.50
    },
    kaching: { 
      start: 24.00,
      end: 24.75
    } 
  } 
};

var player = new jukebox.Player(settings);
player.play('bgmusic'); // faster, sprite entry's id
player.play(12.34); // slower, will search for matching sprite entry

一つにまとまった音楽ファイルと、それぞれの曲のstart位置、end位置、loopの有無の情報を元に簡単に再生できます。勿論AndroidでのFlashへのFallbackもやってくれます。

audiosprite

tonistiigi/audiosprite

もう一つが複数の音楽ファイルを一つにまとめる面倒な作業をやってくれるaudiospriteというnodeのライブラリ。

中身はffmpegのラッパーで、ファイルを全部をくっつけた上に各種プラットフォームをカバーするための複数種類のフォーマットで音楽ファイルを作成してくれます。更にjukeboxで使うための上記で言うsettingsにあたるデータをjsonで出力してくれるという気の効きよう。

iPhoneで一番パフォーマンスが出るCore Audio Format(caf)まで作ってくれるところが泣けます。

% audiosprite --help
info: Usage: audiosprite [options] file1.mp3 file2.mp3 *.wav
info: Options:
  --output, -o      Name for the output file.                             [default: "output"]
  --log, -l         Log level (debug, info, notice, warning, error).      [default: "info"]
  --autoplay, -a    Autoplay sprite name                                  [default: null]
  --silence, -s     Add special "silence" track with specified duration.  [default: 0]
  --samplerate, -r  Sample rate.                                          [default: 44100]
  --channels, -c    Number of channels (1=mono, 2=stereo).                [default: 1]
  --help, -h        Show this help message.

実際試したところ、ちょろっと音を出したい用途には使えそうです。しかし、スマホでネット上からダウンロードして鳴らすにはこのままでは駄目で、大きなファイルになった場合の動作が不安定でした。ローカルに何とかキャッシュする方法を探れば行けるかもしれませんが、僕が試したかった怖話のような大容量の音楽ファイルを鳴らす用途には難しそうです。

komagataのブログ