イイダリョウのブログ。【Tone.js】和音鍵盤に四和音(セブンス、シックスス)を追加する2019-12-08【Tone.js】和音鍵盤に四和音(セブンス、シックスス)を追加するJSTone.jsの続きです。前回はようやく三和音(トライトーン)の別のコードを増やしました。今回は四和音(セブンスコードとシックスス)にトライ。qiita.com前回のおさらい前回の最後の形はこちら。CodePen.メジャー、マイナー以外の三和音を追加。三和音の「(トライアド)」を削除dtタグの「三和音(トライアド)」の部分、このあとこうする予定だった。三和音(トライアド)四和音(セブンス)五和音(ナインス)しかし、コードについて調べているとこれに当てはまらない形のコードも多いことがわかった。見た目もコンパクトになるので、「(トライアド)」の文字は今のうちに取ってしまおう。</dl></form>メジャーコードを「(M)」にメジャーコードは「M」、マイナーコードを「m」と表記したが、メジャーコードは無印で表記されることが多い(無印だとわかりにくいので大文字Mにした)この先、四和音以上の和音でのコード表記はメジャーコード無印が前提になることがわかった。無印にするわけにはいかないが、それと同じ意味だよ、ということで今のうちにカッコ付き表記「(M)」に直したい。checked>(M)</label>HTMLの「三和音」のラジオボタンのところの文字を「(M)」にする。中略];JSの変数codeTypesのcodeNameも(M)に構成音を表示この先、だんだんコードの種類が増えていくと、どんな構成音なのかが音を聴いただけではわかりにくくなってくる。今のうちに構成音を表示するようにしたい。id="code_keys_text"></p>#code_type_textの下に#code_keys_textを追加。document.querySelector('#code_keys_text');まず変数codeKeysTextで#code_keys_textのDOMを取得する。}変数CodeKyesValueでcodeTypesのi番目のcodeKeysを取得codeKeysTextのタグの中身を「構成音:」とCodeKyesValueにするなお、これまでfor文の条件の中は変数iはvarで宣言していたが、letに変更した。CodePen.和音ボタンを切り替えると構成音が見えて、前よりわかりやすくなった!ちなみに、構成音は単純にルート音からの鍵盤数(半音)で数える方式にした。三和音の構成音まとめ構成音が見やすくなったのであらためて三和音(トライアド)の特徴をまとめる。それ以外の鍵盤には「長」と「短」がつく。C(ド)からの白鍵はこうなる。完全音程か半音上げると増音程、半音下がると減音程という。長音程から半音上げると増音程、半音下げると減音程。減音程から半音あげると長音程、半音下げると減音程。→:減うーむ、ここらへんのルールはややこしさしか感じない。四和音追加の第一歩!メジャーセブンス(M7)下準備が終わったので四和音を追加していく。こちらの記事を参考にする。ポップスのピアノ伴奏を作ろう!まずセブンス系のコードを一つ目の「メジャーセブンス(M7)」を追加してみる。[1,5,8,12]},];変数codeTypesにcodeName、M7を追加。codeKeysは1,5,8,12メジャーセブン数はメジャーコード1,5,8に四音目12を加えたコード。CodePen.メジャー「(M)」とメジャーセブンス「M7」を切り替えると「M7」の方がより豊かな響きになる!明るいながらも素敵な余韻があるというか。他の四和音も追加するこのまま他の四和音を追加してみる。ポップスのピアノ伴奏を作ろう!三和音(トライアド)の三度はメジャーが基準(無印)でマイナーに「m」を付けるが、四和音の七度はマイナーが基準(無印)でメジャーに「M」を付ける。ここがややこしいところ...w三和音の三度:メジャーが基準(無印)、マイナーに「m」を付ける四和音の七度:マイナーが基準(無印)、メジャーに「M」を付ける上記の法則に従うとこのようなコード名になる。マイナーコード(1,4,8)にマイナーセブンス(11)を加えるデミニッシュ(dim)系のセブンスコード前回の記事で触れた特殊な三和音(dim、aug、sus4)にもセブンスを追加してみた。順番はdimを頭にした方が理解しやすかったため、三和音(トライアド)の方もこの順番に入れ替えた。マイナー・セブン・フラット・ファイブ(1,4,7,11)の七度の音をさらに半音下げ(10)このコードは特殊。m7(-5)はマイナーセブンスの五度の音を半音下げることで七度との距離が鍵盤数5つになる。1,4,7はトライアドのdimと同じになる。dim7は七度をさらに半音下げる。全ての音が鍵盤4つ分の距離になる。音程としては「六度」なのだが、論理的には「減七度(ダブルフラット)」という意味になる。オーグメント(1,5,9)にマイナーセブンス(11)を加えるメジャーコードの第三音(五度)を半音上げしたオーグメント。ここにメジャーセブンスを加えるとaugM7、マイナーセブンスを加えるとaug7になる。sus4(1,6,8)にマイナーセブンス(11)を加えるメジャーコードの第二音(三度)を半音上げしたsus4コード。ここにメジャーセブンスを加えるとM7sus4、マイナーセブンスを加えると7sus4になる。M7sus4はあまり使われない響きっぽい。※参考:sus4コードについて、詳しく教えください。【OKWAVE】シックスス(六度の四和音)最後にセブンスじゃなくてシックスス(六度)の四和音。ルートCでいうところの「ラ」の音。1,4,8,10メジャーコード(1,5,8)にシックスス(10)を加えると無印の「6」、マイナーコード(1,4,8)にシックスス(10)を加える「m6」。音楽理論はいらない!?以上の構成音を意識しながら音を鳴らしてみるとその通りの響きになっている!最後にということで、四和音(セブンスとシックスス)を追加しました。これまで「セブンス(7)」とか「メジャー・マイナーセブンス(mM7)」とか曖昧なイメージだったので、コードの勉強になりました!和音は配色にも似た数学的な世界で面白いです。次回は1オクターブを超えた2オクターブ目の和音「テンションコード」の世界にトライします。13:34Tweet関連記事2019-12-01【Tone.js】和音鍵盤に三和音(トライアド・コード)を追加するTone.jsの続きです。前回は、コードタイプを増やしやすいように...2019-11-17【Tone.js】コード音が読みやすくなるようにリファクタリング久々にTone.js再開!前回はコード切り替えボタンと鍵盤を連携し...2019-09-08【Tone.js】コード切り替えボタンと鍵盤の連携Tone.jsの続きです。前回はコード切り替えボタンを設置しました...2019-08-22【Vue.js】コンポーネントにpropsオプションで値を渡すVue.jsシリーズの続きです。前回はコンポーネントにカウンター...2019-08-20【Tone.js】コード切り替えボタンを設置(鍵盤とは未連動)Tone.jsシリーズの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。