クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【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