utoroのJS解説

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

リズムをエディットしよう

前回メトロノームが鳴るようになりましたが、既定の1パターンのみの演奏でした。今回はパターンをエディットして好みのリズムを鳴らせるように改良してみます。まずは下記のリンクを右クリックして別ウインドウで開いてください。

サンプル7(リズムをエディットする)

「Play」をクリックすると同じようにメトロノームが鳴りますが、内部動作はかなり変更しています。左側のチェックボックスをチェックすると鳴るタイミングを変更でき、左端のセレクタを変えると鳴るドラムインストを変更できます。右端のナンバーはベロシティを指定できます。

ソースを見ていきましょう。html部分は大量のチェックボックスを追加しています。上段がformナンバー0、下段がformナンバー1の中に全パーツが入っています。

JSのほうは順番を前後しながら説明します。

まずはvar drarという配列を作り、これの中に子配列、孫配列等をつくり、エディットデータはすべてこの中に格納します。dはパターン番号で複数パターンの切り替えをこの先予定しています。cは1小節を16分割したタイミング0-15が入ります。xはドラムパート番号が入り、現状0-1の2パートのみで演奏していますが、これも容易に増やすことができます。末尾のwは0にドラムインスト番号、1にベロシティが入ります。

チェックボックスなどが変更されたときにfunction ded()が発動します。すべてのパーツのデータを確認して書き込み直しています。

function changetempo()の中ではinterval変数を設定しますが、1拍あたりの解像度が4倍に高まっているので、分子を60000から15000に変更しています。

function tick()が実際の発音部分ですが、ここでも配列drarからデータを読みだしてノートオンするように変更しています。count変数も解像度アップに伴いbeat*4と比較してリセットするように変更しています。

これでリズムパターンをエディットして鳴らすことができるようになりました。