【Tone.js】シンセでリズム音を作る方法を調べた

//DOM
var Key = document.querySelectorAll('#piano li');

//シンセ生成
var synth = new Tone.MetalSynth().toMaster();

//鍵盤数分ループ
for (var i = 0; i < Key.length; i++) {
Key[i].addEventListener("click", function () { 
    //ID名取得
    var idName = this.id;
    //音階を代入
    synth.triggerAttackRelease(idName, "8n"); 
}, false);
}

変数synthでシンセ音を生成している。MetalSynth()がメタル音。

※参考：【Tone.js】十三音鍵盤のシンセ音を変更してみる（その1）＿ - クモのようにコツコツと

「メタル」といえば自分はメタルパーカッションが思い浮かぶ。80年代にドラムの横で金属を並べたメンバーが「ピシー！」「カシャー！」と金属音を鳴らしていた。

こちら、メタルパーカッションで検索したら遭遇したかっこ良すぎるライブ映像。（映画「鉄男」の音楽を作った方らしい）

※参考：映画『鉄男』とメタル・パーカッション。｜サウンドハウス

ノイズシンセ（NoiseSynth）

二つ目が「NoiseSynth」。

※参考：NoiseSynth

See the Pen tone.js-13 by イイダリョウ (@i_ryo) on CodePen.

「ザッ」と言う音が一瞬だけ鳴る…。

JSコード

//DOM
var Key = document.querySelectorAll('#piano li');

//シンセ生成
var synth = new Tone.NoiseSynth().toMaster();

//鍵盤数分ループ
for (var i = 0; i < Key.length; i++) {
Key[i].addEventListener("click", function () { 
    //ID名取得
    var idName = this.id;
    //音階を代入
    synth.triggerAttackRelease(idName, "8n"); 
}, false);
}

変数synthでシンセ音を生成している。NoiseSynth()がノイズ音。

※参考：【Tone.js】十三音鍵盤のシンセ音を変更してみる（その2） - クモのようにコツコツと

ノイズ＝騒音で「サーーーー…」と言う音*1だが、シンセ音楽の世界ではこのノイズからリズム音を作っているらしい、と言う知識があった。

スネア音の方はオシレーターを切ってノイズ音から作り出している。

実際にノイズがだんだんとスネア音になっていく過程を聞くと驚き！

※参考：ターンテーブル_スクラッチサウンド

ちなみに、ハイハットもノイズ音で作れるようだ。この動画ではスネアを作った後についでにハット音も作っている。

※参考：5_ Ultrabeat 使い方スネア／ハイハットを作成する Logic

キック音はサイン波で作る！？

なお、キックの方についてはノイズではなく、普通のサイン波を超低音にして作るようだ。

「ピー」「ピー」「ピー」「ピー」と言う電子音がだんだん重たいキックになっていく様がすごい！また、この音程を上げることでタムの音にもなりそう。

※参考：エレクトロなキック

ファミコン（8bit、チップチューン）のシンセ音は三角波でキック音やタム音を作っているようだ。（スネアはやはりノイズ音）

※参考：8bit（ファミコン風）ゲーム音楽の作り方。仕様を理解し正しく打ち込みましょう。 | 直伝・サウンドクリエイターへの道

CodePenの参考作品

Tone.jsのシンセ音を鳴らすだけではイマイチ音作りがイメージできない。CodePenでTone.js系の作品を探したらリズムに特化したものがいくつかあった！まずはこれのコードの部分を見て行きたい！

EDM

一つ目に出会ったのがこれ！

See the Pen EDM by Matt Farmer (@mrfarmer777) on CodePen.

再生ボタン（▶︎）を押すとキックとスネアが交互に鳴る。音に合わせて「Boots.」と「Cats.」が光る。

音を作る部分のコードを抜き出すとここになる。

//Creating new instruments for use in the project
var snr = new Tone.NoiseSynth().toMaster();
var bass = new Tone.MembraneSynth().toMaster();
var cym = new Tone.PluckSynth().toMaster();

変数snrがスネア音。NoiseSynth()
変数bassがキック音。MembraneSynth()
変数cymがシンバル音。PluckSynth()

スネアはやはりNoiseSynth()か。

MembraneSynth()、PluckSynth()は前回の記事で鳴らしてみた。

※参考：【Tone.js】十三音鍵盤のシンセ音を変更してみる（その2） - クモのようにコツコツと

MembraneSynth()は「チュン、チュン」した音だったがキック音になるんだ。PluckSynth()は「トッ、テッ、トッ、テッ」と言う感じ。これはシンバル音ぽくはない。

なお、「ブーツカット」はビートボックスでキックとスネアの音を出す時の発音。

Beat Machine - Visualized

二つ目はこちら。

See the Pen Beat Machine - Visualized by Jake Albaugh (@jakealbaugh) on CodePen.

再生ボタン（▶︎）を押すと、こちらの方がドラムっぽいリズム音のリズムが鳴る。

音を作る部分を抜き出すとここだった。

const ASSET_ROOT = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/';

// （中略）

class Drum {
    // （中略）
    this.sampler = new Tone.Sampler({ 'C3': ASSET_ROOT + sample }, this.init.bind(this))
    // （中略）
};

// （中略）

const drums = {
    // （中略）
  ch: new Drum('10111010101010111010110010101011', 'ch-808.wav'),
  sd: new Drum('00001000000010000000001000001000', 'sd-808.wav'),
  kd: new Drum('10000000100000001000000000010010', 'kd-808.wav')
    // （中略）
};

変数ASSET_ROOTで音声ファイルがあるディレクトリのURLパスを取得
変数DrumでSampler()でASSET_ROOTを読み込み
変数drumsで音声ファイルを読み込み

なんと、こちらはシンセではなくSampler()で音声ファイルをサンプリングしていた！残念。。

Neural Drum Machine

三例目！こちらは凄いぞ！！

See the Pen Neural Drum Machine by Tero Parviainen (@teropa) on CodePen.

こちらはドラムマシンのように打ち込まれたビートが視覚化されていて、音に合わせてモーションする。リロードボタンで色々なビートがランダムに登場し、下のツマミでテンポなどを変えることもできる。大作！！

音を作っている部分を調べると…

JSコード

let sampleBaseUrl = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699';

// （中略）

let drumKit = [
  new Tone.Players({
    high: `${sampleBaseUrl}/808-kick-vh.mp3`,
    med: `${sampleBaseUrl}/808-kick-vm.mp3`,
    low: `${sampleBaseUrl}/808-kick-vl.mp3`
  }).toMaster(),
  new Tone.Players({
    high: `${sampleBaseUrl}/flares-snare-vh.mp3`,
    med: `${sampleBaseUrl}/flares-snare-vm.mp3`,
    low: `${sampleBaseUrl}/flares-snare-vl.mp3`
  }).connect(snarePanner),
  // （中略）
];

変数sampleBaseUrlで音声ファイルがあるディレクトリのURLパスを取得
変数drumKitの値は配列で、配列の値はPlayers()でその中で音声ファイルを読み込んでいる。

Players()とはなんぞや。公式サイトによると

Tone.Players combines multiple Tone.Player objects.

翻訳すると

Tone.Playersは、複数のTone.Playerオブジェクトを組み合わせます。

※参考：Players

playerオブジェクトを組み合わせている？ではplayerオブジェクトとはなんぞや。

Tone.Player is an audio file player with start, loop, and stop functions.

翻訳すると

Tone.Playerは、開始、ループ、および停止機能を備えたオーディオファイルプレーヤーです。

※参考：Player

プレイヤーはサンプラーでもなく音声ファイルのプレイヤーか。

最後に

と言うことで、Tone.jsのリズム音の作例をいくつか見てみたが、シンセ音ではなく音声ファイルを使っているものもありました。音声ファイルを使っている事例も打ち込み方の部分がかなり参考になりそうなので出会って良かったと思います！

シンセでのリズム音作りは下記のような感じで作れそうです。

キックは普通のサイン波や三角波で作れそう。
スネアやハットはノイズで作れそう

これからやりたいこと。

シンセでドラム音を作る
ドラムパッド楽器を作る
ドラム音を打ち込む
ドラムマシンを作る

それではまた！

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

*1:いわゆる「砂嵐」。昔の放送終了後のTVやラジオの音、と言って伝わるのは四十路以上と思われるw