ティラノスクリプトで WEB_AUDIO_API (JavaScript) を利用する

どうもこんにちは、シャチです。
今回はティラノスクリプトで WEB_AUDIO_API (JavaScript) を利用する方法について書きます。

WEB_AUDIO_API には３つの利用法がある

一口に WEB_AUDIO_API と言っても、３種類の利用法があります。

1. Audioオブジェクトを使った方法
2. MediaElementAudioSourceNodeクラスを使った方法
3. AudioBufferSourceNodeクラスを使った方法

この３つです。

利用法は下に行くほど面倒な手順が要ります。
ただし、できることの自由度はその逆で、上に行くほどありません。

シームレスなループ再生を望む場合、AudioBufferSourceNode 一択

ティラノスクリプトで WEB_AUDIO_API (JavaScript) を利用する意義 - ティラノスクリプトで小説動画を作る

先日の記事（↑）では WEB_AUDIO_API でしか実現できない機能があると書きました。

• シームレスなループ再生
• ゆっくりとボリュームを操作
• 一時停止と再開
• 途中から再生

この内、シームレスなループ再生だけは３番目の方法でしか実装できませんでした。

Audioオブジェクトを使った方法では、ティラノスクリプトと同等かそれ以下のことしかできず。
MediaElementAudioSourceNodeクラスを使った方法では、ループ位置を設定するための項目が存在しなかったのです。
（もしかしたら実はあるのかもしれませんが、私は見つけられませんでした）

結果として実装できたのは AudioBufferSourceNodeクラスを使った方法だけでした。

ティラノスクリプトで WEB_AUDIO_API を利用するサンプル

今回はティラノスクリプトで WEB_AUDIO_API の動作確認するためのサンプルコードを載せておきます。

用意するもの

• ティラノスクリプトの新しいゲームプロジェクト
• 適当な音声ファイル(名前を「sample.ogg」にしておきます。この段階ではまだファイルサイズは小さい方が良いです)

準備

「sample.ogg」をゲームプロジェクトの「data/sound/」フォルダーに配置したら準備完了です。
それではサンプルコードを「data/scenario/」フォルダーの「first.ks」に書いていきます。

data/scenario/first.ks

[iscript]
// ファイルパス指定
var SOUND_PATH = 'data/sound/sample.ogg';

// AudioContext 作成 (これは一回だけ作って使い回した方が良いらしい)
var context = new AudioContext();
// BufferSource 作成
var source = context.createBufferSource();

// XMLHttpRequest で sample.ogg を読み込む
var request = new XMLHttpRequest();
request.open('GET', SOUND_PATH, true);
request.responseType = 'arraybuffer';
request.send();

// 読み込み処理
request.onload = function () {
  var res = request.response;
  // 読み込んだデータ（arraybuffer）を AudioBufferSourceNode に変換する
  context.decodeAudioData(res, function (buf) {
    // AudioBufferSourceNode を BufferSource に登録する
    source.buffer = buf;
  });
};

// AudioContext と BufferSource を接続
source.connect(context.destination);
// 再生
source.start(0);
[endscript]

これで、「sample.ogg」が鳴るはずです。
もしうまく行かないようなら「sample.ogg」をもっと軽いファイルにして試してみてください。
（短い効果音のようなものがオススメです）

その理由は次回またお話しします。
お楽しみに。それでは。

P.S.私が作った最新の動画です。ぜひ一度ご覧ください。

【第六話】優しい騎士と小さな魔法使い【後編】―動画版

参考文献

アラサーリーマンの開発日誌:開発日誌4(音声の出力3)