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