【Tone.js】リズム系のシンセ音でドラムパッドを作った

Tone.jsの続きです。前回はシンセでリズム音を流す方法を調べました。今回はこれをもとにドラムパッドを作ってみました。それではいきましょう！

【目次】

作ってみたもの
HTMLコード
JSコード
JSコード全体
最後に

前回記事
※参考：【Tone.js】シンセでリズム音を作る方法を調べた - クモのようにコツコツと

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

作ってみたもの

作ってみたものこちら。

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

「Kick」「Snare」「Hi-Hat」の三つのパッドがある。

昔持っていたAKAIのサンプラーのパッド部分を意識してみましたw

※参考：サンプラーで無限の可能性を手に入れよう、おすすめのハードサンプラーを紹介 | 人人振動

HTMLコード

<h1>ドラムパッド</h1>
<ul id="pad">
   <li id="kick">Kick</li>
   <li id="snare">Snare</li>
   <li id="hihat">Hi-Hat</li>
</ul>

ulタグの中のliリストに#kick、#snare、#hihatのid名を振ってある。

JSコード

DOM取得

最初にパッドのDOMを取得する。

//DOM
const kick = document.querySelector('#kick');
const snare = document.querySelector('#snare');
const hihat = document.querySelector('#hihat');

変数kickで#kick、変数snareで#snare変数hihatで#hihatのDOMを取得

シンセ音設定

次にシンセ音のインスタンスを作成

//シンセ生成
const membrane = new Tone.MembraneSynth().toMaster();
const noise = new Tone.NoiseSynth().toMaster();
const metal = new Tone.MetalSynth().toMaster();

変数membraneでMembraneSynth()、変数noiseでNoiseSynth()、変数metalでMetalSynth()のインスタンスを作成。

このシンセ音は前回みたブーツカットのCodePenを参考にした。

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

しかし、ハイハットの音はあまりハイハットらしくないため、メタル音にしてみた。

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

パッドのイベント設定

パッドのクリックイベントでシンセ音を鳴らす。

まずキック音

kick.addEventListener('click', () => { 
 membrane.triggerAttackRelease('C0','2n'); 
}, false);

kickを押した時にmembraneを鳴らす。C0の高さで2分音符の長さ。

※参考：MembraneSynth

キック音をもっと伸ばしたくて2分音符まで伸ばしてみたけど、あまり変わらないっぽい。

次にスネア音

snare.addEventListener('click', () => { 
 noise.triggerAttackRelease('8n');  
}, false);

snareを押した時にnoiseを鳴らす。8分音符の長さ。どうやらノイズシンセには音階はないっぽい。

※参考：https://tonejs.github.io/docs/13.8.25/NoiseSynth

最後はハイハットの音

hihat.addEventListener('click', () => { 
 metal.triggerAttackRelease('32n'); 
}, false);

hihatを押した時にmetalを鳴らす。32分音符の長さ。

こちらは逆に「ピシー」って音をもっと短くしたくて32分音符にしてみたが、あまり変わらないっぽい。

そしてメタルシンセも音階はないっぽい。

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

JSコード全体

今回の時点ではここまで。

//DOM
const kick = document.querySelector('#kick');
const snare = document.querySelector('#snare');
const hihat = document.querySelector('#hihat');

//シンセ生成
const membrane = new Tone.MembraneSynth().toMaster();
const noise = new Tone.NoiseSynth().toMaster();
const metal = new Tone.MetalSynth().toMaster();

kick.addEventListener('click', () => { 
 membrane.triggerAttackRelease('C0','2n'); 
}, false);

snare.addEventListener('click', () => { 
 noise.triggerAttackRelease('8n');  
}, false);

hihat.addEventListener('click', () => { 
 metal.triggerAttackRelease('32n'); 
}, false);