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

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

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

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

jukebox

zynga/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.

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

coffee-scriptはnpmで入るからいいだろということでhomebrewからhomebrew-altに移動したらしいです。なのでnodeを入れてソースからnpmを入れる。

% brew install node
% curl http://npmjs.org/install.sh | sh
% npm install coffee-script -g

元のjsがある場合はjs2coffeeでcoffee化する。

% npm install js2coffee -g
% js2coffee foo.js > foo.coffee

guardやjitterで変更を検知してcoffeeをコンパイルする。titaniumで使われてるスクリプト言語はpythonなのでGuardfileがリポジトリにあると発狂する人がいる(?)のでjitterを使ってみました。(via @yagi_)

% npm install jitter -g
% jitter coffee Resources

coffeeディレクトリ以下のファイルに変更があると、同じ名前のjsがResources以下に出来る。

最近のpowはコンフリクトしない。完。

あなたの Web サイト

powはversion毎のディレクトリを作ってlatestなものにcurrentからsymlinkが張られるのでupdateも普通にインストールするだけでいい。

$ curl get.pow.cx | sh