Tone.jsを使用した複雑な音階の再生、和音を伴うメロディの作成

Tone.jsを使用した複雑な音階の再生、和音を伴うメロディの作成

Tone.jsを使用した、少し複雑なメロディの作成方法を紹介します。

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

Advertisement

和音の再生

上記ページでは、メロディの再生を行う際にTone.Sequenceを使用しました。

が、結果から言いますと、Tone.Sequenceでは和音の再生方法は確認できませんでした。

※厳密には、別々の音源を作成し同時再生すれば、Tone.Sequenceでも和音での再生ができそうですが、一つのTone.Sequence内で和音にする方法は分かりませんでした。

 

そこで登場するのが、Tone.Partです。

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

Tone.PartもTone.Sequence同様、Tone.Part内に二つの値をセットし、startさせることで音声を再生させることが出来ます。

今回は、Tone.part内の「canon」に、カノンコードを入れてみました。

配列内の左側は、発音タイミングを、右側には音程を記載します。

発音タイミングの詳細な記載方法は以下のとおりです。

「1:0:0」:1小節目

「0:2:0」:2拍目

「0:0:2」:1拍の半分

http://webhacck.net/archives/1985658.html

今回はTone.Partを用いて、カノンコードを実装しました。

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

Tone.Partでは、デフォルトで無限ループする仕組みは無いので、ループさせたい場合には以下のように繰り返し回数を記述する必要があります。

ただし、注意点が一つあり、Tone.Partのデフォルト設定ではループが1m(1小節=4拍)毎に実行されます。

そのため、カノンコードのように1拍以上のTone.Partをループさせたい場合は、ループされるまでの範囲を延ばす必要があります。

ループされるまでの範囲の指定はloopEndで設定できます。

複雑な音階の再生

和音込みのカエルの歌を作成しました。

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

(記載が面倒になったので)途中までの段階ですが、「カエルの歌(ゴージャス)」ではメロディと和音が同時に再生されていることが確認できると思います。

発音タイミングの指定の際には少数点も使用できるので、以下のように細かいタイミングでの指定もできます。

[‘1:2:0’,[“C3″,”E4″,”G4″,”C5”]],
[‘1:2:0.5’,”B4″],
[‘1:2:1’,”A4″],
[‘1:2:1.5’,”G4″],

BPMの変更

Tone.jsではBPMを指定することもできます。

また、BPMは随時変更することが可能なため、各ボタンにBPMを指定することで、演奏途中でも早くしたり遅くしたりすることが出来ます。

Random Chordboxでは、input要素でBPMの数値を受け取り、再生速度を変更する仕組みを実装しています。