Interactive Button (Sound Effect)

by oktaviardi pratama

HTML

<!-- TAMBAHAN: BUTTON DENGAN SUARA KLIK -->
    <section id="interactive-button">
        <h2>🔊 Interactive Button (Sound Effect)</h2>
        <div class="note">
            <strong>Konsep:</strong><br>
            Kita menggunakan elemen <code>&lt;audio&gt;</code> yang disembunyikan dan dipicu oleh JavaScript saat tombol diklik.
        </div>

        <!-- 1. Elemen Audio (Disembunyikan/Di-preload) -->
        <!-- Gunakan link suara pendek (mp3/wav) -->
        <audio id="click-sound" preload="auto">
            <source src="https://www.soundjay.com/buttons_c2026/sounds/button-2.mp3" type="audio/mpeg">
        </audio>

        <!-- 2. Tombol HTML -->
        <button 
            onclick="playClickSound()" 
            style="padding: 15px 30px; font-size: 16px; cursor: pointer; background-color: #3498db; color: white; border: none; border-radius: 5px; transition: transform 0.1s;">
            Klik Saya! 🔊
        </button>

        <p><em>Coba klik tombol di atas. Browser akan memainkan efek suara.</em></p>
    </section>

JavaScript

function playClickSound() {
    var sound = document.getElementById("click-sound");
    
    // Reset waktu ke 0 agar bisa diklik berulang kali dengan cepat
    sound.currentTime = 0; 
    
    // Mainkan suara
    sound.play().catch(function(error) {
        console.log("Audio play failed (mungkin perlu interaksi user dulu): ", error);
    });
}