リズムを保存しよう

せっかく手間をかけて編集したリズムパターンは保存してまた使えるようにしたいですよね。今回はWebStorageの機能を使ってリズムを自動保存させてみます。まずは下記のリンクを右クリックして別ウインドウで開いてください。

サンプル8（リズムを保存する）

初回に開いたときはプリセットとして入れてあるパターンが開くと思います。ドラムインストは6つまで使えるように拡張しました。使い方は前回と同じなので「Play」ボタンをクリックしてリズムを鳴らしてみてください。ブラウザを閉じて、再びサンプル8のページを開いた時に前回終了時のパターン編集状態がそのまま再現されるようになっています。

ソースを見ていきましょう。html部分はインスト2段を6段に増やしただけなので割愛します。配列drarの定義でもきっちり6段分の「j」に変更しています。

function ded()は画面でリズムパターンをいじったときに必ず実行される関数ですが、この末尾に配列drarをテキスト化してlocalStorageに書き込むという命令を追加しています。これで自動保存されるというわけです。

function drartoscr()は、配列drarの内容を画面上のパーツに反映させる関数です。配列だけ読み込んでも見た目もその通りに変えてやらないとだめですからね。

最後の部分が起動時に実行される内容で、「drarjoin8」という名で保存されているデータがあるならそれを読み込み、なければプリセットデータを読み込みます。とりあえずdrar配列へと機械的に流し込み、その後function drartoscr()を実行して、画面上でも反映させて完了というわけです。WebStorage機能はシンプルながらとても便利な機能ですよね。

これでエディットしたリズムパターンを自動保存して繰り返し使用できるようになりました。