8小節のループにしよう

前回まででリズムのパターンやドラムセットも切り替えて鳴らせるようになりました。今回はさらにステップアップして、8小節の長さのループを作り、リズムを繰り返し演奏できるようにしてみましょう。まずは下記のリンクを右クリックして別ウインドウで開いてください。

サンプル11（8小節のループにする）

「Play」ボタンが2つありますが、上のボタンをクリックしてください。パターン0から順番に8つのパターンが演奏され、また先頭にもどって繰り返すループプレイが実行されます。左の表の上段のラジオボタンをクリックすれば、その小節から演奏され、下段のパターン番号を変えれば、その番号のパターンが登録されます。

ソースを見ていきましょう。htmlは表の中身と、追加した「Play」ボタンです。表は上段、下段をそれぞれformでくくっています。そのため、リズムパターンで使っているformのナンバーがそれぞれ+2になっているのでご注意を。

var currbarに現在の演奏小節番号が入ります。これは実際の小節名と一致するよう、1からスタートさせています。function loopplay()が上の「Play」ボタンで実行される関数です。2つの「Play」ボタンは連動しており、片方が「Stop」表示に変わると他方も同じ表示に変わり、どちらを押しても演奏はストップします。var playingが1のときがパターン演奏、2のときがループ演奏、0が停止中です。

function tick()は演奏部分は変わりませんが、その前後に小節ループのための処理が追加されています。前部ではvar currdrptnbに演奏すべきパターン番号を取得し、後部ではvar currbarに次に演奏すべき小節番号を取得しています。

function changecurrbar()は、ラジオボタンをマウスでクリックして手動でvar currbarを替えたときの処理です。

非常にシンプルではありますが、これで8小節のドラムループシーケンサーをWEB上につくることができました。