用途
新着
履歴
分類


jQuery ライブラリを使って音をコントロールする

jQuery ライブラリを使って音をコントロールする
jQuery ライブラリを使って音をコントロールする
howlerJSというライブラリを使って、ボタンを押したら音がなるだけのシンプルなサンプルです。

ボタンをjQueryで実装し、音の再生部分をライブラリを利用して実装します。

以下のボタンを押すと、mp3の音が再生されます。

自転車ベル

まずHowler.jsのライブラリを読み込みます。

今回はDCNを利用します。

<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
            });

            eff.play();
        });
    };

HTMLはこちら

<div class="demo_flex">
    <div class="btn_effect demo_btn" data-eff="/sound/demo/vehicle/001.mp3">自転車ベル</div>

ボタンを量産することを考慮して、HTML側に音源のパスを記述しています。

このサンプルは、onメソッド内に記述することで、押されたタイミングで音が発生します。

onの外に記述すると同一の音のIDとなり、連打すると最初の音がキャンセルされます。

ケースによって使い分けましょう。

Howler.jsの本家はこちら https://howlerjs.com/

公開 2021-01-31 19:15:44
更新 2021-01-31 22:49:18
このページの二次元コード

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2021 kipure
Top