From c5733897ea7f42d424cd24a30608761bb4b2e4d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Forment?= <raphael.forment@gmail.com>
Date: Wed, 15 Oct 2025 13:03:22 +0200
Subject: [PATCH] Fixing scope and spectrogram

---
 src/lib/components/audio/AudioScope.svelte  | 8 ++++++--
 src/lib/components/audio/Spectrogram.svelte | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/audio/AudioScope.svelte b/src/lib/components/audio/AudioScope.svelte
index 105ad63..12cce86 100644
--- a/src/lib/components/audio/AudioScope.svelte
+++ b/src/lib/components/audio/AudioScope.svelte
@@ -9,7 +9,7 @@
 
   let container: HTMLDivElement;
   let canvas: HTMLCanvasElement;
-  let canvasContext: CanvasRenderingContext2D | null = null;
+  let canvasContext = $state<CanvasRenderingContext2D | null>(null);
   let animationFrameId: number | null = null;
   let dataArray: Uint8Array | null = null;
   let width = $state(800);
@@ -28,7 +28,7 @@
 
   function setupScope(node: AnalyserNode) {
     try {
-      const bufferLength = node.frequencyBinCount;
+      const bufferLength = node.fftSize;
       dataArray = new Uint8Array(bufferLength);
       startDrawing(node);
     } catch (error) {
@@ -93,6 +93,10 @@
   onMount(() => {
     if (canvas) {
       canvasContext = canvas.getContext('2d');
+      if (canvasContext) {
+        canvasContext.fillStyle = '#0a0a0a';
+        canvasContext.fillRect(0, 0, canvas.width, canvas.height);
+      }
     }
 
     updateSize();
diff --git a/src/lib/components/audio/Spectrogram.svelte b/src/lib/components/audio/Spectrogram.svelte
index a55ce5f..ccfe81e 100644
--- a/src/lib/components/audio/Spectrogram.svelte
+++ b/src/lib/components/audio/Spectrogram.svelte
@@ -9,7 +9,7 @@
 
   let container: HTMLDivElement;
   let canvas: HTMLCanvasElement;
-  let canvasContext: CanvasRenderingContext2D | null = null;
+  let canvasContext = $state<CanvasRenderingContext2D | null>(null);
   let animationFrameId: number | null = null;
   let dataArray: Uint8Array | null = null;
   let width = $state(800);