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. swipe-menu-js

    JavaScript

    横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」

    swipe-menu-jsは横からスライド・スワイプ表示するシンプルな…

  2. ContentTools

    JavaScript

    画面内でそのまま編集できるWYSIWYGエディタ「ContentTools」

    ContentToolsは画面内でそのままコンテンツを編集できるWYS…

  3. Palette-js

    JavaScript

    美しいカラーパレッドを追加できる「Palette-js」

    Palette-jsは美しいカラーパレッドを手軽にプロジェクトに追加す…

  4. JavaScript

    JavaScriptでセレクトボックスから項目を選択したらリンク先にジャンプさせるやり方

    ちょっとした備忘録です。よく見るセレクトボックスから各項目を選択するだ…

  5. How satisfied are you? Slider
  6. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

最近の記事

  1. RICOH THETA SC2
  2. 簡易アクセス
  3. SOUNDLINK MINI II Special Edition

アーカイブ

PAGE TOP