waveform AI changes

Signed-off-by: ale <ale@manalejandro.com>

src/WaveForm.jsx

@@ -20,11 +20,11 @@ const animateFallbackBars = (canvas, ctx, time) => {
   ctx.globalCompositeOperation = 'source-over';
   
   for (let i = 0; i < barCount; i++) {
-    // Create animated wave pattern - same successful approach as SimpleWaveForm
+    // Create animated wave pattern with smaller, more realistic bar heights
     const wave1 = Math.sin(time * 0.003 + i * 0.3) * 0.4;
     const wave2 = Math.sin(time * 0.002 + i * 0.2) * 0.3;
-    const normalizedHeight = Math.max(0.3, Math.min(1, 0.5 + wave1 + wave2));
-    const barHeight = Math.max(40, normalizedHeight * HEIGHT * 0.6);
+    const normalizedHeight = Math.max(0.1, Math.min(0.4, 0.2 + wave1 + wave2));
+    const barHeight = Math.max(10, normalizedHeight * HEIGHT * 0.3); // Smaller bars like original
     
     // Use original blue/white gradient colors
     const intensity = normalizedHeight;
@@ -64,7 +64,7 @@ const animateBars = (analyser, canvas, ctx, dataArray, bufferLength) => {
     
     for (let i = 0; i < barCount; i++) {
       const dataIndex = i * step;
-      const barHeight = Math.max(20, (dataArray[dataIndex] / 255) * HEIGHT * 0.4); // Minimum 20px, use 40% of screen
+      const barHeight = Math.max(5, (dataArray[dataIndex] / 255) * HEIGHT * 0.25); // Smaller bars like original
       const blueShade = Math.min(3, Math.floor((dataArray[dataIndex] / 255) * 4));
       
       // Create gradient for better visibility (bottom to top)
@@ -96,7 +96,7 @@ const animateBars = (analyser, canvas, ctx, dataArray, bufferLength) => {
 const WaveForm = ({ analyzerData }) => {
   const canvasRef = useRef(null);
   const [width, height] = useSize();
-  const [useFallback, setUseFallback] = useState(true);
+  const [useFallback, setUseFallback] = useState(false);
   const animationRef = useRef(null);
 
   useEffect(() => {
@@ -114,6 +114,13 @@ const WaveForm = ({ analyzerData }) => {
                            analyzerData.dataArray && 
                            analyzerData.bufferLength;
 
+    console.log('Audio analyzer status:', {
+      hasAnalyzerData: !!analyzerData,
+      hasAnalyzer: !!(analyzerData && analyzerData.analyzer),
+      useFallback,
+      webAudioWorking
+    });
+
     const render = () => {
       try {
         const currentTime = Date.now();