ねこの足跡R
ねこの足跡R

ねこの足跡R

複数の画像を1枚にまとめるCSSスプライトはかなり前から利用されていますが、今回はその音声ファイル版である「AudioSprite」を作成してみます。

音声ファイルの作成にはNode.jsのモジュール「audiosprite」を、再生には「Howler.js」を利用します。

  • AudioSpriteファイルを作成する
    • メリット
    • インストール
      • ffmpeg
      • audiosprite
    • 音声ファイルを結合
  • AudioSpriteを再生する
    • Howler.js
    • サンプル
    • ソースコード
      • HTML
      • JavaScript
  • 参考ページ

AudioSpriteファイルを作成する

メリット

CSSスプライトと同じですが、1つはリクエスト数を減らすことによる処理の高速化、もう1つはファイル容量の削減が期待できます。

ファイルの内容によって圧縮が効く物とそうでない物があるので一概に言えませんが、今回利用した3つのファイルを例にすると、以下の通りファイル形式によっては大きくダイエット出来ているのがわかります。

  • 結合前 (合計77,110byte)
    • puch1.mp3 - 11,284 byte
    • puch2.mp3 - 12,538 byte
    • puch3.mp3 - 53,288 byte
  • 結合後
    • Ogg形式 - 36,699 byte
    • M4A形式 - 53,199 byte
    • AC3形式 - 112,012 byte
    • MP3形式 - 112,893 byte

AC3やMP3では逆に大きくなってしまいましたね。

インストール ffmpeg

audiospriteをインストールする前にffmpegを入れる必要があります。

macOSの場合はbrewで簡単に入ります。公式ドキュメントだとOgg形式に対応するため--with-theora --with-libvorbisのオプションが必要だと書いてあるのですが、最近のバージョンであれば不要なようです。逆に付けるとエラーになるので外します（付けなくてもOgg形式も出力可能です）。

$ brew install ffmpeg

今回は4.2.2が入りました。

$ ffmpeg -version ffmpeg version 4.2.2 Copyright (c) 2000-2019 the FFmpeg developers built with Apple clang version 11.0.0 (clang-1100.0.33.17) (以下略)

Windowsの方は以下からダウンロードしたあと、環境変数PATHにインストール先のディレクトリを設定してください。

https://ffmpeg.zeranoe.com/builds/ffmpeg.zeranoe.com

audiosprite

こちらもnpmで一発です。npmが入っていない場合はNode.jsを入れると自動的に入ります。

$ npm install -g audiosprite

Node.jsのモジュールなのですが利用するのは同梱されているコマンドです。名称はそのまま「audiosprite」です。

$ audiosprite --help info: Usage: audiosprite [options] file1.mp3 file2.mp3 *.wav 音声ファイルを結合

効果音ラボさんから次のファイルをお借りしました。

  • punch1.mp3 - 小パンチ
  • punch2.mp3 - 中パンチ
  • punch3.mp3 - 大パンチ

これを1つのファイルに結合してみます。先ほどインストールした「audiosprite」コマンドに結合後のファイル名、Howler.jsをこのあと利用するという意思表示、結合したい全ファイル名をオプションとして渡します。

$ audiosprite -o punch -f howler punch1.mp3 punch2.mp3 punch3.mp3 (中略) info: All done

すると以下のように5つのファイルが新たに作成されます。……増えとるやないか(ﾟдﾟ)！

大丈夫ですｗ 3つのファイルを結合した上でさらに4種類のファイル形式でそれぞれ出力してくれています。JSONファイルは各ファイルの開始と終了のタイミングが記録してありこのあと登場する「Howler.js」で活躍します。

また冒頭でも述べましたが、Oggでは圧縮が効いて半分以下にまでダイエットすることができました。

  • 結合前 (合計77,110byte)
    • puch1.mp3 - 11,284 byte
    • puch2.mp3 - 12,538 byte
    • puch3.mp3 - 53,288 byte
  • 結合後
    • Ogg形式 - 36,699 byte
    • M4A形式 - 53,199 byte
    • AC3形式 - 112,012 byte
    • MP3形式 - 112,893 byte

AudioSpriteを再生する

Howler.js

Howler.jsの基本的な利用方法については過去の記事を参照してください。 blog.katsubemakito.net

サンプル

以下から実際のサンプルをお試しいただけます。 miku3.net

  • 3つのボタンを押すとそれぞれ違った音が再生されます。
  • 音声ファイルの読み込みが完了するまでボタンは無効状態です。
ソースコード

実際の処理は外部ファイルapp.jsで行っています。

HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AudioSprite - Howler.js Sample3</title> <style> .punch{ width:100px; height:40px; padding:10px; font-size:18px; } </style> </head> <body> <h1>AudioSprite - Howler.js Sample3</h1> <!-- 再生ボタン (ロード完了まで利用不可) --> <button id="btn-play1" type="button" class="punch" disabled>小</button> <button id="btn-play2" type="button" class="punch" disabled>中</button> <button id="btn-play3" type="button" class="punch" disabled>大</button> <script src="howler.min.js"></script> <script src="app.js"></script> </body> </html> JavaScript

インスタンスを生成する際に、audiospriteコマンドから出力されたJSONファイルを参考にしながら記述します。

// インスタンスを生成 const SE1 = new Howl({ src: [ "punch.ogg", "punch.m4a", "punch.mp3", "punch.ac3" ], sprite: { "punch1": [ 0, 407.98185941043084], // 小 "punch2": [2000, 783.6734693877552], // 中 "punch3": [4000, 1257.142857142857] // 大 }, onload: ()=>{ // ボタンを有効にする document.querySelectorAll(".punch").forEach((element)=>{ element.removeAttribute("disabled"); }); } }); /** * [event] ボタンクリック時に実行 */ // 小 document.querySelector("#btn-play1").addEventListener("click", ()=>{ SE1.play("punch1"); }); // 中 document.querySelector("#btn-play2").addEventListener("click", ()=>{ SE1.play("punch2"); }); // 大 document.querySelector("#btn-play3").addEventListener("click", ()=>{ SE1.play("punch3"); });

参考ページ

  • audiosprite - npm
  • Howler.js – GitHub
📎📎📎📎📎📎📎📎📎📎