【Tone.js】十三音鍵盤のシンセ音を変更してみる（その1）＿

「Tone.js」シリーズの続きになります。前回、十三音鍵盤を作ってみましたが、こちらの音色を変えてみたく思います！

※参考：前回の記事
【tone.js】一音鍵盤を1オクターブに拡張したらコードが冗長だったので書き直した - クモのようにコツコツと

※注意：本投稿のCodePenの鍵盤を叩くと音が鳴ります。

十三音鍵盤のコード

まずは前回のおさらい。作ったのはこちら。

「ポーン」といった感じの音ですね。

JSのコードはこちら

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

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

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

• 変数KeyにDOM#piano liを入れる。
• 変数synthにシンセ音toMasterのインスタンスnewを生成。
• for文でKeyの数ID名取得と音階代入を繰り返す。

この中で音色を決めているのはSynth()というメソッドです。

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

ここを打ちかえて音色を変えたい。

Tone.jsのチュートリアルから音色情報を調べる

Tone.jsのチュートリアルサイトでSynth()について解説しているページを見つけました！

※参考：Synth

ページの左側のサイドメニューを見ると「INSTRUMENT」というカテゴリの中の「Synth」がカレント状態でピンク色になっており、このカテゴリの他のメソッドに書き換えると音色が変更できそうです。

AMSynth()

1番目のAMSynth()に変えてみる。

「ズワ、ズワ、ズワ」といった感じの音ですね。AMシンセ。ザラついた音ですが立ち上がりが静か。

JSのコードはこちら

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

※参考：AMSynth

DuoSynth()

2番目のDuoSynth()に変えてみる。

「ピョーン、ピョーン」といった感じの音。まろやかな音色だが、高い音と低い音が同時になっている感じ。デュオ、デュエット、なるほど。

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

※参考：DuoSynth

FMSynth()

3番目のFMSynth()に変えてみる。

「ピーン」といった感じの音ですね。FMシンセ。すこしだけビリビリした音が混じっている。1番目のAMシンセと似ている。

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

※参考：FMSynth

Instrument()は鳴らない！

4番目のInstrument()に変えてみるが、これだけは音が鳴らない。 チュートリアルを見るに.toMaster()メソッドも適用されないようです。

//シンセ生成
var synth = new Tone.Instrument()
//鳴らなかった！

※参考：ちょっとこれは研究必要。後回し。

Instrument

MembraneSynth()

5番目のMembraneSynth()に変えてみる。

「チュン、チュン、チュン」といった感じの音。これは、シューティングゲームの球を打つ音に良さそうです。メンバラン？メンバー？

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

※参考：MembraneSynth

MetalSynth()

6番目のMetalSynth()に変えてみる。

「ピシー！」といった打楽器ですね。メタルパーカッション？あと、音階がないっぽい。最初の一回しか鳴らないようだ。少し特殊。

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

※参考：MetalSynth

最後に

「INSTRUMENT」カテゴリの半分くらいまできました。長くなったので今回はこの辺で。次回に続きます。ちょっと特殊なものがありますが、それは3回目以降に掘り下げようと思います。それでは！

---

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