Javascript で ogg のタグ情報を読み取る方法

今回は Javascript で ogg のタグ情報を読み取る方法についてお話しします。

audio-metadata.js を利用する

1から作るのは面倒くさいので、別の方が開発しているライブラリを利用します。

今回使うのは audio-metadata.js。
早速以下のリンクからライブラリをダウンロードしてきてください。
GitHub - tmont/audio-metadata: Extracts meta data from various audio containers

ダウンロード手順

ライブラリをティラノスクリプトにインストール

ファイルを「data/others/」フォルダーにコピペしたらインストール完了！

ちなみにこのライブラリは WTFPL の下でライセンスされています。
（WTFPL – Do What the Fuck You Want to Public License
筆者意訳：汝の為したいように為すが良い公式ライセンス）

www.wtfpl.net

開発者様に敬意を払いつつ、ありがたく使わせていただきます。

サンプル

それでは audio-metadata.js を利用するサンプルです。

用意するもの

• ティラノスクリプトの新しいゲームプロジェクト
• loopstart と loopend タグの設定された oggファイル「sample.ogg」（参考：シームレスなループ範囲の探し方 流れ編 - ティラノスクリプトで小説動画を作る）

準備

「sample.ogg」をゲームプロジェクトの「data/bgm/」フォルダーに配置します。
次に、プロジェクトの「data/others/」に「audio-metadata.min.js」をコピーしたら準備完了です。

それではサンプルコードを「data/scenario/」フォルダーの「first.ks」に書いていきます。

data/scenario/first.ks

;https://syachi.hatenablog.jp/entry/2019/07/07/174015 に載っけたサンプルを流用しています。
[loadjs storage="audio-metadata.min.js"]
[iscript]
var arrayBuffer;
tf.metadata;

function getArrayBuffer(url){
  return new Promise(function(resolve){
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
    request.onload = function () {
      arrayBuffer = request.response;
      tf.metadata = AudioMetadata.ogg(arrayBuffer);
      resolve();
    };
    request.send();
  });
}

// ファイルのパス
var SOUND_URL = 'data/bgm/sample.ogg';
getArrayBuffer(SOUND_URL);
[endscript]
ロード待ち2秒。[r]
[wait time="2000"]
loopstart:[emb exp="tf.metadata.loopstart"][r]
loopend:[emb exp="tf.metadata.loopend"]

まとめ

それでは今回の要点をまとめます。

Javascript で ogg のタグ情報を読み取るには、

audio-metadata.js を利用する

次回はいよいよ私が開発した
「ティラノスクリプトで WEB_AUDIO_API を利用するライブラリ」の紹介です。

公開まで、あともうしばしお待ちくださいませ。