| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta http-equiv="Permissions-Policy" content="interest-cohort=()"> |
| <title>Meme Soundboard</title> |
| <script src="https://cdn.tailwindcss.com?plugins=forms,aspect-ratio"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap'); |
| |
| body { |
| font-family: 'Comic Neue', cursive; |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| min-height: 100vh; |
| } |
| |
| .sound-btn { |
| transition: all 0.3s ease; |
| transform: scale(1); |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| |
| .sound-btn:hover { |
| transform: scale(1.05); |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
| } |
| |
| .sound-btn:active { |
| transform: scale(0.98); |
| } |
| |
| .playing { |
| animation: pulse 0.5s infinite alternate; |
| border-color: #3b82f6 !important; |
| } |
| |
| @keyframes pulse { |
| from { |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); |
| } |
| to { |
| box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); |
| } |
| } |
| |
| .volume-slider { |
| -webkit-appearance: none; |
| width: 100%; |
| height: 8px; |
| border-radius: 4px; |
| background: #d1d5db; |
| outline: none; |
| } |
| |
| .volume-slider::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| appearance: none; |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background: #3b82f6; |
| cursor: pointer; |
| } |
| |
| .error-message { |
| display: none; |
| position: fixed; |
| top: 20px; |
| left: 50%; |
| transform: translateX(-50%); |
| background-color: #ef4444; |
| color: white; |
| padding: 12px 24px; |
| border-radius: 8px; |
| z-index: 100; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| </style> |
| </head> |
| <body class="p-4 md:p-8"> |
| <div class="error-message" id="errorMessage"> |
| <i class="fas fa-exclamation-triangle mr-2"></i> |
| <span id="errorText">Sound could not be loaded. Please try again.</span> |
| </div> |
| |
| <div class="max-w-4xl mx-auto"> |
| <header class="text-center mb-8"> |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-2">Meme Soundboard</h1> |
| <p class="text-lg text-gray-600">Press the buttons to play legendary meme sounds</p> |
| |
| <div class="mt-6 flex items-center justify-center space-x-4"> |
| <i class="fas fa-volume-up text-blue-500 text-xl"></i> |
| <input type="range" min="0" max="1" step="0.01" value="0.5" class="volume-slider w-48" id="volumeControl"> |
| <span class="text-gray-700 font-medium" id="volumeValue">50%</span> |
| </div> |
| </header> |
| |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" id="soundboard"> |
| |
| </div> |
| |
| <div class="mt-12 text-center"> |
| <button id="stopAllBtn" class="px-6 py-3 bg-red-500 text-white rounded-full font-bold hover:bg-red-600 transition"> |
| <i class="fas fa-stop mr-2"></i> Stop All Sounds |
| </button> |
| </div> |
| </div> |
|
|
| |
| <audio id="yodelAudio" preload="auto"> |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-yodel-voice-sound-2223.mp3" type="audio/mpeg"> |
| <source src="https://www.soundjay.com/misc/sounds/yodel-01.mp3" type="audio/mpeg"> |
| </audio> |
| <audio id="wompWompAudio" preload="auto"> |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-sad-trombone-2817.mp3" type="audio/mpeg"> |
| <source src="https://www.soundjay.com/misc/sounds/sad-trombone-01.mp3" type="audio/mpeg"> |
| </audio> |
| <audio id="rickrollAudio" preload="auto"> |
| <source src="https://www.soundjay.com/misc/sounds/never-gonna-give-you-up-01.mp3" type="audio/mpeg"> |
| </audio> |
| <audio id="sadViolinAudio" preload="auto"> |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-sad-violin-1491.mp3" type="audio/mpeg"> |
| <source src="https://www.soundjay.com/misc/sounds/sad-violin-01.mp3" type="audio/mpeg"> |
| </audio> |
| <audio id="bruhAudio" preload="auto"> |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-funny-fart-2885.mp3" type="audio/mpeg"> |
| <source src="https://www.soundjay.com/misc/sounds/bruh-sound-01.mp3" type="audio/mpeg"> |
| </audio> |
| <audio id="airhornAudio" preload="auto"> |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-air-horn-2915.mp3" type="audio/mpeg"> |
| <source src="https://www.soundjay.com/misc/sounds/air-horn-01.mp3" type="audio/mpeg"> |
| </audio> |
| <audio id="oofAudio" preload="auto"> |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-video-game-falling-2819.mp3" type="audio/mpeg"> |
| <source src="https://www.soundjay.com/misc/sounds/roblox-oof-01.mp3" type="audio/mpeg"> |
| </audio> |
| <audio id="windowsErrorAudio" preload="auto"> |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-windows-7-error-sound-2572.mp3" type="audio/mpeg"> |
| <source src="https://www.soundjay.com/misc/sounds/windows-error-01.mp3" type="audio/mpeg"> |
| </audio> |
| <audio id="tacoBellAudio" preload="auto"> |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-bell-notification-933.mp3" type="audio/mpeg"> |
| <source src="https://www.soundjay.com/misc/sounds/taco-bell-01.mp3" type="audio/mpeg"> |
| </audio> |
| <audio id="cricketAudio" preload="auto"> |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-crickets-and-insects-in-the-wild-1254.mp3" type="audio/mpeg"> |
| <source src="https://www.soundjay.com/misc/sounds/crickets-01.mp3" type="audio/mpeg"> |
| </audio> |
| <audio id="mlgAirhornAudio" preload="auto"> |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-horn-call-2916.mp3" type="audio/mpeg"> |
| <source src="https://www.soundjay.com/misc/sounds/mlg-airhorn-01.mp3" type="audio/mpeg"> |
| </audio> |
| <audio id="vineBoomAudio" preload="auto"> |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-explosion-impact-1680.mp3" type="audio/mpeg"> |
| <source src="https://www.soundjay.com/misc/sounds/vine-boom-01.mp3" type="audio/mpeg"> |
| </audio> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const meta = document.createElement('meta'); |
| meta.httpEquiv = 'Permissions-Policy'; |
| meta.content = 'interest-cohort=()'; |
| document.head.appendChild(meta); |
| |
| const sounds = [ |
| { id: 'yodelAudio', name: 'Yodeling Kid', icon: 'fa-music', color: 'bg-yellow-400', border: 'border-yellow-500' }, |
| { id: 'wompWompAudio', name: 'Womp Womp', icon: 'fa-face-sad-cry', color: 'bg-purple-400', border: 'border-purple-500' }, |
| { id: 'rickrollAudio', name: 'Rickroll', icon: 'fa-user-secret', color: 'bg-blue-400', border: 'border-blue-500' }, |
| { id: 'sadViolinAudio', name: 'Sad Violin', icon: 'fa-violin', color: 'bg-indigo-400', border: 'border-indigo-500' }, |
| { id: 'bruhAudio', name: 'Bruh Sound', icon: 'fa-face-grin-squint-tears', color: 'bg-green-400', border: 'border-green-500' }, |
| { id: 'airhornAudio', name: 'Airhorn', icon: 'fa-bullhorn', color: 'bg-red-400', border: 'border-red-500' }, |
| { id: 'oofAudio', name: 'Roblox Oof', icon: 'fa-gamepad', color: 'bg-orange-400', border: 'border-orange-500' }, |
| { id: 'windowsErrorAudio', name: 'Windows Error', icon: 'fa-window-restore', color: 'bg-gray-400', border: 'border-gray-500' }, |
| { id: 'tacoBellAudio', name: 'Taco Bell Bong', icon: 'fa-bell', color: 'bg-pink-400', border: 'border-pink-500' }, |
| { id: 'cricketAudio', name: 'Cricket Sounds', icon: 'fa-bug', color: 'bg-lime-400', border: 'border-lime-500' }, |
| { id: 'mlgAirhornAudio', name: 'MLG Airhorn', icon: 'fa-glasses', color: 'bg-cyan-400', border: 'border-cyan-500' }, |
| { id: 'vineBoomAudio', name: 'Vine Boom', icon: 'fa-burst', color: 'bg-amber-400', border: 'border-amber-500' } |
| ]; |
| |
| const soundboard = document.getElementById('soundboard'); |
| const errorMessage = document.getElementById('errorMessage'); |
| const errorText = document.getElementById('errorText'); |
| |
| sounds.forEach(sound => { |
| const soundBtn = document.createElement('button'); |
| soundBtn.className = `sound-btn ${sound.color} ${sound.border} border-2 rounded-xl p-4 flex flex-col items-center justify-center h-32`; |
| soundBtn.innerHTML = ` |
| <i class="fas ${sound.icon} text-3xl mb-2"></i> |
| <span class="font-bold text-gray-800">${sound.name}</span> |
| `; |
| |
| soundBtn.addEventListener('click', function() { |
| playSound(sound.id, soundBtn); |
| }); |
| |
| soundboard.appendChild(soundBtn); |
| }); |
| |
| const volumeControl = document.getElementById('volumeControl'); |
| const volumeValue = document.getElementById('volumeValue'); |
| const stopAllBtn = document.getElementById('stopAllBtn'); |
| |
| |
| const allAudioElements = document.querySelectorAll('audio'); |
| |
| |
| allAudioElements.forEach(audio => { |
| audio.volume = volumeControl.value; |
| |
| |
| audio.addEventListener('error', function() { |
| showError(`Failed to load ${audio.id.replace('Audio', '')} sound`); |
| }); |
| }); |
| |
| |
| volumeControl.addEventListener('input', function() { |
| const volume = this.value; |
| volumeValue.textContent = `${Math.round(volume * 100)}%`; |
| |
| allAudioElements.forEach(audio => { |
| audio.volume = volume; |
| }); |
| }); |
| |
| |
| stopAllBtn.addEventListener('click', function() { |
| allAudioElements.forEach(audio => { |
| audio.pause(); |
| audio.currentTime = 0; |
| }); |
| |
| |
| document.querySelectorAll('.sound-btn').forEach(btn => { |
| btn.classList.remove('playing'); |
| }); |
| }); |
| |
| function playSound(soundId, button) { |
| |
| allAudioElements.forEach(audio => { |
| audio.pause(); |
| audio.currentTime = 0; |
| }); |
| |
| |
| document.querySelectorAll('.sound-btn').forEach(btn => { |
| btn.classList.remove('playing'); |
| }); |
| |
| |
| const audio = document.getElementById(soundId); |
| |
| try { |
| audio.currentTime = 0; |
| const playPromise = audio.play(); |
| |
| if (playPromise !== undefined) { |
| playPromise.catch(error => { |
| showError("Couldn't play sound. Try clicking again or check your browser permissions."); |
| }); |
| } |
| |
| |
| button.classList.add('playing'); |
| |
| |
| audio.addEventListener('ended', function() { |
| button.classList.remove('playing'); |
| }); |
| } catch (error) { |
| showError("Error playing sound. Please try again."); |
| } |
| } |
| |
| function showError(message) { |
| errorText.textContent = message; |
| errorMessage.style.display = 'block'; |
| |
| setTimeout(() => { |
| errorMessage.style.display = 'none'; |
| }, 3000); |
| } |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Enderchef/memeboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
