@viji-dev/core 0.3.26 → 0.3.27

package/dist/assets/{viji.worker-PAf0oIec.js → viji.worker-jTmB7qoQ.js}

@@ -1792,6 +1792,7 @@ class P5WorkerAdapter {
     this.offscreenCanvas = offscreenCanvas;
     this.setupFn = sceneCode.setup || null;
     this.renderFn = sceneCode.render;
+    this.p5CanvasMode = sceneCode.canvasMode === "webgl" ? "webgl" : "2d";
     this.installMinimalShims();
   }
   p5Instance = null;
@@ -1804,6 +1805,7 @@ class P5WorkerAdapter {
   imageParameterCache = /* @__PURE__ */ new Map();
   // Track if P5.js's main canvas has been created
   mainCanvasCreated = false;
+  p5CanvasMode;
   /**
    * Initialize P5 instance after P5.js library is loaded
    * This must be called after the P5 class is available
@@ -1816,7 +1818,15 @@ class P5WorkerAdapter {
         new this.p5Class((p) => {
           this.p5Instance = p;
           p.setup = () => {
-            p.createCanvas(this.offscreenCanvas.width, this.offscreenCanvas.height);
+            if (this.p5CanvasMode === "webgl") {
+              p.createCanvas(
+                this.offscreenCanvas.width,
+                this.offscreenCanvas.height,
+                p.WEBGL
+              );
+            } else {
+              p.createCanvas(this.offscreenCanvas.width, this.offscreenCanvas.height);
+            }
             p.noLoop();
             this.p5InternalSetupComplete = true;
             resolve();
@@ -2052,8 +2062,8 @@ class P5WorkerAdapter {
         height: bitmap.height
       };
     }
-    if (Array.isArray(vijiAPI.streams)) {
-      for (const stream of vijiAPI.streams) {
+    if (Array.isArray(vijiAPI.videoStreams)) {
+      for (const stream of vijiAPI.videoStreams) {
         if (stream?.currentFrame instanceof OffscreenCanvas) {
           const canvas = stream.currentFrame;
           stream.currentFrame = {
@@ -2379,12 +2389,14 @@ class ShaderWorkerAdapter {
       this.gl = gl;
     }
   }
-  static MAX_STREAMS = 8;
+  static MAX_VIDEO_STREAMS = 8;
   // Maximum number of compositor input streams
   static MAX_EXTERNAL_DEVICES = 8;
   // Maximum number of external devices
   static MAX_DEVICE_VIDEOS = 8;
   // Maximum number of device video streams
+  static MAX_AUDIO_STREAMS = 8;
+  // Maximum number of additional audio streams
   gl;
   program = null;
   uniformLocations = /* @__PURE__ */ new Map();
@@ -2404,7 +2416,7 @@ class ShaderWorkerAdapter {
   segmentationTexture = null;
   keyboardTexture = null;
   // Multi-stream textures
-  streamTextures = [];
+  videoStreamTextures = [];
   // Device video textures
   deviceTextures = new Array(ShaderWorkerAdapter.MAX_DEVICE_VIDEOS).fill(null);
   // Accumulator state (CPU-side phase accumulators for smooth parameter-driven animation)
@@ -2692,31 +2704,31 @@ uniform vec2 u_videoResolution; // Video frame width and height in pixels
 uniform float u_videoFrameRate; // Video frame rate in frames per second
 
 // Multi-Stream Compositor Support (using individual uniforms due to WebGL 1.0 limitations)
-uniform int u_streamCount; // Number of available compositor input streams (0-8)
-uniform sampler2D u_stream0; // Stream 0 texture
-uniform sampler2D u_stream1; // Stream 1 texture
-uniform sampler2D u_stream2; // Stream 2 texture
-uniform sampler2D u_stream3; // Stream 3 texture
-uniform sampler2D u_stream4; // Stream 4 texture
-uniform sampler2D u_stream5; // Stream 5 texture
-uniform sampler2D u_stream6; // Stream 6 texture
-uniform sampler2D u_stream7; // Stream 7 texture
-uniform vec2 u_stream0Resolution; // Stream 0 resolution
-uniform vec2 u_stream1Resolution; // Stream 1 resolution
-uniform vec2 u_stream2Resolution; // Stream 2 resolution
-uniform vec2 u_stream3Resolution; // Stream 3 resolution
-uniform vec2 u_stream4Resolution; // Stream 4 resolution
-uniform vec2 u_stream5Resolution; // Stream 5 resolution
-uniform vec2 u_stream6Resolution; // Stream 6 resolution
-uniform vec2 u_stream7Resolution; // Stream 7 resolution
-uniform bool u_stream0Connected; // Stream 0 connection status
-uniform bool u_stream1Connected; // Stream 1 connection status
-uniform bool u_stream2Connected; // Stream 2 connection status
-uniform bool u_stream3Connected; // Stream 3 connection status
-uniform bool u_stream4Connected; // Stream 4 connection status
-uniform bool u_stream5Connected; // Stream 5 connection status
-uniform bool u_stream6Connected; // Stream 6 connection status
-uniform bool u_stream7Connected; // Stream 7 connection status
+uniform int u_videoStreamCount; // Number of available compositor input streams (0-8)
+uniform sampler2D u_videoStream0; // Video stream 0 texture
+uniform sampler2D u_videoStream1; // Video stream 1 texture
+uniform sampler2D u_videoStream2; // Video stream 2 texture
+uniform sampler2D u_videoStream3; // Video stream 3 texture
+uniform sampler2D u_videoStream4; // Video stream 4 texture
+uniform sampler2D u_videoStream5; // Video stream 5 texture
+uniform sampler2D u_videoStream6; // Video stream 6 texture
+uniform sampler2D u_videoStream7; // Video stream 7 texture
+uniform vec2 u_videoStream0Resolution; // Video stream 0 resolution
+uniform vec2 u_videoStream1Resolution; // Video stream 1 resolution
+uniform vec2 u_videoStream2Resolution; // Video stream 2 resolution
+uniform vec2 u_videoStream3Resolution; // Video stream 3 resolution
+uniform vec2 u_videoStream4Resolution; // Video stream 4 resolution
+uniform vec2 u_videoStream5Resolution; // Video stream 5 resolution
+uniform vec2 u_videoStream6Resolution; // Video stream 6 resolution
+uniform vec2 u_videoStream7Resolution; // Video stream 7 resolution
+uniform bool u_videoStream0Connected; // Video stream 0 connection status
+uniform bool u_videoStream1Connected; // Video stream 1 connection status
+uniform bool u_videoStream2Connected; // Video stream 2 connection status
+uniform bool u_videoStream3Connected; // Video stream 3 connection status
+uniform bool u_videoStream4Connected; // Video stream 4 connection status
+uniform bool u_videoStream5Connected; // Video stream 5 connection status
+uniform bool u_videoStream6Connected; // Video stream 6 connection status
+uniform bool u_videoStream7Connected; // Video stream 7 connection status
 
 // Device Video Support (device cameras)
 uniform int u_deviceCount; // Number of device videos (0-8)
@@ -2745,6 +2757,81 @@ uniform bool u_device5Connected; // Device 5 connection status
 uniform bool u_device6Connected; // Device 6 connection status
 uniform bool u_device7Connected; // Device 7 connection status
 
+// Additional Audio Streams (lightweight analysis, no beat/FFT)
+uniform int u_audioStreamCount; // Number of additional audio streams (0-8)
+uniform bool u_audioStream0Connected; // Stream 0 connection status
+uniform float u_audioStream0Volume; // Stream 0 volume (0-1)
+uniform float u_audioStream0Low; // Stream 0 low band (0-1)
+uniform float u_audioStream0LowMid; // Stream 0 low-mid band (0-1)
+uniform float u_audioStream0Mid; // Stream 0 mid band (0-1)
+uniform float u_audioStream0HighMid; // Stream 0 high-mid band (0-1)
+uniform float u_audioStream0High; // Stream 0 high band (0-1)
+uniform float u_audioStream0Brightness; // Stream 0 spectral brightness (0-1)
+uniform float u_audioStream0Flatness; // Stream 0 spectral flatness (0-1)
+uniform bool u_audioStream1Connected;
+uniform float u_audioStream1Volume;
+uniform float u_audioStream1Low;
+uniform float u_audioStream1LowMid;
+uniform float u_audioStream1Mid;
+uniform float u_audioStream1HighMid;
+uniform float u_audioStream1High;
+uniform float u_audioStream1Brightness;
+uniform float u_audioStream1Flatness;
+uniform bool u_audioStream2Connected;
+uniform float u_audioStream2Volume;
+uniform float u_audioStream2Low;
+uniform float u_audioStream2LowMid;
+uniform float u_audioStream2Mid;
+uniform float u_audioStream2HighMid;
+uniform float u_audioStream2High;
+uniform float u_audioStream2Brightness;
+uniform float u_audioStream2Flatness;
+uniform bool u_audioStream3Connected;
+uniform float u_audioStream3Volume;
+uniform float u_audioStream3Low;
+uniform float u_audioStream3LowMid;
+uniform float u_audioStream3Mid;
+uniform float u_audioStream3HighMid;
+uniform float u_audioStream3High;
+uniform float u_audioStream3Brightness;
+uniform float u_audioStream3Flatness;
+uniform bool u_audioStream4Connected;
+uniform float u_audioStream4Volume;
+uniform float u_audioStream4Low;
+uniform float u_audioStream4LowMid;
+uniform float u_audioStream4Mid;
+uniform float u_audioStream4HighMid;
+uniform float u_audioStream4High;
+uniform float u_audioStream4Brightness;
+uniform float u_audioStream4Flatness;
+uniform bool u_audioStream5Connected;
+uniform float u_audioStream5Volume;
+uniform float u_audioStream5Low;
+uniform float u_audioStream5LowMid;
+uniform float u_audioStream5Mid;
+uniform float u_audioStream5HighMid;
+uniform float u_audioStream5High;
+uniform float u_audioStream5Brightness;
+uniform float u_audioStream5Flatness;
+uniform bool u_audioStream6Connected;
+uniform float u_audioStream6Volume;
+uniform float u_audioStream6Low;
+uniform float u_audioStream6LowMid;
+uniform float u_audioStream6Mid;
+uniform float u_audioStream6HighMid;
+uniform float u_audioStream6High;
+uniform float u_audioStream6Brightness;
+uniform float u_audioStream6Flatness;
+uniform bool u_audioStream7Connected;
+uniform float u_audioStream7Volume;
+uniform float u_audioStream7Low;
+uniform float u_audioStream7LowMid;
+uniform float u_audioStream7Mid;
+uniform float u_audioStream7HighMid;
+uniform float u_audioStream7High;
+uniform float u_audioStream7Brightness;
+uniform float u_audioStream7Flatness;
+
 // CV - Face Detection & Expressions
 uniform int u_faceCount; // Number of detected faces (0-1)
 uniform vec4 u_face0Bounds; // First face bounding box (x, y, width, height) normalized 0-1
@@ -2973,7 +3060,7 @@ ${error}`);
       if (info) {
         const location = gl.getUniformLocation(this.program, info.name);
         this.uniformLocations.set(info.name, location);
-        if (info.name.includes("stream") || info.name.includes("u_stream")) {
+        if (info.name.includes("Stream") || info.name.includes("stream")) {
           streamUniforms.push(info.name);
         }
       }
@@ -2993,8 +3080,8 @@ ${error}`);
     this.textureUnits.set("u_video", this.nextTextureUnit++);
     this.textureUnits.set("u_segmentationMask", this.nextTextureUnit++);
     this.textureUnits.set("u_keyboard", this.nextTextureUnit++);
-    for (let i = 0; i < ShaderWorkerAdapter.MAX_STREAMS; i++) {
-      this.textureUnits.set(`u_stream${i}`, this.nextTextureUnit++);
+    for (let i = 0; i < ShaderWorkerAdapter.MAX_VIDEO_STREAMS; i++) {
+      this.textureUnits.set(`u_videoStream${i}`, this.nextTextureUnit++);
     }
     if (this.backbufferEnabled) {
       this.textureUnits.set("backbuffer", this.nextTextureUnit++);
@@ -3165,18 +3252,18 @@ ${error}`);
       this.setUniform("u_videoResolution", "vec2", [0, 0]);
       this.setUniform("u_videoFrameRate", "float", 0);
     }
-    const streams = viji.streams || [];
-    const streamCount = Math.min(streams.length, ShaderWorkerAdapter.MAX_STREAMS);
-    this.setUniform("u_streamCount", "int", streamCount);
-    for (let i = 0; i < ShaderWorkerAdapter.MAX_STREAMS; i++) {
-      const connectedUniform = `u_stream${i}Connected`;
-      const resolutionUniform = `u_stream${i}Resolution`;
-      if (i < streamCount && streams[i]?.isConnected && streams[i]?.currentFrame) {
-        this.updateStreamTexture(i, streams[i].currentFrame);
+    const videoStreams = viji.videoStreams || [];
+    const videoStreamCount = Math.min(videoStreams.length, ShaderWorkerAdapter.MAX_VIDEO_STREAMS);
+    this.setUniform("u_videoStreamCount", "int", videoStreamCount);
+    for (let i = 0; i < ShaderWorkerAdapter.MAX_VIDEO_STREAMS; i++) {
+      const connectedUniform = `u_videoStream${i}Connected`;
+      const resolutionUniform = `u_videoStream${i}Resolution`;
+      if (i < videoStreamCount && videoStreams[i]?.isConnected && videoStreams[i]?.currentFrame) {
+        this.updateVideoStreamTexture(i, videoStreams[i].currentFrame);
         this.setUniform(
           resolutionUniform,
           "vec2",
-          [streams[i].frameWidth, streams[i].frameHeight]
+          [videoStreams[i].frameWidth, videoStreams[i].frameHeight]
         );
         this.setUniform(connectedUniform, "bool", true);
       } else {
@@ -3203,6 +3290,34 @@ ${error}`);
         this.setUniform(connectedUniform, "bool", false);
       }
     }
+    const audioStreams = viji.audioStreams || [];
+    const audioStreamCount = Math.min(audioStreams.length, ShaderWorkerAdapter.MAX_AUDIO_STREAMS);
+    this.setUniform("u_audioStreamCount", "int", audioStreamCount);
+    for (let i = 0; i < ShaderWorkerAdapter.MAX_AUDIO_STREAMS; i++) {
+      const prefix = `u_audioStream${i}`;
+      if (i < audioStreamCount && audioStreams[i]?.isConnected) {
+        const s = audioStreams[i];
+        this.setUniform(`${prefix}Connected`, "bool", true);
+        this.setUniform(`${prefix}Volume`, "float", s.volume?.current || 0);
+        this.setUniform(`${prefix}Low`, "float", s.bands?.low || 0);
+        this.setUniform(`${prefix}LowMid`, "float", s.bands?.lowMid || 0);
+        this.setUniform(`${prefix}Mid`, "float", s.bands?.mid || 0);
+        this.setUniform(`${prefix}HighMid`, "float", s.bands?.highMid || 0);
+        this.setUniform(`${prefix}High`, "float", s.bands?.high || 0);
+        this.setUniform(`${prefix}Brightness`, "float", s.spectral?.brightness || 0);
+        this.setUniform(`${prefix}Flatness`, "float", s.spectral?.flatness || 0);
+      } else {
+        this.setUniform(`${prefix}Connected`, "bool", false);
+        this.setUniform(`${prefix}Volume`, "float", 0);
+        this.setUniform(`${prefix}Low`, "float", 0);
+        this.setUniform(`${prefix}LowMid`, "float", 0);
+        this.setUniform(`${prefix}Mid`, "float", 0);
+        this.setUniform(`${prefix}HighMid`, "float", 0);
+        this.setUniform(`${prefix}High`, "float", 0);
+        this.setUniform(`${prefix}Brightness`, "float", 0);
+        this.setUniform(`${prefix}Flatness`, "float", 0);
+      }
+    }
     const faces = video.faces || [];
     this.setUniform("u_faceCount", "int", faces.length);
     if (faces.length > 0) {
@@ -3732,18 +3847,18 @@ ${error}`);
     }
   }
   /**
-   * Update compositor stream texture at specified index
+   * Update compositor video stream texture at specified index
    * Supports both OffscreenCanvas and ImageBitmap for zero-copy pipeline
    */
-  updateStreamTexture(index, streamFrame) {
+  updateVideoStreamTexture(index, streamFrame) {
     const gl = this.gl;
-    const uniformName = `u_stream${index}`;
+    const uniformName = `u_videoStream${index}`;
     const unit = this.textureUnits.get(uniformName);
-    if (!this.streamTextures[index]) {
-      this.streamTextures[index] = gl.createTexture();
+    if (!this.videoStreamTextures[index]) {
+      this.videoStreamTextures[index] = gl.createTexture();
     }
     gl.activeTexture(gl.TEXTURE0 + unit);
-    gl.bindTexture(gl.TEXTURE_2D, this.streamTextures[index]);
+    gl.bindTexture(gl.TEXTURE_2D, this.videoStreamTextures[index]);
     const shouldFlip = streamFrame instanceof OffscreenCanvas;
     if (shouldFlip) {
       gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
@@ -3934,10 +4049,10 @@ ${error}`);
     if (this.audioWaveformTexture) gl.deleteTexture(this.audioWaveformTexture);
     if (this.videoTexture) gl.deleteTexture(this.videoTexture);
     if (this.segmentationTexture) gl.deleteTexture(this.segmentationTexture);
-    for (const texture of this.streamTextures) {
+    for (const texture of this.videoStreamTextures) {
       if (texture) gl.deleteTexture(texture);
     }
-    this.streamTextures = [];
+    this.videoStreamTextures = [];
     for (const texture of this.deviceTextures) {
       if (texture) gl.deleteTexture(texture);
     }
@@ -4027,6 +4142,11 @@ class VijiWorkerRuntime {
   };
   // Map deviceId → streamIndex for O(1) device video lookup
   deviceVideoMap = /* @__PURE__ */ new Map();
+  // Audio stream state management (mirroring video stream pattern)
+  static AUDIO_ADDITIONAL_BASE = 1;
+  static AUDIO_DEVICE_BASE = 100;
+  audioStreamStates = /* @__PURE__ */ new Map();
+  deviceAudioMap = /* @__PURE__ */ new Map();
   // Video state is now managed by the worker-side VideoSystem
   // Artist API object
   viji = {
@@ -4124,7 +4244,9 @@ class VijiWorkerRuntime {
       }
     },
     // Additional video streams (index 1+, no CV)
-    streams: [],
+    videoStreams: [],
+    // Additional audio streams (lightweight analysis, no beat detection)
+    audioStreams: [],
     // Interaction APIs will be added during construction
     mouse: {},
     keyboard: {},
@@ -4195,7 +4317,7 @@ class VijiWorkerRuntime {
    * Initialize P5.js mode
    * Sets up P5 rendering with P5WorkerAdapter
    */
-  async initP5Mode(setup, render) {
+  async initP5Mode(setup, render, options) {
     try {
       this.rendererType = "p5";
       this.debugLog("🎨 Initializing P5.js mode...");
@@ -4204,7 +4326,8 @@ class VijiWorkerRuntime {
         this.viji,
         {
           setup,
-          render
+          render,
+          canvasMode: options?.canvasMode === "webgl" ? "webgl" : "2d"
         }
       );
       await this.p5Adapter.init();
@@ -4296,20 +4419,47 @@ class VijiWorkerRuntime {
     if (this.videoSystems[0]) {
       Object.assign(this.viji.video, this.videoSystems[0].getVideoAPI());
     }
-    this.updateVijiStreams();
+    this.updateVijiVideoStreams();
   }
   /**
-   * Updates viji.streams from videoSystems array.
+   * Updates viji.videoStreams from videoSystems array.
    * Collects 'additional' MediaStreams first, then 'directFrame' injected frames.
    * Excludes 'main' and 'device' streams (those go to viji.video and viji.devices[].video).
    */
-  updateVijiStreams() {
+  updateVijiVideoStreams() {
     const additional = this.videoSystems.filter((vs) => vs && vs.getStreamType() === "additional").map((vs) => vs.getVideoAPI());
     const directFrames = this.videoSystems.filter((vs) => vs && vs.getStreamType() === "directFrame").map((vs) => vs.getVideoAPI());
     const freshStreams = [...additional, ...directFrames];
-    this.viji.streams.length = freshStreams.length;
+    this.viji.videoStreams.length = freshStreams.length;
     for (let i = 0; i < freshStreams.length; i++) {
-      this.viji.streams[i] = freshStreams[i];
+      this.viji.videoStreams[i] = freshStreams[i];
+    }
+  }
+  /**
+   * Rebuilds viji.audioStreams from audioStreamStates.
+   * Collects entries in the additional range (1-99), maps to AudioStreamAPI objects.
+   */
+  updateVijiAudioStreams() {
+    const entries = [];
+    for (const [idx, state2] of this.audioStreamStates) {
+      if (idx >= VijiWorkerRuntime.AUDIO_ADDITIONAL_BASE && idx < VijiWorkerRuntime.AUDIO_DEVICE_BASE) {
+        entries.push({ index: idx, ...state2 });
+      }
+    }
+    entries.sort((a, b) => a.index - b.index);
+    this.viji.audioStreams.length = entries.length;
+    for (let i = 0; i < entries.length; i++) {
+      const s = entries[i];
+      const freqData = s.frequencyData;
+      const waveData = s.waveformData;
+      this.viji.audioStreams[i] = {
+        isConnected: s.isConnected,
+        volume: s.volume,
+        bands: s.bands,
+        spectral: s.spectral,
+        getFrequencyData: () => freqData,
+        getWaveform: () => waveData
+      };
     }
   }
   // Send all parameters (from helper functions) to host
@@ -4353,6 +4503,9 @@ class VijiWorkerRuntime {
         case "audio-analysis-update":
           this.handleAudioAnalysisUpdate(message);
           break;
+        case "audio-stream-setup":
+          this.handleAudioStreamSetup(message);
+          break;
         case "video-canvas-setup":
           this.handleVideoCanvasSetup(message);
           break;
@@ -4522,6 +4675,14 @@ class VijiWorkerRuntime {
   }
   handleAudioAnalysisUpdate(message) {
     const d = message.data;
+    const streamIndex = d.streamIndex ?? 0;
+    if (streamIndex === 0) {
+      this.handleMainAudioUpdate(d);
+    } else {
+      this.handleAdditionalAudioUpdate(streamIndex, d);
+    }
+  }
+  handleMainAudioUpdate(d) {
     const audio = this.viji.audio;
     audio.isConnected = d.isConnected;
     audio.volume.current = d.volume.current;
@@ -4537,30 +4698,78 @@ class VijiWorkerRuntime {
     audio.bands.midSmoothed = d.bands.midSmoothed;
     audio.bands.highMidSmoothed = d.bands.highMidSmoothed;
     audio.bands.highSmoothed = d.bands.highSmoothed;
-    audio.beat.kick = d.beat.kick;
-    audio.beat.snare = d.beat.snare;
-    audio.beat.hat = d.beat.hat;
-    audio.beat.any = d.beat.any;
-    audio.beat.kickSmoothed = d.beat.kickSmoothed;
-    audio.beat.snareSmoothed = d.beat.snareSmoothed;
-    audio.beat.hatSmoothed = d.beat.hatSmoothed;
-    audio.beat.anySmoothed = d.beat.anySmoothed;
-    const events = d.beat.events || [];
-    if (events.length > 0) {
-      audio.beat.triggers.kick = audio.beat.triggers.kick || events.some((e) => e.type === "kick");
-      audio.beat.triggers.snare = audio.beat.triggers.snare || events.some((e) => e.type === "snare");
-      audio.beat.triggers.hat = audio.beat.triggers.hat || events.some((e) => e.type === "hat");
-      audio.beat.triggers.any = true;
-      audio.beat.events.push(...events);
-    }
-    audio.beat.bpm = d.beat.bpm;
-    audio.beat.confidence = d.beat.confidence;
-    audio.beat.isLocked = d.beat.isLocked;
+    if (d.beat) {
+      audio.beat.kick = d.beat.kick;
+      audio.beat.snare = d.beat.snare;
+      audio.beat.hat = d.beat.hat;
+      audio.beat.any = d.beat.any;
+      audio.beat.kickSmoothed = d.beat.kickSmoothed;
+      audio.beat.snareSmoothed = d.beat.snareSmoothed;
+      audio.beat.hatSmoothed = d.beat.hatSmoothed;
+      audio.beat.anySmoothed = d.beat.anySmoothed;
+      const events = d.beat.events || [];
+      if (events.length > 0) {
+        audio.beat.triggers.kick = audio.beat.triggers.kick || events.some((e) => e.type === "kick");
+        audio.beat.triggers.snare = audio.beat.triggers.snare || events.some((e) => e.type === "snare");
+        audio.beat.triggers.hat = audio.beat.triggers.hat || events.some((e) => e.type === "hat");
+        audio.beat.triggers.any = true;
+        audio.beat.events.push(...events);
+      }
+      audio.beat.bpm = d.beat.bpm;
+      audio.beat.confidence = d.beat.confidence;
+      audio.beat.isLocked = d.beat.isLocked;
+    }
     audio.spectral.brightness = d.spectral.brightness;
     audio.spectral.flatness = d.spectral.flatness;
     this.audioFrequencyData = new Uint8Array(d.frequencyData);
     this.audioWaveformData = d.waveformData ? new Float32Array(d.waveformData) : new Float32Array(0);
   }
+  handleAdditionalAudioUpdate(streamIndex, d) {
+    const frequencyData = new Uint8Array(d.frequencyData);
+    const waveformData = d.waveformData ? new Float32Array(d.waveformData) : new Float32Array(0);
+    this.audioStreamStates.set(streamIndex, {
+      isConnected: d.isConnected,
+      volume: { ...d.volume },
+      bands: { ...d.bands },
+      spectral: { ...d.spectral },
+      frequencyData,
+      waveformData
+    });
+    this.updateVijiAudioStreams();
+  }
+  /**
+   * Handles audio-stream-setup: registers stream type and device mapping.
+   * Mirrors handleVideoCanvasSetup — two-phase protocol where setup establishes
+   * the stream identity, and subsequent audio-analysis-update messages carry data.
+   */
+  handleAudioStreamSetup(message) {
+    const { streamIndex, streamType, deviceId } = message.data;
+    switch (streamType) {
+      case "additional":
+        this.updateVijiAudioStreams();
+        break;
+      case "device":
+        if (deviceId) {
+          this.deviceAudioMap.set(deviceId, streamIndex);
+          const device = this.viji.devices.find((d) => d.id === deviceId);
+          if (device) {
+            const audioState = this.audioStreamStates.get(streamIndex);
+            if (audioState) {
+              device.audio = {
+                isConnected: audioState.isConnected,
+                volume: audioState.volume,
+                bands: audioState.bands,
+                spectral: audioState.spectral,
+                getFrequencyData: () => audioState.frequencyData,
+                getWaveform: () => audioState.waveformData
+              };
+            }
+          }
+        }
+        break;
+    }
+    this.debugLog(`Audio stream setup at index ${streamIndex}, type: ${streamType}${deviceId ? `, deviceId: ${deviceId}` : ""}`);
+  }
   /**
    * Reset frame-scoped audio events (triggers + events array).
    * Called after each render, mirroring interactionSystem.frameStart().
@@ -4613,6 +4822,9 @@ class VijiWorkerRuntime {
     audio.spectral.flatness = 0;
     this.audioFrequencyData = new Uint8Array(0);
     this.audioWaveformData = new Float32Array(0);
+    this.audioStreamStates.clear();
+    this.deviceAudioMap.clear();
+    this.viji.audioStreams.length = 0;
   }
   handleVideoCanvasSetup(message) {
     const { streamIndex, streamType, deviceId } = message.data;
@@ -4633,7 +4845,7 @@ class VijiWorkerRuntime {
         Object.assign(this.viji.video, videoSystem.getVideoAPI());
         break;
       case "additional":
-        this.updateVijiStreams();
+        this.updateVijiVideoStreams();
         break;
       case "device":
         if (deviceId) {
@@ -4724,7 +4936,7 @@ class VijiWorkerRuntime {
       this.videoSystems[index].setDebugMode(this.debugMode);
       this.videoSystems[index].initializeForDirectFrames(this.rendererType);
     }
-    this.updateVijiStreams();
+    this.updateVijiVideoStreams();
     this.debugLog(`[Compositor] Prepared ${directFrameCount} direct frame slot(s)`);
   }
   handleVideoFrameDirect(message) {
@@ -4852,7 +5064,8 @@ class VijiWorkerRuntime {
   renderFrame() {
     if (!this.isRunning) return;
     const currentTime = performance.now();
-    this.updateVijiStreams();
+    this.updateVijiVideoStreams();
+    this.updateVijiAudioStreams();
     this.viji.fps = this.frameRateMode === "full" ? this.screenRefreshRate : this.screenRefreshRate / 2;
     let shouldRender = true;
     if (this.frameRateMode === "half") {
@@ -4952,17 +5165,29 @@ class VijiWorkerRuntime {
     this.viji.device = this.deviceState.device;
     const updatedDevices = this.deviceState.devices.map((deviceData) => {
       const existingDevice = this.viji.devices.find((d) => d.id === deviceData.id);
+      const videoStreamIndex = this.deviceVideoMap.get(deviceData.id);
+      const videoSystem = videoStreamIndex !== void 0 ? this.videoSystems[videoStreamIndex] : void 0;
+      const audioStreamIndex = this.deviceAudioMap.get(deviceData.id);
+      const audioState = audioStreamIndex !== void 0 ? this.audioStreamStates.get(audioStreamIndex) : void 0;
+      const audioAPI = audioState ? {
+        isConnected: audioState.isConnected,
+        volume: audioState.volume,
+        bands: audioState.bands,
+        spectral: audioState.spectral,
+        getFrequencyData: () => audioState.frequencyData,
+        getWaveform: () => audioState.waveformData
+      } : null;
       if (existingDevice) {
         existingDevice.name = deviceData.name;
         existingDevice.motion = deviceData.motion;
         existingDevice.orientation = deviceData.orientation;
+        if (audioAPI) existingDevice.audio = audioAPI;
         return existingDevice;
       } else {
-        const streamIndex = this.deviceVideoMap.get(deviceData.id);
-        const videoSystem = streamIndex !== void 0 ? this.videoSystems[streamIndex] : void 0;
         return {
           ...deviceData,
-          video: videoSystem ? videoSystem.getVideoAPI() : null
+          video: videoSystem ? videoSystem.getVideoAPI() : null,
+          audio: audioAPI
         };
       }
     });
@@ -4991,6 +5216,21 @@ class SceneAnalyzer {
     }
     return "native";
   }
+  /**
+   * P5 main-canvas mode from the renderer directive (only meaningful when
+   * {@link detectRendererType} is `'p5'`).
+   *
+   * - `// @renderer p5` → 2D (default)
+   * - `// @renderer p5 webgl` → WEBGL
+   */
+  static detectP5CanvasMode(sceneCode) {
+    if (/\/\/\s*@renderer\s+p5\s+webgl\b|\/\*\s*@renderer\s+p5\s+webgl\s*\*\//i.test(
+      sceneCode
+    )) {
+      return "webgl";
+    }
+    return "2d";
+  }
 }
 var ContextualKeyword;
 (function(ContextualKeyword2) {
@@ -26312,6 +26552,7 @@ async function setSceneCode(sceneCode) {
       await runtime.initShaderMode(sceneCode);
       runtime.sendAllParametersToHost();
     } else if (rendererType === "p5") {
+      const p5CanvasMode = SceneAnalyzer.detectP5CanvasMode(sceneCode);
       const jsCode = prepareSceneCode(sceneCode);
       const functionBody = jsCode + '\nreturn {   setup: typeof setup !== "undefined" ? setup : null,   render: typeof render !== "undefined" ? render : null };';
       const sceneFunction = new Function("viji", "p5", functionBody);
@@ -26319,7 +26560,7 @@ async function setSceneCode(sceneCode) {
       if (!render) {
         throw new Error("P5 mode requires a render(viji, p5) function");
       }
-      await runtime.initP5Mode(setup, render);
+      await runtime.initP5Mode(setup, render, { canvasMode: p5CanvasMode });
       runtime.sendAllParametersToHost();
     } else {
       const jsCode = prepareSceneCode(sceneCode);
@@ -26345,4 +26586,4 @@ async function setSceneCode(sceneCode) {
   }
 }
 self.setSceneCode = setSceneCode;
-//# sourceMappingURL=viji.worker-PAf0oIec.js.map
+//# sourceMappingURL=viji.worker-jTmB7qoQ.js.map