utoroのJS解説

JavaScriptプログラムの解説。動作条件の説明があるので先頭から読んでください。

べースパターンを切り替えよう

いよいよ複数のベースパターンを編集、切り替えでき、自動保存・読み込みが行われる仕組みに改造します。ベースの演奏機能が出揃ったら一度に改造しようとここまで待ちました。下記のリンクを右クリックして別ウインドウで開いてください。

サンプル16(ベースパターンを切り替える)

使い方はドラムパターンと同じ要領です。ベースだけの演奏を聴けるPlayボタンも新たにつけています。保存されるのはベースのカウントごとの発音と、ベロシティ、拍の先頭のみ除外するかどうか、5度などの対象選択だけ。サウンド選択や小節ごとのルートなどは後日別途定義する「ソング用配列」のほうで管理する予定です。

ソースを見ていきましょう。一度に実装したので追加項目が多いですが、大半がドラム用の記述を複写して、名称などを一部改変しているだけです。複写忘れ、改変忘れがないかに最も神経を使います。

html部分では、Playボタンの関数を「play(3)」のように引数つきに変更しています。ドラムのPlayボタンも「play(1)」に変更しています。

function loopplay()とfunction play(n)では、Playボタンの表記の連携にベース用のボタンもくわえています。function tick()はこのアプリのメイン関数なので変更項目も多いです。var currbsptnbに当該小節で選択されているベースパターンナンバーが入ります。それ以外のbpp, bvel, boc, bornなどはbsar配列から取得します。あとは、var playingに1〜3の数字がはいっているので、ベースを鳴らす必要があるのか、ドラムを鳴らす必要があるのかを判断して、実行したり除外したりしてるだけです。

後半部分でbsar配列そのものを扱っています。起動時に8パターン分の大きさで生成します。0〜15に各カウントの情報、16に拍の先頭を特別扱いするか否かの情報、17にオクターブちがいや5度音を選ぶかの情報が入ります。起動時にローカルストレージを調べて「bsarjoin16」があればそれを読み込み、なければ用意してあるプリセットパターンを読み込みます。ベースパターンに何らかの編集を加えるとfunction bed()が発動してbsar配列を更新し、ローカルストレージにもその都度自動保存します。これはドラムパターン用のdrar配列と同じ挙動です。

多くの項目をこまごまと対応させていく必要があるので、こうした大きな改変は神経を使います。できれば最初から仕様を完全に決めてつくり始めるのが理想ですが、それはそれで非常にハードルが高くて一歩目を踏み出すのが大変です。神経は使いますが徐々に改良を進めながら機能の高いものを作っていくほうが現実的に前進しやすいと思うので、このようなかたちで解説ブログをつくっています。

これでベースパターンも、切り替え、編集、自動保存ができるようになりました。

5度の音も弾かせよう

前回ルート音を小刻みに鳴らすことができるようになりましたが、今回はオクターブ違いのルート音や5度音も鳴らせるように改良していきます。まずは下記のリンクを右クリックして別ウインドウで開いてください。

サンプル15(ベースで5度音も弾く)

Playボタンをクリックすると、前よりにぎやかなベースラインがきこえてくると思います。中ほどにあるセレクタを変えると、5度音も含めたベースラインをランダムに生成して演奏します。

ソースを見ていきましょう。htmlではラジオボタンセレクタをつくっています。var boc, bornにはそれらで選ばれた番号が入ります。var octs, tha, thbはそれぞれランダムに選ぶ母集合として音高データを定義しています。

function tick()では、まずbocとbornを取得して、音程を変化させるのはboc=0のときのすべてのカウントの音か、boc=1でもカウントが拍の先頭ではないとき。その条件において、bornで選ばれたケースごとにランダム対象を替えて、得た変数txを音高に足しています。どれも単純な仕組みですが、その手数で音楽上の処理にしているだけです。

これでベースラインを5度音も含んだちょっと複雑なものにして鳴らすことができるようになりました。