Skip to content
Snippets Groups Projects
Select Git revision
  • main default protected
1 result

soundboard.html

Blame
    • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    soundboard.html 6.27 KiB 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Capy-Soundboard</title>
    <link rel="stylesheet" href="style.css">
    <style>
        body {
            background-color: #c8e6c9; /* Light green */
        }

        #soundboard-container {
            text-align: center;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin: 20px auto;
            max-width: 800px;
        }

        h1 {
            color: #388e3c; /* Dark green */
            font-size: 2.5em;
            margin-bottom: 20px;
        }

        .sound-button {
            padding: 15px 30px;
            font-size: 1.5em;
            margin: 10px;
            background-color: #a5d6a7; /* Light green */
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .sound-button:hover {
            background-color: #43a047; /* Slightly darker green */
        }
    </style>
</head>
<body>
    <header>
        <h1>Capy-Soundboard 🔊</h1>
    </header>

    <nav>
        <ul>
            <li><a href="index.html">Stella</a></li>
            <li><a href="clicker.html">Capy-Clicker</a></li>
            <li><a href="capy-pet.html">Capy-Pet</a></li>
            <li><a href="capy-facts.html">Capy-Facts</a></li>
            <li><a href="story.html">Capy-Story</a></li>
            <li><a href="capy-runner.html">Capy-Runner</a></li>
            <li><a href="notes.html">Capy-Notes</a></li>
            <li><a href="soundboard.html">Soundboard</a></li>
        </ul>
    </nav>

    <main>
        <div id="soundboard-container">
            <h1>Soundboard</h1>
            <button class="sound-button" data-sound="laugh">😂 Laugh</button>
            <button class="sound-button" data-sound="boing">🤪 Boing</button>
            <button class="sound-button" data-sound="rimshot">🥁 Rimshot</button>
            <button class="sound-button" data-sound="bark">🐶 Bark</button>
                <button class="sound-button" data-sound="meow">🐱 Meow</button>
            <button class="sound-button" data-sound="fart">💨 Fart</button>
            <button class="sound-button" data-sound="applause">👏 Applause</button>
            <button class="sound-button" data-sound="tada">🎉 Tada</button>
            <button class="sound-button" data-sound="gasp">😮 Gasp</button>
            <button class="sound-button" data-sound="whomp whomp">😭 Wah</button>
            <button class="sound-button" data-sound="burp">🤢 Burp</button>
            <button class="sound-button" data-sound="snore">😴 Snore</button>
            <button class="sound-button" data-sound="ding">🔔 Ding</button>
            <button class="sound-button" data-sound="buzzer">🚨 Buzzer</button>
            <button class="sound-button" data-sound="quack">🦆 Quack</button>
            <button class="sound-button" data-sound="honk">🤡 Honk</button>
            <button class="sound-button" data-sound="slap">🖐️ Slap</button>
            <button class="sound-button" data-sound="chomp">😋 Chomp</button>
            <button class="sound-button" data-sound="drumroll">🥁 Drumroll</button>
            <button class="sound-button" data-sound="aww">🥺 Aww</button>
        </div>
    </main>

    <footer>
        <p>&copy; 2024 CapybaraSimulator.com</p>
    </footer>

    <audio id="laugh" src="https://www.myinstants.com/media/sounds/oh-no-no-no-no-laugh.mp3" preload="auto"></audio>
    <audio id="boing" src="https://www.myinstants.com/media/sounds/boing.mp3" preload="auto"></audio>
    <audio id="rimshot" src="https://www.myinstants.com/media/sounds/rimshot.mp3" preload="auto"></audio>
    <audio id="bark" src="https://www.myinstants.com/media/sounds/dog-barking.mp3" preload="auto"></audio>
    <audio id="meow" src="https://www.myinstants.com/media/sounds/cat-meow.mp3" preload="auto"></audio>
    <audio id="fart" src="https://www.myinstants.com/media/sounds/fart-meme-sound.mp3" preload="auto"></audio>
    <audio id="applause" src="https://www.myinstants.com/media/sounds/applause.mp3" preload="auto"></audio>
    <audio id="tada" src="https://www.myinstants.com/media/sounds/tada1.mp3" preload="auto"></audio>
    <audio id="gasp" src="https://www.myinstants.com/media/sounds/gasp.mp3" preload="auto"></audio>
    <audio id="wah" src="https://www.myinstants.com/media/sounds/sad-trombone.mp3" preload="auto"></audio>
    <audio id="burp" src="https://www.myinstants.com/media/sounds/burp_PHtdhVI.mp3" preload="auto"></audio>
    <audio id="snore" src="https://www.myinstants.com/media/sounds/snore-mimimimimimi.mp3" preload="auto"></audio>
    <audio id="ding" src="https://www.myinstants.com/media/sounds/ding.mp3" preload="auto"></audio>
    <audio id="buzzer" src="https://www.myinstants.com/media/sounds/wrong-buzzer.mp3" preload="auto"></audio>
    <audio id="quack" src="https://www.myinstants.com/media/sounds/quack_5.mp3" preload="auto"></audio>
    <audio id="honk" src="https://www.myinstants.com/media/sounds/clown-horn-short.mp3" preload="auto"></audio>
    <audio id="slap" src="https://www.myinstants.com/media/sounds/slap-sound-effect-free.mp3" preload="auto"></audio>
    <audio id="chomp" src="https://www.myinstants.com/media/sounds/eating-sound-effect.mp3" preload="auto"></audio>
    <audio id="drumroll" src="https://www.myinstants.com/media/sounds/drumroll.mp3" preload="auto"></audio>
    <audio id="aww" src="https://www.myinstants.com/media/sounds/studio-audience-awwww-sound-fx.mp3" preload="auto"></audio>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const soundButtons = document.querySelectorAll('.sound-button');

            soundButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const soundId = button.dataset.sound;
                    const soundElement = document.getElementById(soundId);
                    if (soundElement) {
                        soundElement.currentTime = 0; // Reset to the beginning
                        soundElement.play();
                    }
                });
            });
        });
    </script>
</body>
</html>