Rythm.js を利用したかったけど出来なかったメモ

Last updated at 2020-10-29Posted at 2020-10-29

Rythm.js利用失敗メモ

　音楽を再生し、そのリズムに合わせて指定したHTML要素がアニメーションしてダンスするライブラリを使いたかったが、動かなかった。
　いつか使おうと思ったときにどこまでやったか振り返れるようにしておこうと思う。

使おうとおもったライブラリ
http://okazari.github.io/Rythm.js/

参考サイトを参考に、下記埋め込みをしたが、
対象の画像が動くこともなく、音も出なかった。

index.html

    <!-- 標準スタイルの「rythm-bass」を設定 -->
    <div class="rythm-bass">
        <!-- スピーカーの画像を設置 -->
        <img src="speaker.png" />
    </div>

script.js

var rythm = new Rythm();
// 再生したい音楽ファイルを選択
rythm.setMusic( 'ここに再生したいmp3のurlを記載した' );
// rythm.jsを起動して音楽再生
rythm.start();

１．bassの設定が入れたい音楽との相性が悪い？（低音が響かないと動かないとか、高音がでないと動かないなど）
→利用クラスを"rythm-bass"以外に設定してみた。
rythm-medium
rythm-high

２．CDNの記載ミスがないか
↓サイト情報

↓Codepen設定

３．音楽ファイルの記載方法
３－１．最初、対象mp3ファイルを「ファイルなう」でurl化して
rythm.setMusic( 'ここに再生したいmp3のurlを記載した' );
に埋め込んだ。

３－２．サンプルコードでは/test.mpsというurlだったので、
ファイルアップローダで、/XXXX.mp3というurlを作り、
rythm.setMusic( 'ここに再生したいmp3のurlを記載した' );
に埋め込んだ。