多すぎる音楽ファイルもひとつにまとめちゃお！ audioSpriteの扱い方。

シスコ

2017.07.05

どうもです！ダンサー兼フロントエンドエンジニアのシスコです。

最近、案件でaudioSpriteというものに初めて触れてみたので、それについて話していこうかと思いますー！

audioSpriteってなんぞや
インストールしてみる。
さっそく使ってみよう！
いざ、再生してみる！
- ボックスを用意する
- クリックしたら再生されるようにしよう
まとめ

audioSpriteってなんぞや

複数の音楽ファイルをひとつのファイルにまとめてくれる魔法のツールです。CSSスプライトの音楽バージョンだと思ってもらえれば、イメージしやすいと思います！

audioSpriteはFFmpegのラッパーとして動くツールで、動かすにはNode.jsとFFmpegが必要不可欠ですっ！

FFmpeg: クロスプラットフォームで動作する動画/音声のエンコード・デコードができるフリーソフトウェア。さまざまなファイツ形式、コーデックに対応している強力なツールです。コマンドラインから使用可能。
いくつかのフリー映像編集ツールやニコニコ動画の裏側にも、これが入ってるみたいです。

FFmpegって聞きなれないものですよね。。。自分もこのaudioSpriteに触れるまで全く知りませんでした（気になった方はぜひ調べてみてください！）。

インストールしてみる。

npmコマンドでaudiospriteをインストール！
$ npm install -g audiosprite

次にHomebrewコマンドがあるので、そちらでFFmpegをインストールするのが良さげです！
$ brew install ffmpeg --with-theora --with-libogg --with-libvorbis

これでaudioSpriteを使う準備が完了しました。
あとは、まとめたい音楽ファイルを用意するだけですね！

さっそく使ってみよう！

任意のディレクトリの中に、まとめたい複数の音楽ファイルを入れておきます！そのディレクトリに、cdコマンドでアクセスしてください。

移動ができたら、いよいよaudioSpriteを実行します！
$ audiosprite -o output_name sample01.mp3 sample02.mp3 sample03.mp3

output_nameに、出力したときの任意のファイル名を記述します。つなげたい順番に音楽ファイルを記述していけば大丈夫です！

同じディレクトリに

output_name.ac3
output_name.m4a
output_name.mp3
output_name.ogg
output_name.json

のファイルが作成されればオッケーです！

Mac環境での注意点！！: audioSpriteを実行したとき、Mac環境だと下のようなエラーが出るかと思います！
‘env: noder: No such file or directory’; こうなった場合は、次のように対処すれば大丈夫です！; 1. audioSpriteのパスを調べる
　$ which audiosprite #; 2. cdコマンドで調べたパスへ移動する（User/user_name/以下をコピペ、最後のaudiospriteも削除）; 3. 念のためバックアップをとっておく。
　$ cp audiosprite audiosprite.bak #; 4. 改行コードの書き換えを行う。
　$ tr -d \\r < audiosprite.bak >audiosprite; これでいけたかと思います！

いざ、再生してみる！

howler.js – JavaScript audio library for the modern web
GitHubはこちら：https://github.com/goldfire/howler.js

普通には再生できないので、howler.jsという、音を扱うライブラリを使い、audioSpriteでまとめたものを再生してみましょう！（IE9+からでも再生可能です！）

まずはインストール！（Bowerでもインストールできます）
$ npm install howler

ボックスを押したら対応する音楽が再生する、といった簡単なものを作ってみます！

ボックスを用意する

以下のように、適当にボックスを用意してください。

再生エリアが用意されていれば良いので、正直なんでも大丈夫です！

クリックしたら再生されるようにしよう

howler.jsを使って、クリックしたら再生されるように実装してみましょう！

var sounds = new Howl({
  src: ['assets/audio/test.mp3'],
  volume: 0.5,
  sprite: {
    shakuhachi: [0, 3000],
    impact: [9000, 5000],
    katana: [15000, 5000],
    seiya: [19000, 2000],
    topBg: [23000, 5000]
  }
});

howler.jsの設定部分になります！
‘shakuhachi’などの名前のついてるところは、自分のつけたいものに設定してください。ここは呼び出すときのKeyになります。

[0, 3000]と書かれているところ、‘0’に対応するのが各音楽のスタート地点になります。
‘3000’は再生される長さ（duration）です。
音楽のスタート位置はaudioSpriteで作成されたJSONファイルに下のように記述されているので、そこから持ってきてください。

"spritemap": {
    "audio_shakuhachi": {
      "start": 0,
      "end": 7.055986394557823,
      "loop": false
    },
    "audio_impact": {
      "start": 9,
      "end": 13.75201814058957,
      "loop": false
    },
    "audio_katana": {
      "start": 15,
      "end": 17.561065759637188,
      "loop": false
    },
    "audio_seiya": {
      "start": 19,
      "end": 21.064013605442177,
      "loop": false
    },
    "audio_top_bg": {
      "start": 23,
      "end": 55.592018140589566,
      "loop": false
    }
  }

少し気をつけるPoint！: 作成されたJSONファイルでの’end’値は、各音楽の正しい終了値ではないです！
‘end’値は一つにまとまったファイル内でのその音楽の終わりの秒数のようです。; 例：1曲目が7秒で2曲目が5秒だったとき、2曲目の’end’値は足された12秒となる。
（上のは、空白時間も入ってるのでちょっとややこくなってます。。。）; なので、再生する各音楽ファイルの情報に書かれている「再生時間」に設定してあげてください！！

最後にクリックイベントを追加してあげましょう！

/**
 * howler.js test
 */
var buttons = document.querySelectorAll('.button');
var soundid = ['shakuhachi', 'impact', 'katana', 'seiya', 'topBg'];

var sounds = new Howl({
  src: ['assets/audio/test.mp3'], // audiospriteでまとめた音楽ファイルのパス
  volume: 0.5, // 音量設定
  sprite: {
    shakuhachi: [0, 3000],
    impact: [9000, 5000],
    katana: [15000, 5000],
    seiya: [19000, 2000],
    topBg: [23000, 5000]
  }
});

/**
 * buttonクリックイベント
 */
for(var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', (e) => {
    e.preventDefault();
    sounds.play(soundid[i]); // この部分がhowler.jsで再生するコード
  });
}

sounds.play(‘最初に設定したKeyの名前’)で音楽を再生させます！

これでブラウザで確認してみてください！
さきほど作った各ボックスをクリックしたときに、対応している音を聴くことができていればオッケーです！！

howler.jsには、ほかにも、ループ再生、スタート・エンド後を検知、など、さまざまなオプション・メソッドが用意されているので、機会があったら活用してみてください！