Tone.jsの続きです。前回はTone.Part()
を使って1〜8拍子を打ち込みました。今回も引き続きTone.Part()
を使って16ビートなどのより細かいリズムを打ち込んで見ます。跳ねた感じのシャッフルビートにもトライ。それではいきましょう!
【目次】
※参考:前回記事
【Tone.js】Tone.Part()でいろいろなリズムを鳴らす ※1〜8拍子編 - クモのようにコツコツと
※参考:Tone.jsを習得するためにやった事まとめ
qiita.com
前回のおさらい
Tone.Part()
で1〜8拍子の音を打ち込みました。奇数拍子や変拍子も意外と簡単に鳴らせて細かい設定ができそう!楽しい♪
See the Pen tone.js-DrumBeat_8beat by イイダリョウ (@i_ryo) on CodePen.
※音が鳴らない場合:https://codepen.io/i_ryo/full/NWGQEBv
JSコード(リズム部分)
let beatNumber = 8; let beatLength = 4 / beatNumber; //リズム設定 let kickRhythm = [ ['0:' + beatLength * 0 + ':0'], ['0:' + beatLength * 4 + ':0'], ]; let snareRhythm = [ ['0:' + beatLength * 2 + ':0'], ['0:' + beatLength * 6 + ':0'], ]; let hihatRhythm = []; for(i = 0; i < beatNumber ; i++) { hihatRhythm.push('0:' + beatLength * i + ':0'); }
今回は引き続きTone.Part()
を使ってさらにいろいろなリズムを打ち込んでみる。1拍子ずつ増やすのは前回までにしておいて、今回は一般的な音楽でよく使われているリズムを打ち込んでみる。
※参考:前回記事
【Tone.js】Tone.Part()でいろいろなリズムを鳴らす ※1〜8拍子編 - クモのようにコツコツと
12拍子(12/16拍子)
まず12拍子。このようなリズム
「ドツツ|タツツ|ドツツ|タツツ」という音が鳴る。
See the Pen tone.js-DrumBeat_12beat by イイダリョウ (@i_ryo) on CodePen.
※音が鳴らない場合:https://codepen.io/i_ryo/full/eYJNVjw
前回は1小節の中に8分音譜が6個(6/8拍子=ハチロク)を作ったが、今回は16部音符が12個(12/16拍子)。ここから先は16分音符なる。アクセントは6/8拍子の倍になる。
let beatNumber = 12; let beatLength = 4 / beatNumber; //リズム設定 let kickRhythm = [ ['0:' + beatLength * 0 + ':0'], ['0:' + beatLength * 6 + ':0'], ]; let snareRhythm = [ ['0:' + beatLength * 3 + ':0'], ['0:' + beatLength * 9 + ':0'], ]; let hihatRhythm = []; for(i = 0; i < beatNumber ; i++) { hihatRhythm.push('0:' + beatLength * i + ':0'); }
12拍子なのでbeatNumber
を12
に。数値的には0.333…
になる。
let beatNumber = 12; let beatLength = 4 / beatNumber;
キックは1拍目と7拍目なので0
と6
に。
let kickRhythm = [ ['0:' + beatLength * 0 + ':0'], ['0:' + beatLength * 6 + ':0'], ];
スネアは4拍目と10拍目なので3
と9
に。
let snareRhythm = [ ['0:' + beatLength * 3 + ':0'], ['0:' + beatLength * 9 + ':0'], ];
シャッフル
12拍子だとハイハットが忙しいため、ハイハットで3拍の間の1つを抜くとシャッフルビートになる。
「ドッツ|タッツ|ドッツ|タッツ」という音が鳴る。
See the Pen tone.js-DrumBeat_Shuffle by イイダリョウ (@i_ryo) on CodePen.
※音が鳴らない場合:https://codepen.io/i_ryo/full/XWXbZQJ/
先ほどより軽快な感じになった。ブギウギや早めのブルースなんかはこのシャッフルビートになる。
JSコード
let beatNumber = 12; let beatLength = 4 / beatNumber; //リズム設定 let kickRhythm = [ ['0:' + beatLength * 0 + ':0'], ['0:' + beatLength * 6 + ':0'], ]; let snareRhythm = [ ['0:' + beatLength * 3 + ':0'], ['0:' + beatLength * 9 + ':0'], ]; let hihatRhythm = []; for(i = 0; i < beatNumber ; i++) { if (i % 3 == 1) { console.log("noHihat: " + i); } else { hihatRhythm.push('0:' + beatLength * i + ':0'); } }
キックとスネアは12拍子と変更なし。ハイハットのみ変更している。
let hihatRhythm = []; for(i = 0; i < beatNumber ; i++) { if (i % 3 == 1) { console.log("noHihat: " + i); } else { hihatRhythm.push('0:' + beatLength * i + ':0'); } }
- for文の中にif文を追加
- もし
i
割る3
で1が余る場合は音を鳴らさない(代わりにコンソールにテキストnoHihat:
とi
を表示) - それ以外はハイハットを鳴らす
コンソールの表示
noHihat: 1 noHihat: 4 noHihat: 7 noHihat: 10
0からカウント開始で1、4、7、10番目(=2、5、8、11拍目)が無音になる。
16拍子(16ビート)
次は16拍子。いわゆる16ビート!(エイトビートは英語だけど16ビートは「じゅうろく」と言いたいというw)
「ドキチキタキチキ|ドキチキタキチキ」という音が鳴る。
See the Pen tone.js-DrumBeat_16beat by イイダリョウ (@i_ryo) on CodePen.
※音が鳴らない場合:https://codepen.io/i_ryo/full/JjGdLXW/
ここら辺からハイハットは「チチチチ」と言うのがキツくなってきて「チキチキ」になってくる。ドラムでは両手でハイハットを刻むことが多い。
JSコード
let beatNumber = 16; let beatLength = 4 / beatNumber; //リズム設定 let kickRhythm = [ ['0:' + beatLength * 0 + ':0'], ['0:' + beatLength * 8 + ':0'], ]; let snareRhythm = [ ['0:' + beatLength * 4 + ':0'], ['0:' + beatLength * 12 + ':0'], ]; let hihatRhythm = []; for(i = 0; i < beatNumber ; i++) { hihatRhythm.push('0:' + beatLength * i + ':0'); }
16拍子なのでbeatNumber
を16
に。数値的には0.25
になる。
let beatNumber = 16; let beatLength = 4 / beatNumber;
キックは1拍目と9拍目なので0
と8
に。
let kickRhythm = [ ['0:' + beatLength * 0 + ':0'], ['0:' + beatLength * 8 + ':0'], ];
スネアは5拍目と13拍目なので4
と12
に。
let snareRhythm = [ ['0:' + beatLength * 4 + ':0'], ['0:' + beatLength * 12 + ':0'], ];
24拍子(24/32拍子)
次は3の倍数の続きを。24拍子。
「ドキチキチキ|タキチキチキ|ドキチキチキ|タキチキチキ」という音が鳴る(ワケわからんw)
See the Pen tone.js-DrumBeat_24beat by イイダリョウ (@i_ryo) on CodePen.
※音が鳴らない場合:https://codepen.io/i_ryo/full/JjGdLbN/
ここからは32分音符ベースになる。24拍子は32分音符が1小節に24個!ここら辺になると両手でもハイハットがかなり忙しい。
JSコード
let beatNumber = 24; let beatLength = 4 / beatNumber; //リズム設定 let kickRhythm = [ ['0:' + beatLength * 0 + ':0'], ['0:' + beatLength * 12 + ':0'], ]; let snareRhythm = [ ['0:' + beatLength * 6 + ':0'], ['0:' + beatLength * 18 + ':0'], ]; let hihatRhythm = []; for(i = 0; i < beatNumber ; i++) { hihatRhythm.push('0:' + beatLength * i + ':0'); }
24拍子なのでbeatNumber
を24
に。数値的には0.1666…
になる。
let beatNumber = 24; let beatLength = 4 / beatNumber;
キックは1拍目と13拍目なので0
と12
に。
let kickRhythm = [ ['0:' + beatLength * 0 + ':0'], ['0:' + beatLength * 12 + ':0'], ];
スネアは7拍目と19拍目なので6
と18
に。
let snareRhythm = [ ['0:' + beatLength * 6 + ':0'], ['0:' + beatLength * 18 + ':0'], ];
ハネた16ビート
24拍子からハイハット3拍の真ん中1音抜いてシャッフルすると「ハネた16ビート」になる!
「ドッキチッキ|タッキチッキ|ドッキチッキ|タッキチッキ」という音が鳴る。
See the Pen tone.js-DrumBeat_Swing 16beat by イイダリョウ (@i_ryo) on CodePen.
※音が鳴らない場合:https://codepen.io/i_ryo/full/rNxVdwL/
このリズムなら両手でハイハットも現実的になってくる。リズム的にも均一な16ビートよりもグルーヴ感があり、身体を揺らしたくなる。ヒップホップやゆったりめのファンクはこのビート。
JSコード
let beatNumber = 24; let beatLength = 4 / beatNumber; //リズム設定 let kickRhythm = [ ['0:' + beatLength * 0 + ':0'], ['0:' + beatLength * 12 + ':0'], ]; let snareRhythm = [ ['0:' + beatLength * 6 + ':0'], ['0:' + beatLength * 18 + ':0'], ]; let hihatRhythm = []; for(i = 0; i < beatNumber ; i++) { if (i % 3 == 1) { console.log("noHihat: " + i); } else { hihatRhythm.push('0:' + beatLength * i + ':0'); } }
キックとスネアは24拍子と変更なし。ハイハットのみ変更している。
let hihatRhythm = []; for(i = 0; i < beatNumber ; i++) { if (i % 3 == 1) { console.log("noHihat: " + i); } else { hihatRhythm.push('0:' + beatLength * i + ':0'); } }
先ほどの12拍子と同じくi
割る3
で余りが1
の時に音を慣らさない(コンソール表示)
コンソール表示
noHihat: 1 noHihat: 4 noHihat: 7 noHihat: 10 noHihat: 13 noHihat: 16 noHihat: 19 noHihat: 22
0からのカウント開始で1、4、7、10、13、16、19、22番目(=2、5、8、11、14、17、20、23拍目)が無音になる。
32拍子(32ビート)
最後に16ビートを倍にした32ビートも試しに作ってみるw すなわち32分音符が1小節に32個。
「ドキチキチキチキ|タキチキチキチキ|ドキチキチキチキ|タキチキチキチキ」という音が鳴る(またワケわからんw)
See the Pen tone.js-DrumBeat_32beat by イイダリョウ (@i_ryo) on CodePen.
※音が鳴らない場合:https://codepen.io/i_ryo/full/ZEQGxaW/
聴いてみてわかるように、ここまで音が忙しいとリズムのメリハリがあまりなくなってくる。ハイハットと言うよりはプロペラ音?w
ドラムでこの速度のハイハットを鳴らそうとしたら両手でもキツくてロール打ち*1になる。
let beatNumber = 32; let beatLength = 4 / beatNumber; //リズム設定 let kickRhythm = [ ['0:' + beatLength * 0 + ':0'], ['0:' + beatLength * 16 + ':0'], ]; let snareRhythm = [ ['0:' + beatLength * 8 + ':0'], ['0:' + beatLength * 24 + ':0'], ]; let hihatRhythm = []; for(i = 0; i < beatNumber ; i++) { hihatRhythm.push('0:' + beatLength * i + ':0'); }
32拍子なのでbeatNumber
を32
に。数値的には0.125
になる。
let beatNumber = 32; let beatLength = 4 / beatNumber;
キックは1拍目と17拍目なので0
と16
に。
let kickRhythm = [ ['0:' + beatLength * 0 + ':0'], ['0:' + beatLength * 16 + ':0'], ];
スネアは9拍目と25拍目なので8
と24
に。
let snareRhythm = [ ['0:' + beatLength * 8 + ':0'], ['0:' + beatLength * 24 + ':0'], ];
最後に
今回はエイトビートよりもさらに細かいリズムを打ち込んでみました。for文とif文の組み合わせでシャッフルビートも表現できました。 個人的には「ハネた16ビート」がやはり好きなビートですね。ヒップホップ好きなので。
打ち込みは生演奏と違って32拍子よりもさらに細かいリズムも打ち込めます。しかしこれ以上細かいリズムにしても聞こえる音はおそらく一繋がりの「長音」に近付いていきそうに思います。
次回は「グルーヴ編」と銘打って、ハイハットやスネアなどにアクセント(強弱)を付けたり、リズムを更に微妙にズラした数値にしてみたく思います。
それではまた!
※参考:Tone.jsを習得するためにやった事まとめ
qiita.com
*1:1振りで2音鳴らす奏法。マーチ(行進曲)などで「ダラララーー…」と音を繋げて長音にするアレ