用途
新着
履歴
分類

JavaScript 音とアニメーションの連携

JavaScript 音とアニメーションの連携
音が出るボタンを設置し、音に合わせて動きをつけるサンプルです。

このサンプルは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上で音源(ボタン)を増やすと、同じようにアニメーションが生成されるようになっています。

今後は秒数の他にも取れる音の情報で、エフェクトを考えたいと思います。

公開 2021-01-31 23:53:53
更新 2021-02-01 00:07:01
このページの二次元コード
JavaScript 音とアニメーションの連携

人気のサンプル

search -  category -  about
© 2024 kipure
Top