自前で準備した音源をTone.jsで使用する方法（Tone.Player）

2019.04.02
Tone.js

Tone.jsでは、ライブラリを読むことだけで使用可能となる音源も複数準備されていますが、せっかくであれば自前の音源を使いたいもの。

こちらでは、自前で用意した音源をTone.jsで使用する方法について紹介します。

Tone.jsの基本的な使用方法については、こちらを参照してください。

Tone.Playerの公式解説はこちらから

1. Tone.Playerの使用
2. Tone.Playerの機能
3. Tone.Transportの併用

Tone.Playerの使用

簡単に言葉で説明すると、自分で準備した音源をTone.playerに接続して、そこから色々弄っていく感じです。

基本的な記述は以下です。

var player = new Tone.Player("./path/to/sample.mp3").toMaster();

1	var player = new Tone.Player("./path/to/sample.mp3").toMaster();

音源に接続した後は、player.start();で、接続した音源を再生することができます。

実際に使用した感じが以下です。

See the Pen
RddGWL by yoneshi (@yoneshi)
on CodePen.

Tone.Playerの機能

Tone.Playerでは、通常の再生に加え、以下のような機能も実装されています。

・指定した秒数以降に再生

pianomusic.start("3");

1	pianomusic.start("3");

・音声ごとの音量調整

$("#pianomusic_volup").on("click",function(){
pianomusic.volume.value += 2;
});

$("#pianomusic_voldown").on("click",function(){
pianomusic.volume.value -= 2;
});

$("#pianomusic_volup").on("click",function(){

pianomusic.volume.value += 2;

});

$("#pianomusic_voldown").on("click",function(){

pianomusic.volume.value -= 2;

});

・フェードイン、フェードアウト

$("#pianomusic_fadein").on("click",function(){
pianomusic.fadeIn = 3; 
});

$("#pianomusic_fadeout").on("click",function(){
pianomusic.fadeOut = 3; 
});

$("#pianomusic_fadein").on("click",function(){

pianomusic.fadeIn = 3;

});

$("#pianomusic_fadeout").on("click",function(){

pianomusic.fadeOut = 3;

});

・逆再生

$("#pianomusic_reverse").on("click",function(){
pianomusic.reverse = true; 
});

$("#pianomusic_reverse").on("click",function(){

pianomusic.reverse = true;

});

フェードや音量調整は簡単で便利で使いやすそうですね。

Tone.Transportの併用

Tone.Playerは、Tone.Transportの影響を受けずに独自に再生することが出来ます。

※Tone.Transportの再生については、こちらを参照してください

例えば、Codepenで「音楽を再生」→「Tone.transportをストップ」と押しても、音楽はストップしません。

See the Pen
RddGWL by yoneshi (@yoneshi)
on CodePen.

ただ、ときにはTone.Transportの再生に合わせたい場面も出てくるかもしれません。

その場合でも、Tone.TransportのタイムラインにTone.Playerを同期させることもできます。

方法は以下です。

pianomusic.sync().start()

1	pianomusic.sync().start()

同期させた後は、Tone.Transport.startやTone.Transport.stopでTone.playerを操作することができます。

また、Tone.Transportに同期させる際には、Tone.Transportの進行状態に注意する必要があります。

実例を見てみましょう。

まず、何も弄っていない状態で「同期」ボタンを押してください。

同期したタイミングは「0:0:0」が表示されるはずです。

では、一度「同期解除」ボタンで解除したあと、「Tone.Transportスタート」→「同期」の順に押してください。

同期したタイミングが進行しましたね。

※Tone.Transport.positionでTone.Transportのタイムラインの現在地点を取得することが出来ます。

それでは、少し時間を置いて同期した後に、「Tone.Transportストップ」→「Tone.Transportスタート」を実行してみてください。

「Tone.Transportスタート」を押した少し後に、音楽が再生されるはずです。

Tone.Transportをスタートさせると、実際に音声が再生されていない場面でも、着々と進行し続けているため、同期のタイミングを遅らせれば、その分遅い時間にTone.Playerの再生が行われます。

直感的に理解することは難しいかもしれませんが、Tone.Transportの再生については、こちらのページでも紹介しているので、併せて参考にしてみてください。

前の記事

Tone.jsでの同時再生、タイミングをずらした再生 2019.03.24
次の記事

自前の音源をもとに編集・新たなメロディの再生ができるTone.Sampler 2019.04.03