このサンプルはjQueryとhowlerJSを使って、音がでるボタンを作り、音から抽出した音の長さを使って、CSSでアニメーションを実装しました。
howerJSというオーディオに特化したライブラリを使うと音源のデータからいろいろな情報を取得できます。
以下はその中で一番シンプルな音の長さ(秒数)をアニメーションの尺にあてた例です。
以下のボタンを押すと音が出ます。
自転車ベル
そうすると上記のエリアにDIVが生成され、アニメーションとして左から右に動き出します。
まず、音のライブラリは以下のにjQuery同様に読み込みます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.2/howler.min.js"></script>
JSは以下になります。
window.onload = () => { $(".btn_effect").on("click",function(){ eff = new Howl({ src: [$(this).attr("data-eff")], autoplay: false, loop: false, volume: 0.8, onplay: (id) => { $("#stage").append('<div class=item id=i'+id+'></div>'); $("#i"+id).css("animation-duration",eff.duration()+'s') }, onend: (id) => { $("#i"+id).remove(); } }); eff.play(); }); };
HTMLは以下になります。
<div class="demo_flex"> <div class="btn_effect demo_btn" data-eff="/sound/demo/vehicle/001.mp3">自転車ベル</div> </div> <div id="stage"></div>
ボタンを連打すると次々と追加される仕様です。
HTML上で音源(ボタン)を増やすと、同じようにアニメーションが生成されるようになっています。
今後は秒数の他にも取れる音の情報で、エフェクトを考えたいと思います。