Hugging Face's logo

Spaces:
bibbler
/
audio-reactive-visualizer
Running

App Files Community
audio-reactive-visualizer / index.html
bibbler's picture
bibbler
Add 2 files
4d0a5da verified
raw
history blame contribute delete
40.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Audio Reactive Visualizer</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.6.2/RecordRTC.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 .custom-scrollbar::-webkit-scrollbar {
 width: 8px;
 height: 8px;
 }
 .custom-scrollbar::-webkit-scrollbar-track {
 background: #1e293b;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
 background: #475569;
 border-radius: 4px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
 background: #64748b;
 }
 .gradient-bg {
 background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
 }
 .glow {
 box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
 }
 .glow:hover {
 box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
 }
 canvas {
 display: block;
 border-radius: 8px;
 }
 .pattern-preview {
 width: 100%;
 height: 80px;
 border-radius: 6px;
 cursor: pointer;
 transition: all 0.2s;
 }
 .pattern-preview:hover {
 transform: scale(1.02);
 }
 .slider-thumb::-webkit-slider-thumb {
 -webkit-appearance: none;
 width: 18px;
 height: 18px;
 border-radius: 50%;
 background: #3b82f6;
 cursor: pointer;
 }
 .slider-thumb:focus::-webkit-slider-thumb {
 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
 }
 </style>
</head>
<body class="gradient-bg text-slate-100 min-h-screen">
 <div class="container mx-auto px-4 py-8">
 <header class="mb-8 text-center">
 <h1 class="text-4xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">Audio Reactive Visualizer</h1>
 <p class="text-slate-300 max-w-2xl mx-auto">Create stunning audio-reactive visualizations with customizable patterns and real-time audio analysis. Import your music and export your creations.</p>
 </header>
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
 <!-- Controls Panel -->
 <div class="lg:col-span-1 bg-slate-800/50 rounded-xl p-6 shadow-lg border border-slate-700/50 custom-scrollbar overflow-y-auto max-h-screen">
 <h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
 <i class="fas fa-sliders-h"></i> Controls
 </h2>
<!-- Audio Input -->
 <div class="mb-6">
 <h3 class="text-sm font-medium mb-2 text-slate-300 flex items-center gap-2">
 <i class="fas fa-music"></i> Audio Source
 </h3>
 <div class="flex flex-col gap-2">
 <button id="fileInputBtn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition flex items-center justify-center gap-2 glow">
 <i class="fas fa-file-audio"></i> Import Audio
 </button>
 <input type="file" id="fileInput" accept="audio/*" class="hidden">
 <button id="micInputBtn" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition flex items-center justify-center gap-2 glow">
 <i class="fas fa-microphone"></i> Use Microphone
 </button>
 </div>
 <div class="mt-3">
 <div class="flex justify-between text-xs text-slate-400">
 <span>Volume</span>
 <span id="volumeValue">50%</span>
 </div>
 <input type="range" id="volumeSlider" min="0" max="100" value="50" class="w-full slider-thumb">
 </div>
 </div>
<!-- Pattern Selection -->
 <div class="mb-6">
 <h3 class="text-sm font-medium mb-2 text-slate-300 flex items-center gap-2">
 <i class="fas fa-shapes"></i> Visual Pattern
 </h3>
 <div class="grid grid-cols-2 gap-3">
 <div class="pattern-option" data-pattern="waveform">
 <div class="pattern-preview bg-gradient-to-r from-blue-500 to-purple-600"></div>
 <p class="text-xs text-center mt-1">Waveform</p>
 </div>
 <div class="pattern-option" data-pattern="particles">
 <div class="pattern-preview bg-gradient-to-r from-green-500 to-teal-600"></div>
 <p class="text-xs text-center mt-1">Particles</p>
 </div>
 <div class="pattern-option" data-pattern="rings">
 <div class="pattern-preview bg-gradient-to-r from-orange-500 to-pink-600"></div>
 <p class="text-xs text-center mt-1">Concentric</p>
 </div>
 <div class="pattern-option" data-pattern="bars">
 <div class="pattern-preview bg-gradient-to-r from-yellow-500 to-red-600"></div>
 <p class="text-xs text-center mt-1">Frequency</p>
 </div>
 </div>
 </div>
<!-- Color Customization -->
 <div class="mb-6">
 <h3 class="text-sm font-medium mb-2 text-slate-300 flex items-center gap-2">
 <i class="fas fa-palette"></i> Colors
 </h3>
 <div class="grid grid-cols-2 gap-3">
 <div>
 <label class="text-xs text-slate-400 block mb-1">Primary</label>
 <input type="color" id="color1" value="#3b82f6" class="w-full h-8 rounded cursor-pointer">
 </div>
 <div>
 <label class="text-xs text-slate-400 block mb-1">Secondary</label>
 <input type="color" id="color2" value="#8b5cf6" class="w-full h-8 rounded cursor-pointer">
 </div>
 </div>
 <div class="mt-3">
 <div class="flex justify-between text-xs text-slate-400">
 <span>Background Opacity</span>
 <span id="bgOpacityValue">20%</span>
 </div>
 <input type="range" id="bgOpacitySlider" min="0" max="100" value="20" class="w-full slider-thumb">
 </div>
 </div>
<!-- Pattern Settings -->
 <div class="mb-6">
 <h3 class="text-sm font-medium mb-2 text-slate-300 flex items-center gap-2">
 <i class="fas fa-cog"></i> Pattern Settings
 </h3>
 <div id="waveformSettings">
 <div class="mb-2">
 <div class="flex justify-between text-xs text-slate-400">
 <span>Line Thickness</span>
 <span id="waveThicknessValue">2</span>
 </div>
 <input type="range" id="waveThicknessSlider" min="1" max="10" value="2" class="w-full slider-thumb">
 </div>
 <div class="mb-2">
 <div class="flex justify-between text-xs text-slate-400">
 <span>Smoothness</span>
 <span id="waveSmoothnessValue">50%</span>
 </div>
 <input type="range" id="waveSmoothnessSlider" min="0" max="100" value="50" class="w-full slider-thumb">
 </div>
 </div>
 <div id="particlesSettings" class="hidden">
 <div class="mb-2">
 <div class="flex justify-between text-xs text-slate-400">
 <span>Particle Count</span>
 <span id="particleCountValue">150</span>
 </div>
 <input type="range" id="particleCountSlider" min="50" max="500" value="150" class="w-full slider-thumb">
 </div>
 <div class="mb-2">
 <div class="flex justify-between text-xs text-slate-400">
 <span>Particle Size</span>
 <span id="particleSizeValue">3</span>
 </div>
 <input type="range" id="particleSizeSlider" min="1" max="10" value="3" class="w-full slider-thumb">
 </div>
 </div>
 <div id="ringsSettings" class="hidden">
 <div class="mb-2">
 <div class="flex justify-between text-xs text-slate-400">
 <span>Ring Count</span>
 <span id="ringCountValue">8</span>
 </div>
 <input type="range" id="ringCountSlider" min="3" max="20" value="8" class="w-full slider-thumb">
 </div>
 <div class="mb-2">
 <div class="flex justify-between text-xs text-slate-400">
 <span>Ring Spacing</span>
 <span id="ringSpacingValue">30</span>
 </div>
 <input type="range" id="ringSpacingSlider" min="10" max="100" value="30" class="w-full slider-thumb">
 </div>
 </div>
 <div id="barsSettings" class="hidden">
 <div class="mb-2">
 <div class="flex justify-between text-xs text-slate-400">
 <span>Bar Count</span>
 <span id="barCountValue">64</span>
 </div>
 <input type="range" id="barCountSlider" min="16" max="128" value="64" class="w-full slider-thumb">
 </div>
 <div class="mb-2">
 <div class="flex justify-between text-xs text-slate-400">
 <span>Bar Width</span>
 <span id="barWidthValue">8</span>
 </div>
 <input type="range" id="barWidthSlider" min="2" max="20" value="8" class="w-full slider-thumb">
 </div>
 </div>
 </div>
<!-- Export Options -->
 <div>
 <h3 class="text-sm font-medium mb-2 text-slate-300 flex items-center gap-2">
 <i class="fas fa-download"></i> Export
 </h3>
 <div class="flex flex-col gap-2">
 <button id="exportImageBtn" class="bg-emerald-600 hover:bg-emerald-700 text-white py-2 px-4 rounded-lg transition flex items-center justify-center gap-2 glow">
 <i class="fas fa-image"></i> Save Image
 </button>
 <button id="exportVideoBtn" class="bg-rose-600 hover:bg-rose-700 text-white py-2 px-4 rounded-lg transition flex items-center justify-center gap-2 glow">
 <i class="fas fa-video"></i> Record Video
 </button>
 </div>
 <div id="recordingControls" class="hidden mt-3">
 <div class="flex justify-center gap-2">
 <button id="stopRecordingBtn" class="bg-rose-600 hover:bg-rose-700 text-white py-1 px-3 rounded-lg text-sm flex items-center gap-1">
 <i class="fas fa-stop"></i> Stop
 </button>
 <div id="recordingTimer" class="text-sm text-slate-300 flex items-center">
 <i class="fas fa-circle text-rose-500 mr-1 animate-pulse"></i> 00:00
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Visualizer Canvas -->
 <div class="lg:col-span-3">
 <div id="visualizer-container" class="bg-slate-900/50 rounded-xl p-4 shadow-lg border border-slate-700/50">
 <div id="canvas-container" class="flex items-center justify-center">
 <!-- p5 canvas will be inserted here -->
 </div>
 <div class="mt-4 flex justify-between items-center">
 <div class="flex items-center gap-2">
 <button id="playBtn" class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center glow">
 <i class="fas fa-play"></i>
 </button>
 <button id="pauseBtn" class="bg-slate-700 hover:bg-slate-600 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center">
 <i class="fas fa-pause"></i>
 </button>
 <button id="stopBtn" class="bg-slate-700 hover:bg-slate-600 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center">
 <i class="fas fa-stop"></i>
 </button>
 </div>
 <div id="songInfo" class="text-sm text-slate-400 italic">
 No audio loaded
 </div>
 <div id="audioTime" class="text-sm text-slate-300">
 0:00 / 0:00
 </div>
 </div>
 </div>
<!-- Audio Spectrum Display -->
 <div class="mt-6 bg-slate-800/50 rounded-xl p-4 shadow-lg border border-slate-700/50">
 <h3 class="text-sm font-medium mb-2 text-slate-300 flex items-center gap-2">
 <i class="fas fa-chart-bar"></i> Audio Spectrum
 </h3>
 <div id="spectrum-container" class="h-24">
 <!-- Spectrum analyzer canvas will be inserted here -->
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 // Global variables
 let audioContext, analyser, dataArray, source, audioElement;
 let isPlaying = false;
 let currentPattern = 'waveform';
 let color1 = '#3b82f6', color2 = '#8b5cf6';
 let bgOpacity = 20;
 let waveThickness = 2, waveSmoothness = 50;
 let particleCount = 150, particleSize = 3;
 let ringCount = 8, ringSpacing = 30;
 let barCount = 64, barWidth = 8;
 let mediaRecorder, recordedChunks = [], recordingStartTime;
 let recordingInterval;
// Pattern settings
 const patternSettings = {
 waveform: {
 thickness: 2,
 smoothness: 50
 },
 particles: {
 count: 150,
 size: 3
 },
 rings: {
 count: 8,
 spacing: 30
 },
 bars: {
 count: 64,
 width: 8
 }
 };
// Initialize p5.js sketches
 new p5(function(p) {
 let canvas, spectrumCanvas;
 let fft, waveform;
 let particles = [];
p.setup = function() {
 // Main visualizer canvas
 canvas = p.createCanvas(800, 450);
 canvas.parent('canvas-container');
 p.colorMode(p.HSB, 360, 100, 100, 1);
// Spectrum analyzer canvas
 spectrumCanvas = p.createCanvas(800, 100);
 spectrumCanvas.parent('spectrum-container');
// Initialize FFT for frequency analysis
 fft = new p5.FFT();
// Initialize audio context if not already done
 if (!audioContext) {
 audioContext = new (window.AudioContext || window.webkitAudioContext)();
 analyser = audioContext.createAnalyser();
 analyser.fftSize = 2048;
 const bufferLength = analyser.frequencyBinCount;
 dataArray = new Uint8Array(bufferLength);
 }
// Initialize particles
 initParticles();
 };
p.draw = function() {
 // Draw main visualizer
 drawVisualizer();
// Draw spectrum analyzer
 drawSpectrum();
// Update audio time display
 updateAudioTime();
 };
function drawVisualizer() {
 // Get audio data
 waveform = fft.waveform();
// Set background with opacity
 p.background(10, bgOpacity);
// Draw selected pattern
 switch(currentPattern) {
 case 'waveform':
 drawWaveform();
 break;
 case 'particles':
 drawParticles();
 break;
 case 'rings':
 drawRings();
 break;
 case 'bars':
 drawBars();
 break;
 }
 }
function drawWaveform() {
 p.noFill();
 p.strokeWeight(waveThickness);
// Create gradient for waveform
 const gradient = p.drawingContext.createLinearGradient(0, 0, p.width, 0);
 gradient.addColorStop(0, color1);
 gradient.addColorStop(1, color2);
 p.drawingContext.strokeStyle = gradient;
p.beginShape();
 for (let i = 0; i < waveform.length; i++) {
 // Apply smoothness
 const x = p.map(i, 0, waveform.length, 0, p.width);
 const y = p.map(waveform[i], -1, 1, p.height, 0);
// Smooth the line based on smoothness setting
 if (i === 0) {
 p.vertex(x, y);
 } else {
 const prevY = p.map(waveform[i-1], -1, 1, p.height, 0);
 const smoothY = p.lerp(prevY, y, waveSmoothness / 100);
 p.vertex(x, smoothY);
 }
 }
 p.endShape();
 }
function initParticles() {
 particles = [];
 for (let i = 0; i < particleCount; i++) {
 particles.push({
 x: p.random(p.width),
 y: p.random(p.height),
 vx: p.random(-1, 1),
 vy: p.random(-1, 1),
 size: particleSize,
 color: p.lerpColor(p.color(color1), p.color(color2), p.random(1))
 });
 }
 }
function drawParticles() {
 const spectrum = fft.analyze();
for (let i = 0; i < particles.length; i++) {
 const particle = particles[i];
// React to audio
 const audioImpact = spectrum[Math.floor(p.map(i, 0, particles.length, 0, spectrum.length))] / 255;
// Update position with audio influence
 particle.x += particle.vx * (1 + audioImpact * 2);
 particle.y += particle.vy * (1 + audioImpact * 2);
// Wrap around edges
 if (particle.x < 0) particle.x = p.width;
 if (particle.x > p.width) particle.x = 0;
 if (particle.y < 0) particle.y = p.height;
 if (particle.y > p.height) particle.y = 0;
// Draw particle
 p.noStroke();
 p.fill(particle.color);
 p.circle(particle.x, particle.y, particle.size * (1 + audioImpact * 2));
 }
 }
function drawRings() {
 const spectrum = fft.analyze();
 const centerX = p.width / 2;
 const centerY = p.height / 2;
for (let i = 0; i < ringCount; i++) {
 const radius = (i + 1) * ringSpacing;
 const energy = spectrum[Math.floor(p.map(i, 0, ringCount, 0, spectrum.length))] / 255;
// Create gradient for each ring
 const gradient = p.drawingContext.createRadialGradient(
 centerX, centerY, radius - 5,
 centerX, centerY, radius + 5
 );
 gradient.addColorStop(0, color1);
 gradient.addColorStop(1, color2);
 p.drawingContext.strokeStyle = gradient;
p.strokeWeight(5);
 p.noFill();
 p.circle(centerX, centerY, radius * (1 + energy * 0.5));
 }
 }
function drawBars() {
 const spectrum = fft.analyze();
 const binSize = Math.floor(spectrum.length / barCount);
for (let i = 0; i < barCount; i++) {
 let sum = 0;
 for (let j = 0; j < binSize; j++) {
 sum += spectrum[i * binSize + j];
 }
 const avg = sum / binSize;
 const energy = avg / 255;
const x = p.map(i, 0, barCount, 0, p.width);
 const h = p.map(energy, 0, 1, 0, p.height * 0.8);
// Create gradient for each bar
 const gradient = p.drawingContext.createLinearGradient(0, p.height - h, 0, p.height);
 gradient.addColorStop(0, color1);
 gradient.addColorStop(1, color2);
 p.drawingContext.fillStyle = gradient;
p.noStroke();
 p.rect(x, p.height - h, barWidth, h);
 }
 }
function drawSpectrum() {
 const spectrum = fft.analyze();
 p.background(15);
// Draw frequency spectrum
 for (let i = 0; i < spectrum.length; i++) {
 const x = p.map(i, 0, spectrum.length, 0, p.width);
 const h = -p.height + p.map(spectrum[i], 0, 255, p.height, 0);
// Create gradient for spectrum
 const gradient = p.drawingContext.createLinearGradient(0, 0, 0, p.height);
 gradient.addColorStop(0, color1);
 gradient.addColorStop(1, color2);
 p.drawingContext.fillStyle = gradient;
p.noStroke();
 p.rect(x, p.height, p.width / spectrum.length, h);
 }
 }
function updateAudioTime() {
 if (audioElement && !isNaN(audioElement.duration)) {
 const currentTime = audioElement.currentTime || 0;
 const duration = audioElement.duration;
const currentMinutes = Math.floor(currentTime / 60);
 const currentSeconds = Math.floor(currentTime % 60).toString().padStart(2, '0');
 const durationMinutes = Math.floor(duration / 60);
 const durationSeconds = Math.floor(duration % 60).toString().padStart(2, '0');
document.getElementById('audioTime').textContent =
`${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`;
 } else {
 document.getElementById('audioTime').textContent = '0:00 / 0:00';
 }
 }
 });
// DOM event listeners
 document.addEventListener('DOMContentLoaded', function() {
 // Audio file input
 document.getElementById('fileInputBtn').addEventListener('click', function() {
 document.getElementById('fileInput').click();
 });
document.getElementById('fileInput').addEventListener('change', function(e) {
 if (e.target.files.length) {
 loadAudioFile(e.target.files[0]);
 }
 });
// Microphone input
 document.getElementById('micInputBtn').addEventListener('click', function() {
 initMicrophone();
 });
// Play/pause/stop controls
 document.getElementById('playBtn').addEventListener('click', playAudio);
 document.getElementById('pauseBtn').addEventListener('click', pauseAudio);
 document.getElementById('stopBtn').addEventListener('click', stopAudio);
// Volume control
 document.getElementById('volumeSlider').addEventListener('input', function(e) {
 const volume = e.target.value / 100;
 if (audioElement) audioElement.volume = volume;
 document.getElementById('volumeValue').textContent = `${e.target.value}%`;
 });
// Pattern selection
 document.querySelectorAll('.pattern-option').forEach(option => {
 option.addEventListener('click', function() {
 currentPattern = this.getAttribute('data-pattern');
// Update UI
 document.querySelectorAll('.pattern-option').forEach(opt => {
 opt.querySelector('.pattern-preview').classList.remove('glow');
 });
 this.querySelector('.pattern-preview').classList.add('glow');
// Show relevant settings
 document.querySelectorAll('[id$="Settings"]').forEach(el => {
 el.classList.add('hidden');
 });
 document.getElementById(`${currentPattern}Settings`).classList.remove('hidden');
 });
 });
// Color controls
 document.getElementById('color1').addEventListener('input', function(e) {
 color1 = e.target.value;
 });
document.getElementById('color2').addEventListener('input', function(e) {
 color2 = e.target.value;
 });
// Background opacity
 document.getElementById('bgOpacitySlider').addEventListener('input', function(e) {
 bgOpacity = e.target.value;
 document.getElementById('bgOpacityValue').textContent = `${e.target.value}%`;
 });
// Pattern-specific controls
 // Waveform
 document.getElementById('waveThicknessSlider').addEventListener('input', function(e) {
 waveThickness = parseInt(e.target.value);
 document.getElementById('waveThicknessValue').textContent = e.target.value;
 });
document.getElementById('waveSmoothnessSlider').addEventListener('input', function(e) {
 waveSmoothness = parseInt(e.target.value);
 document.getElementById('waveSmoothnessValue').textContent = `${e.target.value}%`;
 });
// Particles
 document.getElementById('particleCountSlider').addEventListener('input', function(e) {
 particleCount = parseInt(e.target.value);
 document.getElementById('particleCountValue').textContent = e.target.value;
 initParticles();
 });
document.getElementById('particleSizeSlider').addEventListener('input', function(e) {
 particleSize = parseInt(e.target.value);
 document.getElementById('particleSizeValue').textContent = e.target.value;
 });
// Rings
 document.getElementById('ringCountSlider').addEventListener('input', function(e) {
 ringCount = parseInt(e.target.value);
 document.getElementById('ringCountValue').textContent = e.target.value;
 });
document.getElementById('ringSpacingSlider').addEventListener('input', function(e) {
 ringSpacing = parseInt(e.target.value);
 document.getElementById('ringSpacingValue').textContent = e.target.value;
 });
// Bars
 document.getElementById('barCountSlider').addEventListener('input', function(e) {
 barCount = parseInt(e.target.value);
 document.getElementById('barCountValue').textContent = e.target.value;
 });
document.getElementById('barWidthSlider').addEventListener('input', function(e) {
 barWidth = parseInt(e.target.value);
 document.getElementById('barWidthValue').textContent = e.target.value;
 });
// Export buttons
 document.getElementById('exportImageBtn').addEventListener('click', exportImage);
 document.getElementById('exportVideoBtn').addEventListener('click', startRecording);
 document.getElementById('stopRecordingBtn').addEventListener('click', stopRecording);
// Initialize with waveform pattern selected
 document.querySelector('.pattern-option[data-pattern="waveform"]').click();
 });
// Audio functions
 function loadAudioFile(file) {
 if (audioElement) {
 audioElement.pause();
 if (source) source.disconnect();
 }
const fileURL = URL.createObjectURL(file);
 audioElement = new Audio(fileURL);
 audioElement.volume = document.getElementById('volumeSlider').value / 100;
// Set up audio context
 if (!audioContext) {
 audioContext = new (window.AudioContext || window.webkitAudioContext)();
 }
if (analyser) {
 source.disconnect();
 }
source = audioContext.createMediaElementSource(audioElement);
 analyser = audioContext.createAnalyser();
 analyser.fftSize = 2048;
source.connect(analyser);
 analyser.connect(audioContext.destination);
// Update UI
 document.getElementById('songInfo').textContent = file.name;
 document.getElementById('playBtn').classList.add('glow');
 document.getElementById('pauseBtn').classList.remove('glow');
 document.getElementById('stopBtn').classList.remove('glow');
// Set up event listeners
 audioElement.addEventListener('play', function() {
 isPlaying = true;
 if (audioContext.state === 'suspended') {
 audioContext.resume();
 }
 document.getElementById('playBtn').classList.add('glow');
 document.getElementById('pauseBtn').classList.remove('glow');
 document.getElementById('stopBtn').classList.remove('glow');
 });
audioElement.addEventListener('pause', function() {
 isPlaying = false;
 document.getElementById('playBtn').classList.remove('glow');
 document.getElementById('pauseBtn').classList.add('glow');
 document.getElementById('stopBtn').classList.remove('glow');
 });
audioElement.addEventListener('ended', function() {
 isPlaying = false;
 document.getElementById('playBtn').classList.remove('glow');
 document.getElementById('pauseBtn').classList.remove('glow');
 document.getElementById('stopBtn').classList.add('glow');
 });
 }
function initMicrophone() {
 if (audioElement) {
 audioElement.pause();
 if (source) source.disconnect();
 }
navigator.mediaDevices.getUserMedia({ audio: true, video: false })
 .then(function(stream) {
 if (!audioContext) {
 audioContext = new (window.AudioContext || window.webkitAudioContext)();
 }
if (source) {
 source.disconnect();
 }
source = audioContext.createMediaStreamSource(stream);
 analyser = audioContext.createAnalyser();
 analyser.fftSize = 2048;
source.connect(analyser);
// Update UI
 document.getElementById('songInfo').textContent = "Microphone Input";
 document.getElementById('playBtn').classList.remove('glow');
 document.getElementById('pauseBtn').classList.remove('glow');
 document.getElementById('stopBtn').classList.remove('glow');
 isPlaying = true;
// For microphone, we're always "playing"
 if (audioContext.state === 'suspended') {
 audioContext.resume();
 }
 })
 .catch(function(err) {
 console.error('Error accessing microphone:', err);
 alert('Could not access microphone. Please check permissions.');
 });
 }
function playAudio() {
 if (audioElement && !isPlaying) {
 audioElement.play();
 } else if (!audioElement && !isPlaying) {
 alert('Please load an audio file or enable microphone first.');
 }
 }
function pauseAudio() {
 if (audioElement && isPlaying) {
 audioElement.pause();
 }
 }
function stopAudio() {
 if (audioElement) {
 audioElement.pause();
 audioElement.currentTime = 0;
 isPlaying = false;
 document.getElementById('playBtn').classList.remove('glow');
 document.getElementById('pauseBtn').classList.remove('glow');
 document.getElementById('stopBtn').classList.add('glow');
 }
 }
// Export functions
 function exportImage() {
 const canvas = document.querySelector('#canvas-container canvas');
 const link = document.createElement('a');
 link.download = 'visualizer-snapshot.png';
 link.href = canvas.toDataURL('image/png');
 link.click();
 }
function startRecording() {
 const canvas = document.querySelector('#canvas-container canvas');
 const stream = canvas.captureStream(30); // 30 FPS
recordedChunks = [];
 mediaRecorder = new MediaRecorder(stream, {
 mimeType: 'video/webm;codecs=vp9'
 });
mediaRecorder.ondataavailable = function(e) {
 if (e.data.size > 0) {
 recordedChunks.push(e.data);
 }
 };
mediaRecorder.onstop = function() {
 const blob = new Blob(recordedChunks, { type: 'video/webm' });
 const url = URL.createObjectURL(blob);
 const link = document.createElement('a');
 link.download = 'visualizer-recording.webm';
 link.href = url;
 link.click();
document.getElementById('recordingControls').classList.add('hidden');
 clearInterval(recordingInterval);
 };
mediaRecorder.start();
 recordingStartTime = Date.now();
// Update timer
 recordingInterval = setInterval(function() {
 const elapsed = Math.floor((Date.now() - recordingStartTime) / 1000);
 const minutes = Math.floor(elapsed / 60).toString().padStart(2, '0');
 const seconds = (elapsed % 60).toString().padStart(2, '0');
 document.getElementById('recordingTimer').innerHTML =
`<i class="fas fa-circle text-rose-500 mr-1 animate-pulse"></i> ${minutes}:${seconds}`;
 }, 1000);
document.getElementById('recordingControls').classList.remove('hidden');
 }
function stopRecording() {
 if (mediaRecorder && mediaRecorder.state === 'recording') {
 mediaRecorder.stop();
 }
 }
// Helper function to initialize particles (called from p5 sketch)
 function initParticles() {
 // This is just a placeholder - actual initialization happens in the p5 sketch
 }
 </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=bibbler/audio-reactive-visualizer" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>