イイダリョウのブログ。【Tone.js】コード切り替えボタンを設置(鍵盤とは未連動)2019-08-20【Tone.js】コード切り替えボタンを設置(鍵盤とは未連動)JSTone.jsシリーズの続きです。前回は一箇所の打ち換えでメジャーコードとマイナーコードを切り替えできました。次は画面上で切り替えられるようにするために、ラジオボタンを設置しました。クモのようにコツコツと前回のおさらい1オクターブの鍵盤で単音ではなく和音(コード)が鳴る。CodePen.ここで和音を設定。=[1,5,8];ルート音から5音、8音重ねるとメジャーコード。=[1,4,8];第二音を5から4に半音下げる。上のやり方だとコードを打ち替えないと音が変わらない。画面上で切り替えたい。ラジオボタンを設置した。CodePen.ラジオボタンの下にコードネームが表示される。初期状態だとメジャーになっている。切り替えるとマイナーになる。マイナー</label></form>formタグ設置。neme属性はcode_typeslabelタグとラジオボタン設置。inputタグのname属性には共通名code_typeを、valueには固有のコードタイプ名。onchange属性で関数codeTypeSelect()(後述)を実行する初期状態ではcodeMがチェックになっている。id="code_type_text"></p>id名をcode_type_textに。HTML上は空だが初期状態のcodeMが表示されている。document.querySelector('#code_type_text');まずはDOM取得。変数codeTypeTextに#code_type_textを紐付け。変数codeTypeにname属性code_typeのinputタグを紐付けcodeTypeの数の回数ループするもしi番目のcodeTypeがチェックだったら変数CodeTypeValueにi番目のcodeTypeのvalueを取得codeTypeのテキストをCodeTypeValueにする関数codeTypeSelect()を実行するこれでラジオボタンを押すたびに#code_type_textのテキストが変わる。この状態だとまだ鍵盤設定の処理と連動していない。今後の準備のために、メジャー、マイナーのコードを併記した。=[1,4,8];ラジオボタンのvalueは同じ名前にしているので、今後、連動したい。最後に今回はボタン設置で止まりました。個人的にはTone.jsよりもフォーム用にあらかじめ用意されているJSの方が勉強になりました。getElementsByNameでDOMのname属性を取得できるclickではなくcheckedでイベントを発火させる今回、実現できなかった鍵盤と連動。方法をいくつか思い浮かべています。多重ループにする?(ネストが深くなる)戻り値でラジオボタンのvalueを返して、配列に登録?鍵盤を押した時にラジオボタンのvalueを見に行ってコード設定と同じ名前であればゴニョゴニョという処理?まだどの方法が一番いいか検証しきれていないため、次回に取り組みたく思います。07:57Tweet関連記事2019-09-08【Tone.js】コード切り替えボタンと鍵盤の連携Tone.jsの続きです。前回はコード切り替えボタンを設置しました...2019-07-30【Tone.js】3コード楽器を1オクターブに拡張するTone.jsシリーズ、前回は3コード楽器のコードを拡張しやすいよ...2019-06-30【Tone.js】3コード楽器のコードをリファクタリング(ループとイベントと即時関数)Tone.jsの続きになります。前回作った3コード楽器のコードに重...2019-06-03【Tone.js】Tone.Part()でメロディのタイミング、音の長さ、音量を調節する(マリオのゲ...Tone.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。