【JavaScriptライブラリ】リズムによって要素を踊らせる"Rythm.js"

はじめに

ちょっと面白いJavaScriptのライブラリを発見したので使い方を紹介します。
以下のRythm.jsを使うと画像、文字、ボタンなどが
ページに流れる音楽のリズムに合わせて動かすことができます。
okazari.github.io

音楽のテンポによって動きが変わるので色々なリズムの音楽を試すと面白いです。

使い方

とても簡単で、githubからRythm.jsを取得します
github.com

取得したjsファイルを読み込ます。
<script type="text/javascript" src="./rythm.js"></script>

音楽を鳴らすタイミングで以下の処理を記載します。

  var rythm = new Rythm();
  rythm.setMusic("鳴らせる音楽を指定");
  rythm.start();

動かしたい画像などの要素に対して以下のclassを設定します。
class="rythm-bass"

動きのテンポを変更したい場合はrythm-mediumや rythm-highで変えられます。

またaddRythmの関数を使うことで独自にリズムを変更することができます。

以上で完了です。
面白いJavaScriptのライブラリですので是非遊んでみてください。