<!DOCTYPE html>
<html>
<head>
<title>Bel</title>
<style>
.bel {
width: 100px;
height: 100px;
background-color: #f0f0f0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.bel:active {
transform: scale(0.9);
}
</style>
</head>
<body>
<div class="bel" id="bel">BEL</div>
<script>
const bel = document.getElementById('bel');
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
bel.addEventListener('click', () => {
// Buat efek suara "ding"
const oscillator = audioContext.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
oscillator.connect(audioContext.destination);
oscillator.start();
oscillator.stop(audioContext.currentTime + 3);
// Tampilkan pesan
console.log('Bel ditekan!');
alert('Ding! Bel ditekan.');
});
</script>
</body>
</html>
0 Komentar