Rythim.js

JavaScript

音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」

Rythm.jsは、あなたのホームページに躍動感を与えてくれるjsライブラリです。具体的なイメージですが、ページ内で流れる音楽(BGM)のリズムに合わせて、設置したボタンなどを躍動的に動かすことができるようになります。例えば、スピーカーのイラストに動きをつけて、そのスピーカーから音楽が流れているように見えるCGなどを見たことがあると思います。あのような動きが、ページ内のボタンに設置することができます。

では、Rythm.jsの詳細を見ていきましょう。

Rythm.js

デモ

使い方はとても簡単です。まず配布サイトよりRythm.js をzip形式でダウンロードし解凍まで行いましょう。

<script type="text/javascript" src="/path/to/rythm.js"></script>
< div class = " rythm-bass " > ボタンなど</ div >
var rythm = new Rythm();
rythm.setMusic("../examples/sample.mp3");
rythm.start();
  • リズムの最小・最大スケール
  • ページごとに使用する音楽
  • 音楽のゲインの調整
  • 音楽を止める
  • 音楽を最初からリスタートさせる

また、カスタムクラスを設定すると、「bass・medium・high」それぞれの音をとらえ、ボタンの動きに反映させることもできるようになります。

音楽好きのWEBクリエイターなら、楽しくノリノリで製作してしまうでしょうね。

Rythim.js

関連記事

  1. no-image

    JavaScript

    SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」

    donuttyはSVGによるドーナッツ状(円形)のチャートを実装できる…

  2. jQuery Panelize Plugin
  3. normalmap.js

    JavaScript

    インタラクティブなライティングエフェクトを実装できる「normalmap.js」

    normalmap.jsはシンプルでインタラクティブなライティングエフ…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーションを遅らせるにはdelayを使えばいいらしい

    ちょっとしたメモです。jQueryでanimateをメソッドチェーンで…

  5. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  6. Simple Modal

    JavaScript

    レスポンシブ対応の軽量・シンプルなモーダル「Simple Modal」

    Simple Modalはレスポンシブに対応した軽量でシンプルなモーダ…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP