クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【Tone.js】Tone.Part()でいろいろなリズムを鳴らす ※12〜32拍子&シャッフル編

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拍子。このようなリズム

f:id:idr_zz:20200523201718j:plain

「ドツツ|タツツ|ドツツ|タツツ」という音が鳴る。

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拍子なのでbeatNumber12に。数値的には0.333…になる。

let beatNumber = 12;
let beatLength = 4 / beatNumber;

キックは1拍目と7拍目なので06に。

let kickRhythm = [
  ['0:' + beatLength * 0 + ':0'],
  ['0:' + beatLength * 6 + ':0'],
];

スネアは4拍目と10拍目なので39に。

let snareRhythm = [
  ['0:' + beatLength * 3 + ':0'],
  ['0:' + beatLength * 9 + ':0'],
];

シャッフル

12拍子だとハイハットが忙しいため、ハイハットで3拍の間の1つを抜くとシャッフルビートになる。

f:id:idr_zz:20200523201722j:plain

「ドッツ|タッツ|ドッツ|タッツ」という音が鳴る。

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)

f:id:idr_zz:20200523201727j:plain

「ドキチキタキチキ|ドキチキタキチキ」という音が鳴る。

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拍子なのでbeatNumber16に。数値的には0.25になる。

let beatNumber = 16;
let beatLength = 4 / beatNumber;

キックは1拍目と9拍目なので08に。

let kickRhythm = [
  ['0:' + beatLength * 0 + ':0'],
  ['0:' + beatLength * 8 + ':0'],
];

スネアは5拍目と13拍目なので412に。

let snareRhythm = [
  ['0:' + beatLength * 4 + ':0'],
  ['0:' + beatLength * 12 + ':0'],
];

24拍子(24/32拍子)

次は3の倍数の続きを。24拍子。

f:id:idr_zz:20200523201730j:plain

「ドキチキチキ|タキチキチキ|ドキチキチキ|タキチキチキ」という音が鳴る(ワケわからん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拍子なのでbeatNumber24に。数値的には0.1666…になる。

let beatNumber = 24;
let beatLength = 4 / beatNumber;

キックは1拍目と13拍目なので012に。

let kickRhythm = [
  ['0:' + beatLength * 0 + ':0'],
  ['0:' + beatLength * 12 + ':0'],
];

スネアは7拍目と19拍目なので618に。

let snareRhythm = [
  ['0:' + beatLength * 6 + ':0'],
  ['0:' + beatLength * 18 + ':0'],
];

ハネた16ビート

24拍子からハイハット3拍の真ん中1音抜いてシャッフルすると「ハネた16ビート」になる!

f:id:idr_zz:20200523201733j:plain

「ドッキチッキ|タッキチッキ|ドッキチッキ|タッキチッキ」という音が鳴る。

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個。

f:id:idr_zz:20200523201736j:plain

「ドキチキチキチキ|タキチキチキチキ|ドキチキチキチキ|タキチキチキチキ」という音が鳴る(またワケわからん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拍子なのでbeatNumber32に。数値的には0.125になる。

let beatNumber = 32;
let beatLength = 4 / beatNumber;

キックは1拍目と17拍目なので016に。

let kickRhythm = [
  ['0:' + beatLength * 0 + ':0'],
  ['0:' + beatLength * 16 + ':0'],
];

スネアは9拍目と25拍目なので824に。

let snareRhythm = [
  ['0:' + beatLength * 8 + ':0'],
  ['0:' + beatLength * 24 + ':0'],
];

最後に

今回はエイトビートよりもさらに細かいリズムを打ち込んでみました。for文とif文の組み合わせでシャッフルビートも表現できました。 個人的には「ハネた16ビート」がやはり好きなビートですね。ヒップホップ好きなので。

打ち込みは生演奏と違って32拍子よりもさらに細かいリズムも打ち込めます。しかしこれ以上細かいリズムにしても聞こえる音はおそらく一繋がりの「長音」に近付いていきそうに思います。

次回は「グルーヴ編」と銘打って、ハイハットやスネアなどにアクセント(強弱)を付けたり、リズムを更に微妙にズラした数値にしてみたく思います。

それではまた!


※参考:Tone.jsを習得するためにやった事まとめ
qiita.com

*1:1振りで2音鳴らす奏法。マーチ(行進曲)などで「ダラララーー…」と音を繋げて長音にするアレ