improve hydra audio detection initialization

packages/hydra/hydra.mjs

@@ -1,27 +1,33 @@
 import { getDrawContext } from '@strudel.cycles/core';
 
-let options = '';
+let audio = false;
+let hydra;
+
+function appendCanvas(c){
+  const { canvas: testCanvas } = getDrawContext();
+  c.canvas.id = 'hydra-canvas';
+  c.canvas.style.position = 'absolute';
+  c.canvas.style.top = '0px';
+  testCanvas.after(c.canvas);
+}
 
 export async function initHydra(config) {
+  audio = config?.audio || false;
   //load and init hydra
   if (!document.getElementById('hydra-canvas')) {
-    const { canvas: testCanvas } = getDrawContext();
     await import('https://unpkg.com/hydra-synth');
-    h = new Hydra({ detectAudio: config?.audio });
+    hydra = new Hydra({ detectAudio: audio });
-    h.canvas.id = 'hydra-canvas';
+    appendCanvas(hydra);
-    h.canvas.style.position = 'absolute';
-    h.canvas.style.top = '0px';
-    testCanvas.after(h.canvas);
   }
 
-  // update options
+  // if config.audio is true
-  if (options != JSON.stringify(config)) {
+  // and current canvas des not detect audio
-    options = JSON.stringify(config);
+  if (config?.audio && !hydra.detectAudio ){
-
+    //remove previous canvas without audio detection
-    new Hydra({
+    document.getElementById('hydra-canvas').remove()
-      canvas: document.getElementById('hydra-canvas'),
+    // create and append a new audio responsive canvas
-      detectAudio: config?.audio,
+    hydra = new Hydra({ detectAudio: audio});
-    });
+    appendCanvas(hydra)
   }
 }