| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Psychedelic Binaural Studio</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://unpkg.com/lucide@latest"></script> |
| | <link rel="stylesheet" href="style.css"> |
| | </head> |
| | <body class="bg-gray-900 text-white min-h-screen overflow-x-hidden"> |
| | |
| | <div class="fixed inset-0 z-0"> |
| | <div class="absolute inset-0 bg-gradient-to-br from-purple-900 via-blue-900 to-pink-900 animate-gradient"></div> |
| | <div class="absolute inset-0 opacity-30 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-yellow-400 via-red-500 to-purple-600 animate-pulse-slow"></div> |
| | <canvas id="particleCanvas" class="absolute inset-0 w-full h-full"></canvas> |
| | </div> |
| |
|
| | |
| | <div class="relative z-10 container mx-auto px-4 py-8 max-w-6xl"> |
| | |
| | <header class="text-center mb-12"> |
| | <h1 class="text-5xl md:text-7xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 animate-text-shimmer drop-shadow-lg"> |
| | Binaural Studio |
| | </h1> |
| | <p class="text-lg md:text-xl text-purple-200 font-light tracking-wide"> |
| | Customize your consciousness journey 🧘♀️✨ |
| | </p> |
| | </header> |
| |
|
| | |
| | <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| | |
| | |
| | <div class="glass-panel rounded-3xl p-8 shadow-2xl border border-white/20"> |
| | <div class="flex items-center justify-between mb-6"> |
| | <h2 class="text-2xl font-semibold text-cyan-300 flex items-center gap-2"> |
| | <i data-lucide="activity" class="w-6 h-6"></i> |
| | Binaural Beats |
| | </h2> |
| | <div class="flex gap-2"> |
| | <span class="text-xs px-3 py-1 rounded-full bg-cyan-500/20 text-cyan-300 border border-cyan-400/30">Spatial</span> |
| | <span class="text-xs px-3 py-1 rounded-full bg-pink-500/20 text-pink-300 border border-pink-400/30">Monaural</span> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="mb-6 p-4 bg-black/20 rounded-2xl border border-white/10"> |
| | <label class="text-sm text-purple-200 mb-3 block font-medium">Beat Mode</label> |
| | <div class="grid grid-cols-2 gap-3"> |
| | <button id="spatialBtn" class="mode-btn active bg-gradient-to-r from-cyan-500 to-blue-500 text-white py-3 px-4 rounded-xl font-medium transition-all hover:scale-105 shadow-lg shadow-cyan-500/30 border-2 border-transparent"> |
| | 🎧 Spatial (Binaural) |
| | </button> |
| | <button id="monauralBtn" class="mode-btn bg-white/10 text-purple-200 py-3 px-4 rounded-xl font-medium transition-all hover:scale-105 border-2 border-transparent hover:bg-white/20"> |
| | 🔊 Monaural |
| | </button> |
| | </div> |
| | <p class="text-xs text-purple-300 mt-2 italic" id="modeDescription"> |
| | Different frequencies in each ear create the beat perception |
| | </p> |
| | </div> |
| |
|
| | |
| | <div class="space-y-6 mb-6"> |
| | <div class="control-group"> |
| | <div class="flex justify-between mb-2"> |
| | <label class="text-cyan-300 font-medium">Carrier Frequency (Base)</label> |
| | <span id="carrierValue" class="text-cyan-300 font-mono bg-cyan-900/30 px-3 py-1 rounded-lg">200 Hz</span> |
| | </div> |
| | <input type="range" id="carrierSlider" min="40" max="500" value="200" class="w-full h-3 bg-black/30 rounded-full appearance-none cursor-pointer accent-cyan-400 hover:accent-cyan-300"> |
| | <div class="flex justify-between text-xs text-purple-300 mt-1"> |
| | <span>40 Hz (Deep)</span> |
| | <span>500 Hz (Bright)</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="control-group"> |
| | <div class="flex justify-between mb-2"> |
| | <label class="text-pink-300 font-medium">Beat Frequency (Difference)</label> |
| | <span id="beatValue" class="text-pink-300 font-mono bg-pink-900/30 px-3 py-1 rounded-lg">10 Hz</span> |
| | </div> |
| | <input type="range" id="beatSlider" min="0.5" max="40" step="0.5" value="10" class="w-full h-3 bg-black/30 rounded-full appearance-none cursor-pointer accent-pink-400 hover:accent-pink-300"> |
| | <div class="flex justify-between text-xs text-purple-300 mt-1"> |
| | <span>0.5 Hz (Delta)</span> |
| | <span>40 Hz (Gamma)</span> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="grid grid-cols-5 gap-2 mb-6"> |
| | <button class="brainwave-btn bg-indigo-500/20 hover:bg-indigo-500/40 border border-indigo-400/30 rounded-lg py-2 text-xs font-medium transition-all" data-carrier="100" data-beat="0.5"> |
| | Delta<br><span class="text-[10px] opacity-70">Sleep</span> |
| | </button> |
| | <button class="brainwave-btn bg-blue-500/20 hover:bg-blue-500/40 border border-blue-400/30 rounded-lg py-2 text-xs font-medium transition-all" data-carrier="150" data-beat="6"> |
| | Theta<br><span class="text-[10px] opacity-70">Relax</span> |
| | </button> |
| | <button class="brainwave-btn bg-green-500/20 hover:bg-green-500/40 border border-green-400/30 rounded-lg py-2 text-xs font-medium transition-all" data-carrier="200" data-beat="10"> |
| | Alpha<br><span class="text-[10px] opacity-70">Focus</span> |
| | </button> |
| | <button class="brainwave-btn bg-yellow-500/20 hover:bg-yellow-500/40 border border-yellow-400/30 rounded-lg py-2 text-xs font-medium transition-all" data-carrier="250" data-beat="20"> |
| | Beta<br><span class="text-[10px] opacity-70">Active</span> |
| | </button> |
| | <button class="brainwave-btn bg-red-500/20 hover:bg-red-500/40 border border-red-400/30 rounded-lg py-2 text-xs font-medium transition-all" data-carrier="300" data-beat="40"> |
| | Gamma<br><span class="text-[10px] opacity-70">Peak</span> |
| | </button> |
| | </div> |
| |
|
| | |
| | <div class="mb-6 p-4 bg-black/20 rounded-2xl border border-white/10"> |
| | <label class="text-sm text-purple-200 mb-3 block font-medium">Volume Ramping</label> |
| | <div class="grid grid-cols-3 gap-2"> |
| | <button id="rampNone" class="ramp-btn active bg-gradient-to-r from-purple-500 to-pink-500 text-white py-2 px-3 rounded-lg text-sm font-medium transition-all"> |
| | Instant |
| | </button> |
| | <button id="rampUp" class="ramp-btn bg-white/10 text-purple-200 py-2 px-3 rounded-lg text-sm font-medium transition-all hover:bg-white/20"> |
| | Ramp Up ⬆️ |
| | </button> |
| | <button id="rampDown" class="ramp-btn bg-white/10 text-purple-200 py-2 px-3 rounded-lg text-sm font-medium transition-all hover:bg-white/20"> |
| | Ramp Down ⬇️ |
| | </button> |
| | </div> |
| | <div class="mt-3 flex items-center gap-3"> |
| | <label class="text-xs text-purple-300">Duration:</label> |
| | <input type="range" id="rampDuration" min="5" max="300" value="60" class="flex-1 h-2 bg-black/30 rounded-full accent-purple-400"> |
| | <span id="rampDurationValue" class="text-xs text-purple-300 font-mono w-12">60s</span> |
| | </div> |
| | </div> |
| |
|
| | |
| | <button id="playBinauralBtn" class="w-full bg-gradient-to-r from-cyan-400 via-purple-500 to-pink-500 hover:from-cyan-300 hover:via-purple-400 hover:to-pink-400 text-white font-bold py-4 px-8 rounded-2xl text-xl shadow-lg shadow-purple-500/50 transition-all transform hover:scale-[1.02] active:scale-95 flex items-center justify-center gap-3"> |
| | <i data-lucide="play" class="w-6 h-6"></i> |
| | <span>Generate Binaural Beat</span> |
| | </button> |
| | </div> |
| |
|
| | |
| | <div class="glass-panel rounded-3xl p-8 shadow-2xl border border-white/20"> |
| | <div class="flex items-center justify-between mb-6"> |
| | <h2 class="text-2xl font-semibold text-amber-300 flex items-center gap-2"> |
| | <i data-lucide="waves" class="w-6 h-6"></i> |
| | Spatial Noise |
| | </h2> |
| | <span class="text-xs px-3 py-1 rounded-full bg-amber-500/20 text-amber-300 border border-amber-400/30">Always Spatial</span> |
| | </div> |
| |
|
| | <div class="space-y-4 mb-6"> |
| | <p class="text-sm text-purple-200 mb-4"> |
| | Immersive 3D noise environment with stereo spatialization. Each noise type is rendered in true stereo field for maximum immersion. |
| | </p> |
| |
|
| | |
| | <div class="grid grid-cols-1 gap-4"> |
| | <button id="pinkNoiseBtn" class="noise-btn group relative overflow-hidden bg-gradient-to-r from-pink-400 to-rose-500 hover:from-pink-300 hover:to-rose-400 text-white p-6 rounded-2xl transition-all transform hover:scale-[1.02] active:scale-95 shadow-lg shadow-pink-500/30 border border-pink-300/50"> |
| | <div class="relative z-10 flex items-center justify-between"> |
| | <div class="flex items-center gap-4"> |
| | <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center backdrop-blur-sm"> |
| | <i data-lucide="cloud" class="w-6 h-6"></i> |
| | </div> |
| | <div class="text-left"> |
| | <h3 class="font-bold text-lg">Pink Noise</h3> |
| | <p class="text-sm text-pink-100">Balanced, natural, soothing</p> |
| | </div> |
| | </div> |
| | <i data-lucide="play-circle" class="w-8 h-8 opacity-80 group-hover:opacity-100 transition-opacity"></i> |
| | </div> |
| | <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div> |
| | </button> |
| |
|
| | <button id="brownNoiseBtn" class="noise-btn group relative overflow-hidden bg-gradient-to-r from-amber-600 to-orange-700 hover:from-amber-500 hover:to-orange-600 text-white p-6 rounded-2xl transition-all transform hover:scale-[1.02] active:scale-95 shadow-lg shadow-orange-500/30 border border-orange-300/50"> |
| | <div class="relative z-10 flex items-center justify-between"> |
| | <div class="flex items-center gap-4"> |
| | <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center backdrop-blur-sm"> |
| | <i data-lucide="flame" class="w-6 h-6"></i> |
| | </div> |
| | <div class="text-left"> |
| | <h3 class="font-bold text-lg">Brown Noise</h3> |
| | <p class="text-sm text-orange-100">Deep, rumbling, intense</p> |
| | </div> |
| | </div> |
| | <i data-lucide="play-circle" class="w-8 h-8 opacity-80 group-hover:opacity-100 transition-opacity"></i> |
| | </div> |
| | <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div> |
| | </button> |
| |
|
| | <button id="whiteNoiseBtn" class="noise-btn group relative overflow-hidden bg-gradient-to-r from-slate-400 to-gray-500 hover:from-slate-300 hover:to-gray-400 text-white p-6 rounded-2xl transition-all transform hover:scale-[1.02] active:scale-95 shadow-lg shadow-gray-500/30 border border-gray-300/50"> |
| | <div class="relative z-10 flex items-center justify-between"> |
| | <div class="flex items-center gap-4"> |
| | <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center backdrop-blur-sm"> |
| | <i data-lucide="wind" class="w-6 h-6"></i> |
| | </div> |
| | <div class="text-left"> |
| | <h3 class="font-bold text-lg">White Noise</h3> |
| | <p class="text-sm text-gray-100">Sharp, masking, crisp</p> |
| | </div> |
| | </div> |
| | <i data-lucide="play-circle" class="w-8 h-8 opacity-80 group-hover:opacity-100 transition-opacity"></i> |
| | </div> |
| | <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div> |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="mb-6 p-4 bg-black/20 rounded-2xl border border-white/10"> |
| | <div class="flex justify-between mb-2"> |
| | <label class="text-amber-300 font-medium">Noise Volume</label> |
| | <span id="noiseVolumeValue" class="text-amber-300 font-mono bg-amber-900/30 px-3 py-1 rounded-lg">70%</span> |
| | </div> |
| | <input type="range" id="noiseVolumeSlider" min="0" max="100" value="70" class="w-full h-3 bg-black/30 rounded-full appearance-none cursor-pointer accent-amber-400"> |
| | </div> |
| |
|
| | |
| | <div class="mb-6 p-4 bg-black/20 rounded-2xl border border-white/10"> |
| | <div class="flex justify-between mb-2"> |
| | <label class="text-purple-300 font-medium">Spatial Width (Stereo Separation)</label> |
| | <span id="spatialWidthValue" class="text-purple-300 font-mono bg-purple-900/30 px-3 py-1 rounded-lg">Wide</span> |
| | </div> |
| | <input type="range" id="spatialWidthSlider" min="0" max="100" value="80" class="w-full h-3 bg-black/30 rounded-full appearance-none cursor-pointer accent-purple-400"> |
| | <p class="text-xs text-purple-300 mt-2">Adjust the perceived width of the noise field</p> |
| | </div> |
| |
|
| | |
| | <button id="stopAllBtn" class="w-full bg-gradient-to-r from-red-500 to-rose-600 hover:from-red-400 hover:to-rose-500 text-white font-bold py-4 px-8 rounded-2xl text-xl shadow-lg shadow-red-500/50 transition-all transform hover:scale-[1.02] active:scale-95 flex items-center justify-center gap-3 opacity-50 cursor-not-allowed" disabled> |
| | <i data-lucide="square" class="w-6 h-6"></i> |
| | <span>Stop All Audio</span> |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="mt-8 glass-panel rounded-3xl p-6 shadow-2xl border border-white/20"> |
| | <div class="flex items-center justify-between mb-4"> |
| | <h3 class="text-xl font-semibold text-cyan-300 flex items-center gap-2"> |
| | <i data-lucide="bar-chart-2" class="w-5 h-5"></i> |
| | Real-time Visualization |
| | </h3> |
| | <div class="flex gap-2 text-xs"> |
| | <span class="flex items-center gap-1 text-cyan-300"> |
| | <span class="w-2 h-2 rounded-full bg-cyan-400 animate-pulse"></span> |
| | Left Channel |
| | </span> |
| | <span class="flex items-center gap-1 text-pink-300"> |
| | <span class="w-2 h-2 rounded-full bg-pink-400 animate-pulse"></span> |
| | Right Channel |
| | </span> |
| | </div> |
| | </div> |
| | <canvas id="audioVisualizer" class="w-full h-48 md:h-64 rounded-2xl bg-black/40 border border-white/10"></canvas> |
| | </div> |
| |
|
| | |
| | <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 text-center"> |
| | <div class="glass-panel rounded-2xl p-4 border border-white/10"> |
| | <i data-lucide="headphones" class="w-8 h-8 mx-auto mb-2 text-cyan-400"></i> |
| | <p class="text-sm text-purple-200">Use headphones for best binaural effect</p> |
| | </div> |
| | <div class="glass-panel rounded-2xl p-4 border border-white/10"> |
| | <i data-lucide="timer" class="w-8 h-8 mx-auto mb-2 text-pink-400"></i> |
| | <p class="text-sm text-purple-200">Ramping helps gentle entry/exit</p> |
| | </div> |
| | <div class="glass-panel rounded-2xl p-4 border border-white/10"> |
| | <i data-lucide="volume-2" class="w-8 h-8 mx-auto mb-2 text-amber-400"></i> |
| | <p class="text-sm text-purple-200">Spatial noise creates 3D soundscape</p> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script src="script.js"></script> |
| | <script> |
| | lucide.createIcons(); |
| | </script> |
| | <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| | </body> |
| | </html> |
