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