Audio Sprite（オーディオスプライト）を使う

2016-12-04
Web制作

Audio Sprite（オーディオスプライト）とは、複数の音声ファイルを一つにまとめ、一度の読み込みで音声を操作し、管理するテクニックです。

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

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

Audio Spriteの作成

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

gulp-audiospriteを選択

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

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

gulp-audiosprite

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

俺だけのGulp（ガルプ）

FFmpegのインストール

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

tonistiigi/audiosprite

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

$ brew install ffmpeg --with-theora --with-libogg --with-libvorbis

Audio Sprite作成する

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

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

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

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

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

$ pwd
/Users/morisan/audio_sprite
$ npm init
（略）
$ npm install --save-dev gulp
$ npm install --save-dev gulp-audiosprite

gulpfile.js

var
gulp = require('gulp'),
audiosprite = require('gulp-audiosprite');

gulp.task('audiosprite', function() {
    gulp.src('app/sounds/*')
    .pipe(audiosprite({
        output: 'sound',
        format: 'howler',
        path:'./sounds',
        loop:['bgm'],
        log:'debug'
    }))
    .pipe(gulp.dest('./dist/sounds'));
});

gulp.task('default', ['audiosprite']);

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

$ 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

{
  "src": [//urlsからsrcに変更しました。
    "./sounds/sound.ogg",
    "./sounds/sound.m4a",
    "./sounds/sound.mp3",
    "./sounds/sound.ac3"
  ],
  "sprite": {
    "bgm": [
      0,
      81409.16099773243,
      true
    ],
    "scene1": [
      83000,
      3668.7528344671136
    ],
    "scene2": [
      88000,
      9327.165532879817
    ]
  }
}

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

Audio Sprite howler版デモ