【Tone.js】コード切り替えボタンを設置（鍵盤とは未連動）

Tone.jsシリーズの続きです。前回は一箇所の打ち換えでメジャーコードとマイナーコードを切り替えできました。次は画面上で切り替えられるようにするために、ラジオボタンを設置しました。

【目次】

前回のおさらい
切り替えボタン設置
最後に

前回記事はこちら

※参考：【Tone.js】3コード楽器を1オクターブに拡張する - クモのようにコツコツと

前回のおさらい

1オクターブの鍵盤で単音ではなく和音（コード）が鳴る。

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

ここで和音を設定。

//メジャーコード
var codeM =[1,5,8];

ルート音から5音、8音重ねるとメジャーコード。

マイナーコード

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

一箇所変更でマイナーコードになる！

//マイナーコード
var codem =[1,4,8];

第二音を5から4に半音下げる。

切り替えボタン設置

上のやり方だとコードを打ち替えないと音が変わらない。画面上で切り替えたい。

ラジオボタンを設置した。

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

ラジオボタンの下にコードネームが表示される。初期状態だとメジャーになっている。切り替えるとマイナーになる。

（しかし、まだ鍵盤の音とは連動していないため、音はメジャーコードのまま）

HTMLコード

<form name="code_types">
<label><input type="radio" id="code_M" name="code_type" value="codeM" onchange="codeTypeSelect()" checked>
メジャー</label>
 <label>
   <input type="radio" id="code_m" name="code_type" value="codem" onchange="codeTypeSelect()">
  マイナー</label>
</form>

formタグ設置。neme属性はcode_types
labelタグとラジオボタン設置。
inputタグのname属性には共通名code_typeを、valueには固有のコードタイプ名。
onchange属性で関数codeTypeSelect()（後述）を実行する
初期状態ではcodeMがチェックになっている。

挙動の確認のためにコード名を表示するpタグを設置

<p id="code_type_text"></p>

id名をcode_type_textに。HTML上は空だが初期状態のcodeMが表示されている。

JSコード

//DOM
var codeTypeText = document.querySelector('#code_type_text');

まずはDOM取得。変数codeTypeTextに#code_type_textを紐付け。

コードタイプの関数

//コードタイプ設定
  function codeTypeSelect() {
    var codeType = document.getElementsByName("code_type");
    for(var i = 0; i < codeType.length; i++){
      if(codeType[i].checked) {
        var CodeTypeValue = codeType[i].value;
        codeTypeText.innerHTML = CodeTypeValue;
      }
    }
  }
  //コードタイプ実行
  codeTypeSelect();

関数codeTypeSelect()設定
変数codeTypeにname属性code_typeのinputタグを紐付け
codeTypeの数の回数ループする
もしi番目のcodeTypeがチェックだったら
変数CodeTypeValueにi番目のcodeTypeのvalueを取得
codeTypeのテキストをCodeTypeValueにする
関数codeTypeSelect()を実行する

これでラジオボタンを押すたびに#code_type_textのテキストが変わる。

ただ、この状態だとまだ鍵盤設定の処理と連動していない。分離された状態。

今後の準備のために、メジャー、マイナーのコードを併記した。

//メジャー
var codeM =[1,5,8];
//マイナー
var codem =[1,4,8];

ラジオボタンのvalueは同じ名前にしているので、今後、連動したい。

最後に

f:id:idr_zz:20190908194912j:plain

今回はボタン設置で止まりました。個人的にはTone.jsよりもフォーム用にあらかじめ用意されているJSの方が勉強になりました。

getElementsByNameでDOMのname属性を取得できる
clickではなくcheckedでイベントを発火させる

今回、実現できなかった鍵盤と連動。方法をいくつか思い浮かべています。

多重ループにする？（ネストが深くなる）
戻り値でラジオボタンのvalueを返して、配列に登録？
鍵盤を押した時にラジオボタンのvalueを見に行ってコード設定と同じ名前であればゴニョゴニョという処理？

まだどの方法が一番いいか検証しきれていないため、次回に取り組みたく思います。それではまた！

※続き書きました！

www.i-ryo.com

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