【Tone.js】PolySynth()で和音を鳴らす（3コード楽器を作る）

Tone.jsの続きです。前回はTone.Part()でメロディのタイミング、長さ、音量を調整しました。今回は和音に挑戦。3コードを奏でる楽器を作った。それではいきましょう！

【目次】

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

PolySynth()で奏でるスリーコード楽器

今回作ったものはこちら

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

三つの鍵盤を押すとスリーコードの和音が鳴る。

HTMLのコード

<h1>和音</h1>
<p>スリーコード</p>
<ul id="piano">
   <li id="Key_C" class="w_key">C</li>
   <li id="Key_F" class="w_key">F</li>
   <li id="Key_G" class="w_key">G</li>
</ul>

以前作った「三音鍵盤」をベースにしている。

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

JSのコード

//DOM
var Key_C = document.querySelector('#Key_C');
var Key_F = document.querySelector('#Key_F');
var Key_G = document.querySelector('#Key_G');

まずはDOMの取得。このquerySelector()が前回は複数要素のliだったためquerySelectorAll()だった。それに気付かずDOMがうまく認識されずにてこずった。。

//和音
var C_chord = ['C4', 'E4', 'G4'];
var F_chord = ['F4', 'A4', 'C5']; 
var G_chord = ['G4', 'B4', 'D5'];

次にコードを配列に入れる

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

シンセを設定。Tone.js標準のSynth()だと単音しかならないので注意！PolySynth()だとコードを鳴らせる。

//イベントリスナ（C）
Key_C.addEventListener('click', function () { 
//Cメジャーが4分音符の長さ鳴る
synth.triggerAttackRelease(C_chord, '4n');
}, false);

//イベントリスナ（F）
Key_F.addEventListener('click', function () { 
//Fメジャーが4分音符の長さ鳴る
synth.triggerAttackRelease(F_chord, "4n"); 
}, false);

//イベントリスナ（G）
Key_G.addEventListener('click', function () { 
//Gメジャーが4分音符の長さ鳴る
synth.triggerAttackRelease(G_chord, "4n"); 
}, false);

for文でまとめたかったがうまくいかず時間がかかったため、とりいそぎ一つずつ設定。

triggerAttackRelease()の第1引数に先ほどのコードの変数を入れている。第2引数で音の長さ。4nで四分音符。

スリーコード（主要三和音）とは

今回はスリーコードを奏でる楽器を作った。そもそもスリーコードとは何なのか？スリーコードはジャムセッションなどでよく使われる三つの和音（コード）のこと。主要三和音といわれる。

根音（ルート）と和音（コード）

和音とは何か？和音の一番下の音を根音（ルート）といい、ルートの上に複数の音を重ねて同時に鳴らすと和音になる。ルートから離れた音の距離によって和音の響きが変わる。

• メジャーはルートから数えて（白鍵、黒鍵含む十二音階で）5番目と8番目。明るい響き
• マイナーはルートから数えて4番目、8番目。悲しい響き
• 例えばルート音ド（C）に5番目のミ、8番目のソを重ねるとCメジャーになる
• ルート音ド（C）に4番目のレ#、8番目のソを重ねるとCマイナーになる

ダイアトニックコード

ピアノの鍵盤の白鍵でド・ミ・ソといった感じに一個ずつ飛ばしに指を置き、そのまま右の白鍵に平行にズラすと「ダイアトニックコード」になる。

スリーコード

「ダイアトニック」の中で「メジャー」の響きを持つド（C）、ファ（F）、ソ（G）のコードをスリーコードという。それぞれ「トニック」「サブドミナント」「ドミナント」と呼ばれている。

• 「トニック」はド（C）の和音。安定しており曲の最初と最後を受け持ちやすい
• 「サブドミナント」はファ（F）の和音。中間的でトニックにもドミナントにも行ける
• 「ドミナント」はソ（G）の和音。不安定でトニックに帰りたがる

※参考：スリーコード(主要三和音)とは。トニック、ドミナント、サブドミナント 楽しい音楽理論講座 - Yukaギターウェブサイト

スリーコードで歌える歌！

スリーコードを鳴らせばいろいろな歌がうたえる！という素敵な動画を発見！

さあ、動画を鳴らしながら一緒に弾き語ろう！レッツプレイ♪

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

最後に

前回使ったTone.Part()で和音も鳴らせることがわかったので、今回トライしてみたが、なんと一回鳴らす分にはTone.Part()は不要でシンセをPolySynth()にするだけでよかった。

今回は和音を一つずつ設定したが、ルート音から相対的にズラしていろんな和音を鳴らす方法を考えていきたい。それではまた！！

---

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