ボタンを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/
