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

こちらでは、Tone.jsで音声を同時に再生する方法、タイミングをずらして再生する方法を紹介します。

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

音声の同時再生

同時再生については、基本的な使用方法を理解していれば簡単にできます。

Tone.jsは、Tone.Transportにメロディを乗せて、Transportをスタートさせることで音声が再生されます。

つまり、Tone.Transportにたくさんのメロディを乗せれば、その分再生が行われます。

また、Tone.Transportをスタートさせない限りは、Tone.Transportのスタート地点にメロディが準備されていくので、事前に色々な音声を乗せてTone.Transport.startを実行すれば、同時再生が実行されます。

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

今回は、カエルの歌ときらきら星を作成しました。

「カエルの歌」→「きらきら星」→「Transport_start」の順に実行することで、神マッシュアップが演奏されます。

タイミングをずらした再生

Tone.SequenceやTone.Partでは、音声再生の開始タイミングをずらすことも可能です。

「カエルの歌」→「カエルの歌（2小節遅れ）」→「Transport_start」と実行すれば、理想的な輪唱も演奏できます。

方法は至って簡単で「start(“1m”)」のように、start内に開始してほしいタイミングを記載するだけです。（この場合1小節遅れて再生開始します）

「カエルの歌（2小節遅れ）」ボタンは、以下のように2m遅れでスタートさせているため、綺麗なタイミングで輪唱が実装されます。

もちろん、BPMを変更した場合でも影響は無いです。（BPMの変更方法はこちら）

ちなみに、一つのボタン内に全ての式を記述すれば、一発で実行することもできます。

「同時に実行」ボタンには、Tone.SequenceやTone.Partの作成、Tone.Transport.startを全て詰め込んでいるので、一発で同時再生が実行できます。

このような記載方法でも、綺麗なタイミングで実行されるため、とても便利です。