【Tone.js】和音鍵盤に三和音（トライアド・コード）を追加する

Tone.jsの続きです。前回は、コードタイプを増やしやすいようにリファクタリングをしました。今回はいよいよコードタイプを増やしていきたく思います。それではいきましょう！

【目次】

前回のおさらい
レイアウト変更
コードについて再研究
三和音（トライアド・コード）を追加
最後に

※参考：前回記事
【Tone.js】コード音が読みやすくなるようにリファクタリング - クモのようにコツコツと

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

前回のおさらい

前回の形は。

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

コードの詳細は前回の記事を参照

※参考：前回記事
【Tone.js】コード音が読みやすくなるようにリファクタリング - クモのようにコツコツと

レイアウト変更

まず、このままコードタイプが増えることを想像すると、コード切り替えボタンが上にあるとどんどん鍵盤の位置が下に下がっていきそう。

このようにレイアウトを変更してみた。

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

HTMLコード

<h1>和音鍵盤</h1>
<ul id="piano">
   <li id="C4" class="w_key">C</li>
   <li id="Cs4" class="b_key"></li> 
   <li id="D4" class="w_key">D</li>
   <li id="Ds4" class="b_key"></li> 
   <li id="E4" class="w_key">E</li>
   <li id="F4" class="w_key">F</li>
   <li id="Fs4" class="b_key"></li>
   <li id="G4" class="w_key">G</li>
   <li id="Gs4" class="b_key"></li>
   <li id="A4" class="w_key">A</li>
   <li id="As4" class="b_key"></li>
   <li id="B4" class="w_key">B</li>
   <li id="C5" class="w_key">C</li>
</ul>
<div id="code_type">
<p id="code_type_text"></p>
<form name="code_types" class="">
    <dl>
        <dt>三和音(トライアド)</dt>
        <dd>
            <label><input type="radio" id="code_M" name="code_type" value="メジャー(M)" onchange="codeTypeSelect()" checked>M</label>
             <label><input type="radio" id="code_m" name="code_type" value="マイナー(m)" onchange="codeTypeSelect()">m</label>
        </dd>
    </dl>
</form>
</div>

#piano（鍵盤）と#code_type（コード切り替え）を上下入れ替え
#code_typeの中、#code_type_text（コード名表示）とformタグ（コード切り替えボタン）も上下入れ替え
#code_type_textのコード名（inputタグのvalue属性）表示を略称ではなく日本語名に（カッコで略称も表記）
formタグの中、dlリストにして、dtを「三和音：」に、dd内のlabelの値は日本語名ではなく略称にする

コード切り替えボタンを一番下にすることでコードタイプの数が増えてもレイアウト全体の影響が低くなったと思う。

コードについて再研究

さて、自分は数年前に打ち込み音楽を作りたくて楽典の本を見ながらコード進行を調べていた。その頃に作った曲はこちら。

この曲はこちらの記事でも触れた「ダイアトニックコード（白鍵のみで構成されたコード）を使って構成している。

※参考：【Tone.js】PolySynth()で和音を鳴らす（3コード楽器を作る） - クモのようにコツコツと

あれから数年、コードの知識もだいぶ曖昧になってきたため、今回改めて楽典やいろんなネット記事を読んで調べなおした。

コードについてはいろいろな解説の切り口があったが、マイナー系、メジャー系に属さない三和音があったり、メジャー系の上に乗せる4音目がマイナーか、メジャーかで響きが変わったり、となかなか簡単には理解できない。

その中でもこちらのサイトの解説はわかりやすかったです！

※参考：3.コードの知識を学ぼう！ | ポップスのピアノ伴奏を作ろう！

「和音が何和音で構成されているか」というシンプルな切り口

三和音：トライアド・コード
四和音：セブンス・コード
五和音：テンション・コード

この記事の内容に即してコードを追加していきたいと思う！

三和音（トライアド・コード）を追加

それでは早速、三和音にコードを追加していく。こちらの記事を参考にする。

※参考：3-2. トライアド・コードの種類と押さえ方を知ろう | ポップスのピアノ伴奏を作ろう！

三和音の総称を「トライアド・コード」という。すでにある「メジャー(M)」コード、「マイナー(m)」コードの他に、いくつかの種類がある。

コードを増やしたものがこちら！

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

まずHTMLのコード切り替えボタンを増やす。

   <dl>
        <dt>三和音(トライアド)</dt>
        <dd>
            <label><input type="radio" id="code_M" name="code_type" value="メジャー(M)" onchange="codeTypeSelect()" checked>M</label>
            <label><input type="radio" id="code_m" name="code_type" value="マイナー(m)" onchange="codeTypeSelect()">m</label>
            <label><input type="radio" id="code_aug" name="code_type" value="オーギュメント(aug)" onchange="codeTypeSelect()">aug</label>
            <label><input type="radio" id="code_dim" name="code_type" value="ディミニッシュ(dim)" onchange="codeTypeSelect()">dim</label>
            <label><input type="radio" id="code_ sus4" name="code_type" value="サスペンデッド4th(sus4)" onchange="codeTypeSelect()">sus4</label>
        </dd>
    </dl>

「マイナー(m)」の下にlabelタグを3つ追加
3つ目のinputタグのvalue属性に「オーギュメント(aug)」、値に「aug」
4つ目のinputタグのvalue属性に「ディミニッシュ(dim)」、値に「dim」
5つ目のinputタグのvalue属性に「サスペンデッド4th(sus4)」、値に「sus4」

これで切り替えボタンが増える。

次にJSで和音を設定する。

//コードタイプ
var codeTypes = [
    {'codeName': 'M',
        'codeKeys': [1,5,8]},
    {'codeName': 'm',
        'codeKeys': [1,4,8]},
    {'codeName': 'aug',
        'codeKeys': [1,5,9]},
    {'codeName': 'dim',
        'codeKeys': [1,4,7]},
    {'codeName': 'sus4',
        'codeKeys': [1,6,8]},
];