Rythm.jsは、あなたのホームページに躍動感を与えてくれるjsライブラリです。具体的なイメージですが、ページ内で流れる音楽(BGM)のリズムに合わせて、設置したボタンなどを躍動的に動かすことができるようになります。例えば、スピーカーのイラストに動きをつけて、そのスピーカーから音楽が流れているように見えるCGなどを見たことがあると思います。あのような動きが、ページ内のボタンに設置することができます。
では、Rythm.jsの詳細を見ていきましょう。
Rythm.js
以下、Rythm.jsのデモページになります(※ 音がでます)。
使い方はとても簡単です。まず配布サイトよりRythm.js をzip形式でダウンロードし解凍まで行いましょう。
下記のようにjsファイルを読み込みます。
<script type="text/javascript" src="/path/to/rythm.js"></script>
そして、動きをつけたい要素に下記のように[rythm-bass]クラスを追加します。
< div class = " rythm-bass " > ボタンなど</ div >
使用する音楽(BGM)についてですが、その音楽のURLを、Rhythmオブジェクトを作成したうえに、指示します。下記のようになります。
var rythm = new Rythm(); rythm.setMusic("../examples/sample.mp3"); rythm.start();
さらに、このRhythm.jsの優れているところは、リズムや音楽に関する設定が細かく指示できることです。
- リズムの最小・最大スケール
- ページごとに使用する音楽
- 音楽のゲインの調整
- 音楽を止める
- 音楽を最初からリスタートさせる
また、カスタムクラスを設定すると、「bass・medium・high」それぞれの音をとらえ、ボタンの動きに反映させることもできるようになります。
音楽好きのWEBクリエイターなら、楽しくノリノリで製作してしまうでしょうね。
最後に、Rythm.jsは現在も開発中のライブラリです。今後も要チェックです。ダウンロードや詳しい使い方は以下からどうぞ。