スマホでは、音声の自動再生が認められていないので、必ずユーザーのアクション(タップなど)が必要になります。

Audio Spriteを使えば、一度のアクションで複数の音声を使うことができます。

Audio Spriteの作成

それでは、Audio Spriteをやってみます。

gulp-audiospriteを選択

サウンドファイルを手動で連結するのは辛いので、ツールが欲しいですよね。

検索すると、いくつか見つかります。
だいたい、audiospriteをベースに作られているようです。
私は、Gulpをよく使うので、gulp-audiospriteを選んでみます。

gulp-audiosprite

Gulpを知りたい方は、こちらをどうぞ。

俺だけのGulp(ガルプ)

FFmpegのインストール

audiospriteを使うためには、FFmpegが必要らしいのでインストールします。

tonistiigi/audiosprite

を見ると、Homebrewのコマンドがあるので、それでインストールするのが良さそうです。

Audio Sprite作成する

今回は、こちらから素材を頂き、Audio Sprite作成してみます。

全曲無料・フリー音楽素材/魔王魂

Gulpが入っている前提で進めます。

適当なディレクトリを作成します。
とりあえずaudio_spriteとしました。
書き出し前のディレクトリをapp/sounds書き出し後をdist/soundsとしました。

gulp-audiospriteのインストールと実行

gulpfile.js

最後にgulpで書き出します。

gulp-audiospriteのオプション

これくらい設定すれば、良いと思います。
詳しくは、tonistiigi/audiospriteを見てください。

output 1つにまとめられる音声ファイル名です。
format 3つのライブラリに対応したJSONを出力できます(jukebox、howler、createjs)。
path JSONに書かれるパスです。
loop ループさせる場合ファイル名を書きます。

書き出されるJSONの種類は、デフォルトがjukeboxですが、更新されていないライブラリなので、howlerに変えました。
SoundJSを使う方は、createjsにすれば良いでしょう。

音を鳴らす

howler.jsを使って、音を鳴らしたいと思います。
場面が変わったら効果音が出る、という演出を想定します。
スマホで、タップしてからでないと鳴らない、という縛りから解放されましょう。

howler.js

audiospriteで書き出されたJSONがhowler.jsのoptionと少し違ったので、修正が必要でした。

sounds/sound.json

BGMが再生され、scene01、scene02で効果音が自動で流れれば、成功です。

Audio Sprite howler版 デモ

まとめ

iOSは、問題なくいけたと思います。
Androidは、Web Audio APIが使える5以降でないと、うまく動かないみたいです。

もし、動いた、動かないなど、教えていただけるとありがたいです。

また、howler.jsやSoundJS以外にもサイバーエージェントが作ったboombox.jsというものもあります。
デフォルトで、ページを非表示したときに音が止まるのは、良いですね。

CyberAgent/boombox.js

boombox-audiosprite

そんな感じで、また!