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. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる

    すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人なが…

  2. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  3. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

  4. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  5. Sidr

    JavaScript

    横からサイドメニューが現れるjQueryプラグイン「Sidr」

    面白いjQueryプラグインがあったのでメモがてらご紹介します。Sid…

  6. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP