|
|
<!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> |
