Tone.jsでUncaught Error: buffer is either not set or not loadedエラーが出る場合

Tone.jsはHTML5のオーディオ機能を簡単に利用できる優れたライブラリだ。
Tone.Playerなどでオブジェクト作成後、次の処理に移ろうとして以下のようなエラーメッセージが出力された。

Tone.js:7 Uncaught Error: buffer is either not set or not loaded
at t.BufferSource.e.assert (Tone.js:7)
at t.BufferSource.start (Tone.js:7)
at t.Player._start (Tone.js:7)
:

太字の部分をGoogle翻訳にかけてみると

不明なエラー：バッファが設定されていないか、ロードされていません

とのこと。
例として以下のようなプログラムで表示される。

サイトが表示された際に

var audio = new Tone.Player(url);

のような感じで音源を作成しておいてから、サイト上のボタンを押したら

audio.start();

で鳴らそうとする。
タイミングによっては問題なく音声が再生されるが、何も起きずエラーが出力される場合がある。
時間を置いてからボタンを押して再生すると問題なく再生されることから要するに音声データがTone.Playerオブジェクトに読み込まれる前に何かしようとしてしまったのだと気づく。

Tone.jsのドキュメント（英語）を見ると以下の記述があった。

Tone.Buffer.on（ ‘load’）の使い方が分からなかったので、Tone.Playerの第2引数に読み込まれたときにログ表示してみると読み込まれたタイミングが分かるかもしれないと考えた。

audio = new Tone.Player(url, function(){
	console.log("audio loaded.");
});

以下audioはvar audio;などとグローバル宣言した変数で、urlは”sample.wav”などのような音声ファイルの文字列とする。

実際に次の処理に移ってから数秒してから読み込みが完了していることが分かった。

最終的に読み込まれたタイミングで何か処理したかったので、以下のようなプログラムを作成した。

// 音源読み込み（例として2つの音源をaudio1とaudio2に読み込む）
let loadedCount = 0;
audio1 = new Tone.Player(url, function(){
	console.log("audio1 loaded.");
	loadedCount ++;
});
audio2 = new Tone.Player(url, function(){
	console.log("audio2 loaded.");
	loadedCount ++;
});

// 音源読み込み後にしたい処理を記述した関数
function loadedEvent(){
	if(loadedCount >= 2){	// 実行したい処理
		let reverb = new Tone.Freeverb().toMaster();
		audio1.connect(reverb).toMaster();
		audio2.start();
	}
	else{					// まだ読み込まれていない場合は再度チェック
		setTimeout( loadedEvent, 100);
	}
}

loadedEvent();

[sanko href=”https://tonejs.github.io/docs/” title=”Tone.js API ドキュメント” site=”Tone.js Docs”]