クモのようにコツコツと

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

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

Tone.jsの続きです。前回までは和音楽器を作っていました。今回はリズム編に入って行きたく。Tone.jsのシンセ音でドラムの音をどうやって作るのか、CodePenの作品を参考に研究していきます。それでは行きましょう!

【目次】

前回記事
※参考:【Tone.js】和音楽器に五和音(テンションコード)他を追加する - クモのようにコツコツと

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

音楽の3大要素(今回からリズム編)

Tone.jsシリーズでいよいよ「音楽の三要素」の3つ目、リズム編に入る!

※参考:【Tone.js】メロディ再生、シンセ音源加工、エフェクター接続(マリオを打ち込んだ!) - クモのようにコツコツと

※参考:【Tone.js】Tone.Part()でメロディのタイミング、音の長さ、音量を調節する(マリオのゲームオーバー音) - クモのようにコツコツと

※参考:【Tone.js】和音楽器に五和音(テンションコード)他を追加する - クモのようにコツコツと

リズム音っぽい?シンセ音

Tone.jsではあらかじめ用意されているシンセ音がいくつかある。このブログで以前、一つ一つのシンセ音がどんな音かを検証する記事を書いた。その中で「これがドラム音じゃないかな?」と予想される音が2つほどあった。

メタルシンセ(MetalSynth)

一つ目が「MetalSynth」

※参考:https://tonejs.github.io/docs/MetalSynth

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

「ピシー」みたいな音が一回だけ鳴る。

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パスを取得
  • 変数DrumSampler()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