HTMLのaudioタグを使ったサンプルです。
下のボタンを押すと音がでます。
ピンポン
HTMLはこちら
<div id="demo_base"> <div id="demo_btn">ピンポン</div> </div> <audio id="demo_sound" preload="auto"> <source src="/sound/demo/click/003.mp3" type="audio/mp3"> </audio>
JavaScriptは以下になります。
window.onload = () => { const se = document.querySelector('#demo_sound'); document.querySelector("#demo_btn").addEventListener("click", () => { se.play(); }); };
とてもシンプルに記述できます。
CSSもボタンが押された時の典型的な動きを付けています。
#demo_base{ position: relative; margin:20px auto; height:80px; } #demo_btn{ cursor: pointer; border-radius: 30px; line-height: 60px; height: 60px; width: 60px; background-color: #3399CC; text-align: center; user-select: none; box-shadow: 5px 5px 5px rgba(0,0,0,0.4); color:#FFF; border:solid 2px #66BBEE; font-size:14px; margin:0px 0 0 0px; position: absolute; } #demo_btn:active{ box-shadow: 1px 1px 5px rgba(0,0,0,0.4); margin:2px 0 0 2px; transition: all 0.2s ease; }