このサンプルは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上で音源（ボタン）を増やすと、同じようにアニメーションが生成されるようになっています。
今後は秒数の他にも取れる音の情報で、エフェクトを考えたいと思います。
