Mungkin ada yang masih bingung, bagaimana cara membuat tombol yang berfungsi untuk “mute”. Biasanya sih kalau buat game kan ada backsoundnya dan bisa diatur apakah mau di on/off. Nah, pada posting kali ini akan dibahas bagaimana cara membuat tombol untuk mengatur backsound tersebut.
Oke, langsung saja… Cekidot…
Yang perlu dipersiapkan:
1. File backsound dalam .mp3/.ogg
2. Icon sebagai tombol mute
3. Script dalam .html
<html>
<head>
<audio id="backsound" src="backsound.mp3" autoplay="autoplay"></audio>
<style>
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
canvas {
border : dashed red;
}
img.button {
display: block;
margin: -20% 20% 0 5%;
width: 50px;
}
#gameUI {
height: 480px;
position: absolute;
width: 320px;
}
</style>
</head>
<body>
<div id="container"></div>
<canvas width="320" height="480"></canvas>
<div id="gameUI"><img src="icon2.png" class="button" id="mute"></div>
<script>
//backsound mute
var audio = document.getElementById('backsound');
document.getElementById('mute').addEventListener('click', function (e){
e = e || window.event;
audio.muted = !audio.muted;
e.preventDefault();
}, false);
</script>
</body>
</html>
Mudah kan?
Semoga bermanfaat.
Catatan Kecil **SiMpLe N Easy** 