Feature: spectrum analyzer that shows the beats detection will always be an aproximation

party-stage/src/scene/fps-counter.js

@@ -19,6 +19,9 @@ export class DebugPanel extends SceneFeature {
         this.musicTextElement = null;
         this.musicCanvas = null;
         this.musicCtx = null;
+        this.spectrumTextElement = null;
+        this.spectrumCanvas = null;
+        this.spectrumCtx = null;
         this.musicHistory = [];
         sceneFeatureManager.register(this);
     }
@@ -121,6 +124,32 @@ export class DebugPanel extends SceneFeature {
         this.musicCtx = this.musicCanvas.getContext('2d');
         this.fpsElement.appendChild(this.musicCanvas);
 
+        // Spectrum Text Display
+        this.spectrumTextElement = document.createElement('div');
+        Object.assign(this.spectrumTextElement.style, {
+            color: '#ffff00',
+            fontFamily: 'monospace',
+            fontSize: '16px',
+            fontWeight: 'bold',
+            marginBottom: '2px',
+            marginTop: '5px'
+        });
+        this.spectrumTextElement.innerText = 'SPECTRUM';
+        this.fpsElement.appendChild(this.spectrumTextElement);
+
+        // Spectrum Graph Canvas
+        this.spectrumCanvas = document.createElement('canvas');
+        this.spectrumCanvas.width = graphWidth;
+        this.spectrumCanvas.height = 60;
+        Object.assign(this.spectrumCanvas.style, {
+            width: graphWidth + 'px',
+            height: '60px',
+            background: '#222',
+            border: '1px solid #444'
+        });
+        this.spectrumCtx = this.spectrumCanvas.getContext('2d');
+        this.fpsElement.appendChild(this.spectrumCanvas);
+
         document.body.appendChild(this.fpsElement);
         
         this.history = new Array(this.canvas.width).fill(0);
@@ -198,6 +227,7 @@ export class DebugPanel extends SceneFeature {
                 this.musicHistory.shift();
             }
             this.drawMusicGraph();
+            this.drawSpectrumGraph();
             
             if (this.musicTextElement) {
                 this.musicTextElement.innerText = `Volume: ${loudness.toFixed(2)}\nBPM: ${state.music.bpm}`;
@@ -418,5 +448,28 @@ export class DebugPanel extends SceneFeature {
         ctx.stroke();
         ctx.setLineDash([]); // Reset dash
     }
+
+    drawSpectrumGraph() {
+        if (!this.spectrumCtx || !state.music || !state.music.frequencyData) return;
+        const ctx = this.spectrumCtx;
+        const w = this.spectrumCanvas.width;
+        const h = this.spectrumCanvas.height;
+        const data = state.music.frequencyData;
+        const bufferLength = data.length;
+
+        ctx.clearRect(0, 0, w, h);
+
+        const barWidth = w / bufferLength;
+        let x = 0;
+
+        for(let i = 0; i < bufferLength; i++) {
+            const val = (data[i] / 255);
+            const barHeight = val * val * h;
+            const hue = (i / bufferLength) * 260; // Red to Purple
+            ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
+            ctx.fillRect(x, h - barHeight, barWidth + 1, barHeight);
+            x += barWidth;
+        }
+    }
 }
 new DebugPanel();

party-stage/src/scene/music-player.js

@@ -56,7 +56,7 @@ export class MusicPlayer extends SceneFeature {
         if (!this.audioContext) {
             this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
             this.analyser = this.audioContext.createAnalyser();
-            this.analyser.fftSize = 128; // Lower resolution is fine for loudness
+            this.analyser.fftSize = 1024; // Higher resolution for better bass detection
             this.source = this.audioContext.createMediaElementSource(state.music.player);
             this.source.connect(this.analyser);
             this.analyser.connect(this.audioContext.destination);

party-stage/src/scene/music-visualizer.js

@@ -49,7 +49,7 @@ export class MusicVisualizer extends SceneFeature {
             let sumLows = 0;
             let sumHighs = 0;
             let sumAll = 0;
-            const countLows = Math.min(dataArray.length * 0.4, dataArray.length);
+            const countLows = Math.floor(Math.max(2, dataArray.length * 0.2)); // Focus on bottom 10% for bass
             const countHighs = Math.min(dataArray.length * 0.6, dataArray.length);
             
             for (let i = 0; i < dataArray.length; i++) {