|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>FruitLoop Sound Machine</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.1); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 0.5s ease-in-out; |
|
|
} |
|
|
.fruit-btn { |
|
|
transition: all 0.2s ease; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.fruit-btn:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
.fruit-btn:active { |
|
|
transform: translateY(1px); |
|
|
} |
|
|
.knob { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
box-shadow: inset 0 0 10px rgba(0,0,0,0.2); |
|
|
position: relative; |
|
|
cursor: pointer; |
|
|
} |
|
|
.knob:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 5px; |
|
|
height: 15px; |
|
|
background: #e74c3c; |
|
|
top: 5px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
border-radius: 3px; |
|
|
} |
|
|
.slider { |
|
|
-webkit-appearance: none; |
|
|
width: 100%; |
|
|
height: 10px; |
|
|
border-radius: 5px; |
|
|
background: linear-gradient(to right, #f39c12, #e74c3c); |
|
|
outline: none; |
|
|
} |
|
|
.slider::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
appearance: none; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background: #fff; |
|
|
cursor: pointer; |
|
|
box-shadow: 0 0 5px rgba(0,0,0,0.3); |
|
|
} |
|
|
.visualizer { |
|
|
height: 100px; |
|
|
background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent); |
|
|
border-radius: 5px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.bar { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
width: 5px; |
|
|
background: linear-gradient(to top, #f39c12, #e74c3c); |
|
|
border-radius: 3px 3px 0 0; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-purple-900 to-indigo-800 min-h-screen text-white p-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<header class="text-center mb-8"> |
|
|
<h1 class="text-4xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-pink-500"> |
|
|
<i class="fas fa-music mr-2"></i>FruitLoop Sound Machine |
|
|
</h1> |
|
|
<p class="text-lg text-purple-200">Create funky beats with fruity sounds!</p> |
|
|
</header> |
|
|
|
|
|
<div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 shadow-2xl border border-purple-500 border-opacity-30"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8"> |
|
|
|
|
|
<button class="fruit-btn bg-gradient-to-br from-red-500 to-pink-600 rounded-lg p-4 flex flex-col items-center justify-center h-32" |
|
|
data-sound="apple" onclick="playSound('apple')"> |
|
|
<i class="fas fa-apple-alt text-4xl mb-2"></i> |
|
|
<span class="font-bold">Apple</span> |
|
|
</button> |
|
|
<button class="fruit-btn bg-gradient-to-br from-yellow-500 to-orange-500 rounded-lg p-4 flex flex-col items-center justify-center h-32" |
|
|
data-sound="banana" onclick="playSound('banana')"> |
|
|
<i class="fas fa-banana text-4xl mb-2"></i> |
|
|
<span class="font-bold">Banana</span> |
|
|
</button> |
|
|
<button class="fruit-btn bg-gradient-to-br from-green-500 to-lime-400 rounded-lg p-4 flex flex-col items-center justify-center h-32" |
|
|
data-sound="watermelon" onclick="playSound('watermelon')"> |
|
|
<i class="fas fa-watermelon text-4xl mb-2"></i> |
|
|
<span class="font-bold">Melon</span> |
|
|
</button> |
|
|
<button class="fruit-btn bg-gradient-to-br from-purple-500 to-indigo-500 rounded-lg p-4 flex flex-col items-center justify-center h-32" |
|
|
data-sound="grape" onclick="playSound('grape')"> |
|
|
<i class="fas fa-grapes text-4xl mb-2"></i> |
|
|
<span class="font-bold">Grape</span> |
|
|
</button> |
|
|
<button class="fruit-btn bg-gradient-to-br from-orange-500 to-red-500 rounded-lg p-4 flex flex-col items-center justify-center h-32" |
|
|
data-sound="orange" onclick="playSound('orange')"> |
|
|
<i class="fas fa-orange text-4xl mb-2"></i> |
|
|
<span class="font-bold">Orange</span> |
|
|
</button> |
|
|
<button class="fruit-btn bg-gradient-to-br from-pink-500 to-red-400 rounded-lg p-4 flex flex-col items-center justify-center h-32" |
|
|
data-sound="strawberry" onclick="playSound('strawberry')"> |
|
|
<i class="fas fa-strawberry text-4xl mb-2"></i> |
|
|
<span class="font-bold">Strawberry</span> |
|
|
</button> |
|
|
<button class="fruit-btn bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg p-4 flex flex-col items-center justify-center h-32" |
|
|
data-sound="blueberry" onclick="playSound('blueberry')"> |
|
|
<i class="fas fa-berry text-4xl mb-2"></i> |
|
|
<span class="font-bold">Blueberry</span> |
|
|
</button> |
|
|
<button class="fruit-btn bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-lg p-4 flex flex-col items-center justify-center h-32" |
|
|
data-sound="lemon" onclick="playSound('lemon')"> |
|
|
<i class="fas fa-lemon text-4xl mb-2"></i> |
|
|
<span class="font-bold">Lemon</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
|
|
<div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg"> |
|
|
<h3 class="text-lg font-semibold mb-3 text-center text-yellow-300"> |
|
|
<i class="fas fa-sliders-h mr-2"></i>Sound Controls |
|
|
</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block mb-1 text-sm">Volume</label> |
|
|
<input type="range" min="0" max="1" step="0.01" value="0.7" |
|
|
class="slider" id="volumeSlider" oninput="updateVolume()"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-1 text-sm">Playback Rate</label> |
|
|
<input type="range" min="0.5" max="2" step="0.1" value="1" |
|
|
class="slider" id="rateSlider" oninput="updateRate()"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-1 text-sm">Filter Frequency</label> |
|
|
<input type="range" min="20" max="20000" step="10" value="20000" |
|
|
class="slider" id="filterSlider" oninput="updateFilter()"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg"> |
|
|
<h3 class="text-lg font-semibold mb-3 text-center text-green-300"> |
|
|
<i class="fas fa-random mr-2"></i>Effects |
|
|
</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block mb-1 text-sm">Reverb</label> |
|
|
<input type="range" min="0" max="1" step="0.1" value="0" |
|
|
class="slider" id="reverbSlider" oninput="updateReverb()"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-1 text-sm">Delay</label> |
|
|
<input type="range" min="0" max="1" step="0.1" value="0" |
|
|
class="slider" id="delaySlider" oninput="updateDelay()"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-1 text-sm">Distortion</label> |
|
|
<input type="range" min="0" max="1" step="0.1" value="0" |
|
|
class="slider" id="distortionSlider" oninput="updateDistortion()"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg"> |
|
|
<h3 class="text-lg font-semibold mb-3 text-center text-blue-300"> |
|
|
<i class="fas fa-wave-square mr-2"></i>Visualizer |
|
|
</h3> |
|
|
<div class="visualizer" id="visualizer"> |
|
|
|
|
|
</div> |
|
|
<div class="mt-4 flex justify-center"> |
|
|
<button onclick="toggleVisualizer()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition"> |
|
|
<i class="fas fa-play mr-2"></i>Toggle Visualizer |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg mb-6"> |
|
|
<h3 class="text-lg font-semibold mb-3 text-center text-purple-300"> |
|
|
<i class="fas fa-drum mr-2"></i>Fruit Sequencer |
|
|
</h3> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th class="px-2 py-1 text-sm">Fruit</th> |
|
|
<th class="px-2 py-1 text-sm">Steps</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr> |
|
|
<td class="px-2 py-1 text-center">🍎</td> |
|
|
<td class="px-2 py-1"> |
|
|
<div class="flex space-x-1"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="apple" data-step="1"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="apple" data-step="2"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="apple" data-step="3"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="apple" data-step="4"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="apple" data-step="5"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="apple" data-step="6"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="apple" data-step="7"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="apple" data-step="8"> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="bg-gray-700 bg-opacity-30"> |
|
|
<td class="px-2 py-1 text-center">🍌</td> |
|
|
<td class="px-2 py-1"> |
|
|
<div class="flex space-x-1"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="banana" data-step="1"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="banana" data-step="2"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="banana" data-step="3"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="banana" data-step="4"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="banana" data-step="5"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="banana" data-step="6"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="banana" data-step="7"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="banana" data-step="8"> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-2 py-1 text-center">🍉</td> |
|
|
<td class="px-2 py-1"> |
|
|
<div class="flex space-x-1"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="1"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="2"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="3"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="4"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="5"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="6"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="7"> |
|
|
<input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="8"> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="mt-4 flex justify-center space-x-4"> |
|
|
<button onclick="startSequencer()" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg transition"> |
|
|
<i class="fas fa-play mr-2"></i>Start |
|
|
</button> |
|
|
<button onclick="stopSequencer()" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition"> |
|
|
<i class="fas fa-stop mr-2"></i>Stop |
|
|
</button> |
|
|
<button onclick="randomizeSequencer()" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg transition"> |
|
|
<i class="fas fa-random mr-2"></i>Randomize |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<footer class="text-center mt-8 text-purple-300 text-sm"> |
|
|
<p>Made with <i class="fas fa-heart text-red-400"></i> for music lovers | FruitLoop Sound Machine © 2023</p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const audioContext = new (window.AudioContext || window.webkitAudioContext)(); |
|
|
let sounds = {}; |
|
|
let gainNode = audioContext.createGain(); |
|
|
let filterNode = audioContext.createBiquadFilter(); |
|
|
let convolverNode = audioContext.createConvolver(); |
|
|
let delayNode = audioContext.createDelay(); |
|
|
let feedbackNode = audioContext.createGain(); |
|
|
let distortionNode = audioContext.createWaveShaper(); |
|
|
|
|
|
|
|
|
gainNode.connect(filterNode); |
|
|
filterNode.connect(distortionNode); |
|
|
distortionNode.connect(delayNode); |
|
|
delayNode.connect(feedbackNode); |
|
|
feedbackNode.connect(delayNode); |
|
|
delayNode.connect(convolverNode); |
|
|
convolverNode.connect(audioContext.destination); |
|
|
|
|
|
|
|
|
gainNode.gain.value = 0.7; |
|
|
filterNode.type = "lowpass"; |
|
|
filterNode.frequency.value = 20000; |
|
|
feedbackNode.gain.value = 0; |
|
|
delayNode.delayTime.value = 0.5; |
|
|
|
|
|
|
|
|
function makeDistortionCurve(amount) { |
|
|
const k = typeof amount === 'number' ? amount : 50; |
|
|
const n_samples = 44100; |
|
|
const curve = new Float32Array(n_samples); |
|
|
const deg = Math.PI / 180; |
|
|
|
|
|
for (let i = 0; i < n_samples; i++) { |
|
|
const x = (i * 2) / n_samples - 1; |
|
|
curve[i] = ((3 + k) * x * 20 * deg) / (Math.PI + k * Math.abs(x)); |
|
|
} |
|
|
return curve; |
|
|
} |
|
|
|
|
|
|
|
|
const soundFiles = { |
|
|
apple: 'https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-jump-coin-216.mp3', |
|
|
banana: 'https://assets.mixkit.co/sfx/preview/mixkit-unlock-game-notification-253.mp3', |
|
|
watermelon: 'https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3', |
|
|
grape: 'https://assets.mixkit.co/sfx/preview/mixkit-arcade-retro-game-over-213.mp3', |
|
|
orange: 'https://assets.mixkit.co/sfx/preview/mixkit-arcade-mechanical-bling-210.mp3', |
|
|
strawberry: 'https://assets.mixkit.co/sfx/preview/mixkit-bonus-earned-in-video-game-2058.mp3', |
|
|
blueberry: 'https://assets.mixkit.co/sfx/preview/mixkit-extra-bonus-points-arcade-2043.mp3', |
|
|
lemon: 'https://assets.mixkit.co/sfx/preview/mixkit-arcade-video-game-bonus-2044.mp3' |
|
|
}; |
|
|
|
|
|
|
|
|
function loadSounds() { |
|
|
Object.keys(soundFiles).forEach(key => { |
|
|
fetch(soundFiles[key]) |
|
|
.then(response => response.arrayBuffer()) |
|
|
.then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer)) |
|
|
.then(audioBuffer => { |
|
|
sounds[key] = audioBuffer; |
|
|
}) |
|
|
.catch(error => { |
|
|
console.error('Error loading sound:', key, error); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function playSound(soundName) { |
|
|
if (!sounds[soundName]) return; |
|
|
|
|
|
const source = audioContext.createBufferSource(); |
|
|
source.buffer = sounds[soundName]; |
|
|
source.playbackRate.value = parseFloat(document.getElementById('rateSlider').value); |
|
|
|
|
|
source.connect(gainNode); |
|
|
source.start(); |
|
|
|
|
|
|
|
|
const button = document.querySelector(`[data-sound="${soundName}"]`); |
|
|
button.classList.add('pulse'); |
|
|
setTimeout(() => button.classList.remove('pulse'), 500); |
|
|
|
|
|
|
|
|
if (visualizerActive) { |
|
|
triggerVisualizer(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateVolume() { |
|
|
gainNode.gain.value = parseFloat(document.getElementById('volumeSlider').value); |
|
|
} |
|
|
|
|
|
function updateRate() { |
|
|
|
|
|
} |
|
|
|
|
|
function updateFilter() { |
|
|
filterNode.frequency.value = parseFloat(document.getElementById('filterSlider').value); |
|
|
} |
|
|
|
|
|
function updateReverb() { |
|
|
const amount = parseFloat(document.getElementById('reverbSlider').value); |
|
|
if (amount > 0) { |
|
|
|
|
|
const length = audioContext.sampleRate * 2; |
|
|
const impulse = audioContext.createBuffer(2, length, audioContext.sampleRate); |
|
|
const left = impulse.getChannelData(0); |
|
|
const right = impulse.getChannelData(1); |
|
|
|
|
|
for (let i = 0; i < length; i++) { |
|
|
const n = length - i; |
|
|
left[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, amount * 10); |
|
|
right[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, amount * 10); |
|
|
} |
|
|
|
|
|
convolverNode.buffer = impulse; |
|
|
} else { |
|
|
|
|
|
convolverNode.buffer = null; |
|
|
} |
|
|
} |
|
|
|
|
|
function updateDelay() { |
|
|
const amount = parseFloat(document.getElementById('delaySlider').value); |
|
|
feedbackNode.gain.value = amount * 0.8; |
|
|
delayNode.delayTime.value = amount * 0.5; |
|
|
} |
|
|
|
|
|
function updateDistortion() { |
|
|
const amount = parseFloat(document.getElementById('distortionSlider').value); |
|
|
distortionNode.curve = makeDistortionCurve(amount * 100); |
|
|
distortionNode.oversample = amount > 0.5 ? '4x' : 'none'; |
|
|
} |
|
|
|
|
|
|
|
|
let visualizerActive = false; |
|
|
let bars = []; |
|
|
|
|
|
function initVisualizer() { |
|
|
const visualizer = document.getElementById('visualizer'); |
|
|
visualizer.innerHTML = ''; |
|
|
bars = []; |
|
|
|
|
|
for (let i = 0; i < 32; i++) { |
|
|
const bar = document.createElement('div'); |
|
|
bar.className = 'bar'; |
|
|
bar.style.left = `${i * 6}px`; |
|
|
bar.style.height = '0px'; |
|
|
visualizer.appendChild(bar); |
|
|
bars.push(bar); |
|
|
} |
|
|
} |
|
|
|
|
|
function triggerVisualizer() { |
|
|
for (let i = 0; i < bars.length; i++) { |
|
|
const randomHeight = Math.random() * 80 + 20; |
|
|
bars[i].style.height = `${randomHeight}px`; |
|
|
bars[i].style.transition = 'height 0.1s ease-out'; |
|
|
|
|
|
setTimeout(() => { |
|
|
bars[i].style.height = '0px'; |
|
|
bars[i].style.transition = 'height 0.3s ease-out'; |
|
|
}, 100); |
|
|
} |
|
|
} |
|
|
|
|
|
function toggleVisualizer() { |
|
|
visualizerActive = !visualizerActive; |
|
|
if (visualizerActive) { |
|
|
initVisualizer(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
let sequencerInterval; |
|
|
let currentStep = 0; |
|
|
|
|
|
function startSequencer() { |
|
|
if (sequencerInterval) clearInterval(sequencerInterval); |
|
|
|
|
|
const bpm = 120; |
|
|
const stepDuration = (60 / bpm) / 2; |
|
|
|
|
|
sequencerInterval = setInterval(() => { |
|
|
currentStep = (currentStep % 8) + 1; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.step-checkbox').forEach(checkbox => { |
|
|
checkbox.parentElement.style.backgroundColor = |
|
|
parseInt(checkbox.dataset.step) === currentStep ? 'rgba(255, 255, 255, 0.2)' : ''; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll(`.step-checkbox[data-step="${currentStep}"]:checked`).forEach(checkbox => { |
|
|
playSound(checkbox.dataset.sound); |
|
|
}); |
|
|
|
|
|
}, stepDuration * 1000); |
|
|
} |
|
|
|
|
|
function stopSequencer() { |
|
|
clearInterval(sequencerInterval); |
|
|
document.querySelectorAll('.step-checkbox').forEach(checkbox => { |
|
|
checkbox.parentElement.style.backgroundColor = ''; |
|
|
}); |
|
|
currentStep = 0; |
|
|
} |
|
|
|
|
|
function randomizeSequencer() { |
|
|
document.querySelectorAll('.step-checkbox').forEach(checkbox => { |
|
|
checkbox.checked = Math.random() > 0.7; |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
window.addEventListener('load', () => { |
|
|
loadSounds(); |
|
|
initVisualizer(); |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', (e) => { |
|
|
const keyMap = { |
|
|
'1': 'apple', |
|
|
'2': 'banana', |
|
|
'3': 'watermelon', |
|
|
'4': 'grape', |
|
|
'5': 'orange', |
|
|
'6': 'strawberry', |
|
|
'7': 'blueberry', |
|
|
'8': 'lemon' |
|
|
}; |
|
|
|
|
|
if (keyMap[e.key]) { |
|
|
playSound(keyMap[e.key]); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</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=Assad3l/ebala" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
|
</html> |
