@twick/browser-render 0.15.7 → 0.15.9

package/dist/index.mjs

@@ -1,6 +1,169 @@
 // src/browser-renderer.ts
 import { Renderer, Vector2 } from "@twick/core";
 import defaultProject from "@twick/visualizer/dist/project.js";
+import { hasAudio } from "@twick/media-utils";
+
+// src/audio/video-audio-extractor.ts
+var VideoElementAudioExtractor = class {
+  audioContext;
+  video;
+  destination = null;
+  mediaRecorder = null;
+  audioChunks = [];
+  constructor(videoSrc, sampleRate = 48e3) {
+    this.audioContext = new AudioContext({ sampleRate });
+    this.video = document.createElement("video");
+    this.video.crossOrigin = "anonymous";
+    this.video.src = videoSrc;
+    this.video.muted = true;
+  }
+  async initialize() {
+    return new Promise((resolve, reject) => {
+      this.video.addEventListener("loadedmetadata", () => resolve(), { once: true });
+      this.video.addEventListener("error", (e) => {
+        reject(new Error(`Failed to load video for audio extraction: ${e}`));
+      }, { once: true });
+    });
+  }
+  /**
+   * Extract audio by playing the video and capturing audio output
+   */
+  async extractAudio(startTime, duration, playbackRate = 1) {
+    try {
+      const source = this.audioContext.createMediaElementSource(this.video);
+      this.destination = this.audioContext.createMediaStreamDestination();
+      source.connect(this.destination);
+    } catch (err) {
+      throw new Error("Video has no audio track");
+    }
+    this.audioChunks = [];
+    let mimeType = "audio/webm";
+    if (!MediaRecorder.isTypeSupported(mimeType)) {
+      mimeType = "";
+    }
+    try {
+      this.mediaRecorder = new MediaRecorder(this.destination.stream, {
+        mimeType: mimeType || void 0
+      });
+    } catch (err) {
+      throw new Error(`Failed to create MediaRecorder: ${err}. Video may have no audio track.`);
+    }
+    this.mediaRecorder.ondataavailable = (event) => {
+      if (event.data && event.data.size > 0) {
+        this.audioChunks.push(event.data);
+      }
+    };
+    this.video.currentTime = startTime;
+    this.video.playbackRate = playbackRate;
+    await new Promise((resolve, reject) => {
+      const seekTimeout = setTimeout(() => {
+        reject(new Error("Video seek timeout"));
+      }, 5e3);
+      this.video.addEventListener("seeked", () => {
+        clearTimeout(seekTimeout);
+        resolve();
+      }, { once: true });
+      this.video.addEventListener("error", () => {
+        clearTimeout(seekTimeout);
+        reject(new Error("Video seek error"));
+      }, { once: true });
+    });
+    return new Promise((resolve, reject) => {
+      const recordingTimeout = setTimeout(() => {
+        this.video.pause();
+        if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
+          this.mediaRecorder.stop();
+        }
+        reject(new Error("Audio extraction timeout - video may have no audio track"));
+      }, (duration / playbackRate + 10) * 1e3);
+      let hasData = false;
+      const dataCheckInterval = setInterval(() => {
+        if (this.audioChunks.length > 0 && this.audioChunks.some((chunk) => chunk.size > 0)) {
+          hasData = true;
+        }
+      }, 1e3);
+      this.mediaRecorder.onerror = (event) => {
+        clearInterval(dataCheckInterval);
+        clearTimeout(recordingTimeout);
+        this.video.pause();
+        reject(new Error(`MediaRecorder error: ${event}. Video may have no audio track.`));
+      };
+      try {
+        this.mediaRecorder.start(100);
+        this.video.play().catch((playErr) => {
+          clearInterval(dataCheckInterval);
+          clearTimeout(recordingTimeout);
+          reject(new Error(`Failed to play video: ${playErr}`));
+        });
+      } catch (startErr) {
+        clearInterval(dataCheckInterval);
+        clearTimeout(recordingTimeout);
+        reject(new Error(`Failed to start recording: ${startErr}`));
+      }
+      setTimeout(async () => {
+        clearInterval(dataCheckInterval);
+        clearTimeout(recordingTimeout);
+        this.video.pause();
+        if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
+          this.mediaRecorder.stop();
+        }
+        const stopTimeout = setTimeout(() => {
+          if (this.audioChunks.length === 0 || !hasData) {
+            reject(new Error("No audio data captured - video has no audio track"));
+          }
+        }, 2e3);
+        await new Promise((res) => {
+          if (this.mediaRecorder) {
+            this.mediaRecorder.addEventListener("stop", () => {
+              clearTimeout(stopTimeout);
+              res();
+            }, { once: true });
+          } else {
+            clearTimeout(stopTimeout);
+            res();
+          }
+        });
+        try {
+          if (this.audioChunks.length === 0 || !this.audioChunks.some((chunk) => chunk.size > 0)) {
+            throw new Error("No audio data captured - video has no audio track");
+          }
+          const audioBlob = new Blob(this.audioChunks, { type: "audio/webm" });
+          if (audioBlob.size === 0) {
+            throw new Error("Audio blob is empty - video has no audio track");
+          }
+          const arrayBuffer = await audioBlob.arrayBuffer();
+          const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
+          if (audioBuffer.length === 0 || audioBuffer.duration === 0) {
+            throw new Error("Audio buffer is empty - video has no audio track");
+          }
+          resolve(audioBuffer);
+        } catch (err) {
+          reject(new Error(`Failed to decode recorded audio: ${err}`));
+        }
+      }, duration / playbackRate * 1e3);
+    });
+  }
+  async close() {
+    if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
+      this.mediaRecorder.stop();
+    }
+    this.video.pause();
+    this.video.src = "";
+    if (this.audioContext.state !== "closed") {
+      await this.audioContext.close();
+    }
+  }
+};
+async function extractAudioFromVideo(videoSrc, startTime, duration, playbackRate = 1, sampleRate = 48e3) {
+  const extractor = new VideoElementAudioExtractor(videoSrc, sampleRate);
+  try {
+    await extractor.initialize();
+    const audioBuffer = await extractor.extractAudio(startTime, duration, playbackRate);
+    return audioBuffer;
+  } finally {
+    await extractor.close();
+  }
+}
 
 // src/audio/audio-processor.ts
 function getAssetPlacement(frames) {
@@ -54,11 +217,26 @@ var BrowserAudioProcessor = class {
   audioContext;
   /**
    * Fetch and decode audio from a media source
+   * Falls back to video element extraction if decodeAudioData fails
    */
   async fetchAndDecodeAudio(src) {
-    const response = await fetch(src);
-    const arrayBuffer = await response.arrayBuffer();
-    return await this.audioContext.decodeAudioData(arrayBuffer);
+    try {
+      const response = await fetch(src);
+      const arrayBuffer = await response.arrayBuffer();
+      return await this.audioContext.decodeAudioData(arrayBuffer);
+    } catch (err) {
+      try {
+        return await extractAudioFromVideo(
+          src,
+          0,
+          999999,
+          1,
+          this.sampleRate
+        );
+      } catch (fallbackErr) {
+        throw new Error(`Failed to extract audio: ${err}. Fallback also failed: ${fallbackErr}`);
+      }
+    }
   }
   /**
    * Process audio asset with playback rate, volume, and timing
@@ -172,6 +350,99 @@ var BrowserAudioProcessor = class {
   }
 };
 
+// src/audio/audio-video-muxer.ts
+function getFFmpegBaseURL() {
+  if (typeof window !== "undefined") {
+    return `${window.location.origin}/ffmpeg`;
+  }
+  return "/ffmpeg";
+}
+async function muxAudioVideo(options) {
+  const muxStartTime = Date.now();
+  try {
+    console.log("Starting FFmpeg muxing...");
+    console.log(`  Video blob size: ${options.videoBlob.size} bytes (${(options.videoBlob.size / 1024 / 1024).toFixed(2)} MB)`);
+    console.log(`  Audio buffer size: ${options.audioBuffer.byteLength} bytes (${(options.audioBuffer.byteLength / 1024 / 1024).toFixed(2)} MB)`);
+    const { FFmpeg } = await import("@ffmpeg/ffmpeg");
+    const { fetchFile } = await import("@ffmpeg/util");
+    const ffmpeg = new FFmpeg();
+    const base = getFFmpegBaseURL();
+    const coreURL = `${base}/ffmpeg-core.js`;
+    const wasmURL = `${base}/ffmpeg-core.wasm`;
+    console.log(`Loading FFmpeg from ${base}`);
+    const loadStartTime = Date.now();
+    await ffmpeg.load({
+      coreURL,
+      wasmURL
+    });
+    const loadDuration = Date.now() - loadStartTime;
+    console.log(`FFmpeg loaded successfully in ${loadDuration}ms`);
+    console.log("Writing video and audio files...");
+    const writeStartTime = Date.now();
+    await ffmpeg.writeFile(
+      "video.mp4",
+      await fetchFile(options.videoBlob)
+    );
+    console.log(`  Video file written: ${options.videoBlob.size} bytes`);
+    await ffmpeg.writeFile(
+      "audio.wav",
+      new Uint8Array(options.audioBuffer)
+    );
+    const writeDuration = Date.now() - writeStartTime;
+    console.log(`  Audio file written: ${options.audioBuffer.byteLength} bytes`);
+    console.log(`Files written successfully in ${writeDuration}ms`);
+    console.log("Executing FFmpeg muxing command...");
+    const execStartTime = Date.now();
+    const ffmpegLogs = [];
+    ffmpeg.on("log", ({ message }) => {
+      ffmpegLogs.push(message);
+      console.log(`  [FFmpeg] ${message}`);
+    });
+    await ffmpeg.exec([
+      "-i",
+      "video.mp4",
+      "-i",
+      "audio.wav",
+      "-c:v",
+      "copy",
+      "-c:a",
+      "aac",
+      "-b:a",
+      "192k",
+      "-shortest",
+      "output.mp4"
+    ]);
+    const execDuration = Date.now() - execStartTime;
+    console.log(`FFmpeg muxing completed in ${execDuration}ms`);
+    const readStartTime = Date.now();
+    const data = await ffmpeg.readFile("output.mp4");
+    const readDuration = Date.now() - readStartTime;
+    console.log(`Output file read successfully in ${readDuration}ms`);
+    const uint8 = typeof data === "string" ? new TextEncoder().encode(data) : new Uint8Array(data);
+    const result = new Blob([uint8], { type: "video/mp4" });
+    const totalDuration = Date.now() - muxStartTime;
+    console.log(`Muxing successful: ${result.size} bytes (${(result.size / 1024 / 1024).toFixed(2)} MB) in ${totalDuration}ms`);
+    console.log(`  Breakdown: load=${loadDuration}ms, write=${writeDuration}ms, exec=${execDuration}ms, read=${readDuration}ms`);
+    return result;
+  } catch (error) {
+    const totalDuration = Date.now() - muxStartTime;
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    const errorStack = error instanceof Error ? error.stack : void 0;
+    console.error("FFmpeg muxing failed:", errorMsg);
+    if (errorStack) {
+      console.error("Error stack:", errorStack);
+    }
+    console.error("Error details:", {
+      errorType: error instanceof Error ? error.constructor.name : typeof error,
+      errorMessage: errorMsg,
+      duration: `${totalDuration}ms`,
+      videoBlobSize: options.videoBlob.size,
+      audioBufferSize: options.audioBuffer.byteLength
+    });
+    throw error;
+  }
+}
+
 // src/browser-renderer.ts
 var BrowserWasmExporter = class _BrowserWasmExporter {
   constructor(settings) {
@@ -232,7 +503,6 @@ var BrowserWasmExporter = class _BrowserWasmExporter {
         fps: this.fps
       });
     } catch (error) {
-      console.error("WASM loading error:", error);
       throw error;
     }
   }
@@ -255,42 +525,99 @@ var BrowserWasmExporter = class _BrowserWasmExporter {
   }
   async generateAudio(assets, startFrame, endFrame) {
     try {
-      console.log("\u{1F50A} Starting audio processing...", {
-        frames: assets.length,
-        startFrame,
-        endFrame
-      });
+      console.log(`Generating audio from ${assets.length} frames`);
       const processor = new BrowserAudioProcessor();
       const assetPlacements = getAssetPlacement(assets);
-      console.log(`\u{1F4CA} Found ${assetPlacements.length} audio assets to process`);
       if (assetPlacements.length === 0) {
-        console.log("\u26A0\uFE0F No audio assets found");
+        console.log("No asset placements found");
         return null;
       }
+      console.log(`Processing ${assetPlacements.length} asset placements`);
       const processedBuffers = [];
-      for (const asset of assetPlacements) {
+      for (let i = 0; i < assetPlacements.length; i++) {
+        const asset = assetPlacements[i];
+        console.log(`[${i + 1}/${assetPlacements.length}] Processing asset: ${asset.src} (type: ${asset.type}, volume: ${asset.volume}, playbackRate: ${asset.playbackRate})`);
         if (asset.volume > 0 && asset.playbackRate > 0) {
-          console.log(`\u{1F3B5} Processing audio: ${asset.key}`);
-          const buffer = await processor.processAudioAsset(
-            asset,
-            this.settings.fps || 30,
-            endFrame - startFrame
-          );
-          processedBuffers.push(buffer);
+          const startTime = Date.now();
+          try {
+            if (asset.type === "video") {
+              console.log(`  \u2192 Checking if asset has audio: ${asset.src.substring(0, 50)}...`);
+              try {
+                const assetHasAudio = await hasAudio(asset.src);
+                if (!assetHasAudio) {
+                  console.log(`  \u23ED Skipping asset (no audio detected): ${asset.src.substring(0, 50)}...`);
+                  continue;
+                }
+                console.log(`  \u2713 Asset has audio, proceeding: ${asset.src.substring(0, 50)}...`);
+              } catch (audioCheckError) {
+                const errorMsg = audioCheckError instanceof Error ? audioCheckError.message : String(audioCheckError);
+                const errorStack = audioCheckError instanceof Error ? audioCheckError.stack : void 0;
+                console.warn(`  \u26A0 Audio check failed, proceeding anyway: ${asset.src.substring(0, 50)}...`);
+                console.warn(`    Error: ${errorMsg}`);
+                if (errorStack) {
+                  console.warn(`    Stack: ${errorStack}`);
+                }
+              }
+            }
+            console.log(`  \u2192 Starting processAudioAsset for: ${asset.src}`);
+            const processPromise = processor.processAudioAsset(
+              asset,
+              this.settings.fps || 30,
+              endFrame - startFrame
+            );
+            const timeoutPromise = new Promise((_, reject) => {
+              setTimeout(() => {
+                reject(new Error(`Timeout processing audio asset after 20s - video may have no audio track`));
+              }, 2e4);
+            });
+            const buffer = await Promise.race([processPromise, timeoutPromise]);
+            const duration = Date.now() - startTime;
+            console.log(`  \u2713 Successfully processed audio asset in ${duration}ms: ${asset.src.substring(0, 50)}...`);
+            processedBuffers.push(buffer);
+          } catch (error) {
+            const errorMsg = error instanceof Error ? error.message : String(error);
+            const errorStack = error instanceof Error ? error.stack : void 0;
+            const duration = Date.now() - startTime;
+            console.warn(`  \u2717 Failed to process audio asset after ${duration}ms: ${asset.src.substring(0, 50)}...`);
+            console.warn(`    Error: ${errorMsg}`);
+            if (errorStack) {
+              console.warn(`    Stack: ${errorStack}`);
+            }
+            console.warn(`    Asset details: type=${asset.type}, volume=${asset.volume}, playbackRate=${asset.playbackRate}, startFrame=${asset.startInVideo}, endFrame=${asset.endInVideo}`);
+          }
+        } else {
+          console.log(`  \u23ED Skipping asset: volume=${asset.volume}, playbackRate=${asset.playbackRate}`);
         }
       }
       if (processedBuffers.length === 0) {
-        console.log("\u26A0\uFE0F No audio buffers to mix");
+        console.warn("No audio buffers were successfully processed");
+        console.warn(`  Total assets attempted: ${assetPlacements.length}`);
+        console.warn(`  Assets with volume>0 and playbackRate>0: ${assetPlacements.filter((a) => a.volume > 0 && a.playbackRate > 0).length}`);
         return null;
       }
-      console.log(`\u{1F39B}\uFE0F Mixing ${processedBuffers.length} audio track(s)...`);
+      console.log(`Mixing ${processedBuffers.length} audio buffers`);
+      const mixStartTime = Date.now();
       const mixedBuffer = processor.mixAudioBuffers(processedBuffers);
+      const mixDuration = Date.now() - mixStartTime;
+      console.log(`Audio mixing completed in ${mixDuration}ms`);
+      const wavStartTime = Date.now();
       const wavData = processor.audioBufferToWav(mixedBuffer);
+      const wavDuration = Date.now() - wavStartTime;
+      console.log(`WAV conversion completed in ${wavDuration}ms`);
+      console.log(`Audio generation complete: ${wavData.byteLength} bytes (${(wavData.byteLength / 1024 / 1024).toFixed(2)} MB)`);
       await processor.close();
-      console.log(`\u2705 Audio processed: ${(wavData.byteLength / 1024 / 1024).toFixed(2)} MB`);
       return wavData;
     } catch (error) {
-      console.error("\u274C Audio processing failed:", error);
+      const errorMsg = error instanceof Error ? error.message : String(error);
+      const errorStack = error instanceof Error ? error.stack : void 0;
+      console.error("Audio generation error:", errorMsg);
+      if (errorStack) {
+        console.error("Error stack:", errorStack);
+      }
+      console.error("Error details:", {
+        errorType: error instanceof Error ? error.constructor.name : typeof error,
+        errorMessage: errorMsg
+      });
       return null;
     }
   }
@@ -335,12 +662,7 @@ var renderTwickVideoInBrowser = async (config) => {
     const width = settings.width || variables.input.properties?.width || 1920;
     const height = settings.height || variables.input.properties?.height || 1080;
     const fps = settings.fps || variables.input.properties?.fps || 30;
-    let project;
-    if (!projectFile) {
-      project = defaultProject;
-    } else {
-      project = projectFile;
-    }
+    const project = !projectFile ? defaultProject : projectFile;
     project.variables = variables;
     const renderSettings = {
       name: "browser-render",
@@ -368,6 +690,65 @@ var renderTwickVideoInBrowser = async (config) => {
     renderer.playback.fps = renderSettings.fps;
     renderer.playback.state = 1;
     const totalFrames = await renderer.getNumberOfFrames(renderSettings);
+    if (totalFrames === 0 || !isFinite(totalFrames)) {
+      throw new Error(
+        "Cannot render: Video has zero duration. Please ensure your project has valid content with non-zero duration. Check that all video elements have valid sources and are properly loaded."
+      );
+    }
+    const videoElements = [];
+    if (variables.input.tracks) {
+      variables.input.tracks.forEach((track) => {
+        if (track.elements) {
+          track.elements.forEach((el) => {
+            if (el.type === "video") videoElements.push(el);
+          });
+        }
+      });
+    }
+    let hasAnyAudio = false;
+    console.log(`Found ${videoElements.length} video element(s) to check for audio`);
+    if (videoElements.length > 0) {
+      for (const videoEl of videoElements) {
+        const src = videoEl.props?.src;
+        if (!src || src === "undefined") continue;
+        const preloadVideo = document.createElement("video");
+        preloadVideo.crossOrigin = "anonymous";
+        preloadVideo.preload = "metadata";
+        preloadVideo.src = src;
+        await new Promise((resolve, reject) => {
+          const timeout = setTimeout(
+            () => reject(new Error(`Timeout loading video metadata: ${src.substring(0, 80)}`)),
+            3e4
+          );
+          preloadVideo.addEventListener("loadedmetadata", () => {
+            clearTimeout(timeout);
+            resolve();
+          }, { once: true });
+          preloadVideo.addEventListener("error", () => {
+            clearTimeout(timeout);
+            const err = preloadVideo.error;
+            reject(new Error(`Failed to load video: ${err?.message || "Unknown error"}`));
+          }, { once: true });
+        });
+        if (settings.includeAudio) {
+          try {
+            console.log(`Checking if video has audio: ${src.substring(0, 50)}...`);
+            const videoHasAudio = await hasAudio(src);
+            console.log(`Audio check result for ${src.substring(0, 50)}...: ${videoHasAudio ? "HAS AUDIO" : "NO AUDIO"}`);
+            if (videoHasAudio) {
+              hasAnyAudio = true;
+              console.log(`\u2713 Video has audio: ${src.substring(0, 50)}...`);
+            } else {
+              console.log(`\u2717 Video has no audio: ${src.substring(0, 50)}...`);
+            }
+          } catch (error) {
+            console.warn(`Failed to check audio for ${src.substring(0, 50)}...:`, error);
+            hasAnyAudio = true;
+            console.log(`\u26A0 Assuming video might have audio due to check error`);
+          }
+        }
+      }
+    }
     await renderer.playback.recalculate();
     await renderer.playback.reset();
     await renderer.playback.seek(0);
@@ -384,40 +765,107 @@ var renderTwickVideoInBrowser = async (config) => {
       mediaAssets.push(currentAssets);
       const canvas = renderer.stage.finalBuffer;
       await exporter.handleFrame(canvas, frame);
-      if (settings.onProgress) {
-        settings.onProgress(frame / totalFrames);
-      }
+      if (settings.onProgress) settings.onProgress(frame / totalFrames);
     }
     await exporter.stop();
     let audioData = null;
-    if (settings.includeAudio && mediaAssets.length > 0) {
-      console.log("\u{1F3B5} Generating audio track...");
-      audioData = await exporter.generateAudio(mediaAssets, 0, totalFrames);
+    console.log(`Audio detection summary: hasAnyAudio=${hasAnyAudio}, includeAudio=${settings.includeAudio}, mediaAssets=${mediaAssets.length}`);
+    if (settings.includeAudio && mediaAssets.length > 0 && hasAnyAudio) {
+      console.log("Starting audio processing (audio detected in videos)");
+      if (settings.onProgress) {
+        settings.onProgress(0.98);
+      }
+      try {
+        console.log("Calling generateAudio...");
+        audioData = await exporter.generateAudio(mediaAssets, 0, totalFrames);
+        console.log("generateAudio completed");
+        if (audioData) {
+          console.log(`\u2713 Audio generation successful: ${audioData.byteLength} bytes`);
+        } else {
+          console.log("\u2717 No audio data generated");
+        }
+        if (settings.onProgress) {
+          settings.onProgress(0.99);
+        }
+      } catch (audioError) {
+        const errorMsg = audioError instanceof Error ? audioError.message : String(audioError);
+        const errorStack = audioError instanceof Error ? audioError.stack : void 0;
+        console.error("\u2717 Audio generation failed, continuing without audio");
+        console.error(`  Error: ${errorMsg}`);
+        if (errorStack) {
+          console.error(`  Stack: ${errorStack}`);
+        }
+        console.error("  Context:", {
+          hasAnyAudio,
+          includeAudio: settings.includeAudio,
+          mediaAssetsCount: mediaAssets.length,
+          totalFrames
+        });
+        audioData = null;
+      }
+    } else if (settings.includeAudio && mediaAssets.length > 0 && !hasAnyAudio) {
+      console.log("\u23ED Skipping audio processing: no audio detected in videos");
+    } else {
+      console.log(`\u23ED Skipping audio processing: includeAudio=${settings.includeAudio}, mediaAssets=${mediaAssets.length}, hasAnyAudio=${hasAnyAudio}`);
     }
     let finalBlob = exporter.getVideoBlob();
     if (!finalBlob) {
       throw new Error("Failed to create video blob");
     }
+    if (finalBlob.size === 0) {
+      throw new Error("Video blob is empty. Rendering may have failed.");
+    }
     if (audioData && settings.includeAudio) {
-      console.log("\u2705 Audio extracted and processed successfully");
-      console.log("\u{1F4CA} Audio data size:", (audioData.byteLength / 1024 / 1024).toFixed(2), "MB");
-      if (settings.downloadAudioSeparately) {
-        const audioBlob = new Blob([audioData], { type: "audio/wav" });
-        const audioUrl = URL.createObjectURL(audioBlob);
-        const a = document.createElement("a");
-        a.href = audioUrl;
-        a.download = "audio.wav";
-        a.click();
-        URL.revokeObjectURL(audioUrl);
-        console.log("\u2705 Audio downloaded separately as audio.wav");
-      }
-      if (settings.onAudioReady) {
-        const audioBlob = new Blob([audioData], { type: "audio/wav" });
-        settings.onAudioReady(audioBlob);
+      console.log(`Attempting to mux audio (${audioData.byteLength} bytes) with video (${finalBlob.size} bytes)`);
+      try {
+        const muxedBlob = await muxAudioVideo({
+          videoBlob: finalBlob,
+          audioBuffer: audioData
+        });
+        if (!muxedBlob || muxedBlob.size === 0) {
+          throw new Error("Muxed video blob is empty");
+        }
+        if (muxedBlob.size === finalBlob.size) {
+          console.warn("Muxed blob size unchanged - muxing may have failed silently");
+        } else {
+          console.log(`Muxing successful: ${finalBlob.size} bytes -> ${muxedBlob.size} bytes`);
+        }
+        finalBlob = muxedBlob;
+      } catch (muxError) {
+        const errorMsg = muxError instanceof Error ? muxError.message : String(muxError);
+        const errorStack = muxError instanceof Error ? muxError.stack : void 0;
+        console.error("Audio muxing failed");
+        console.error(`  Error: ${errorMsg}`);
+        if (errorStack) {
+          console.error(`  Stack: ${errorStack}`);
+        }
+        console.error("  Context:", {
+          videoBlobSize: finalBlob.size,
+          audioDataSize: audioData?.byteLength || 0
+        });
+        if (settings.downloadAudioSeparately && audioData) {
+          const audioBlob = new Blob([audioData], { type: "audio/wav" });
+          const audioUrl = URL.createObjectURL(audioBlob);
+          const a = document.createElement("a");
+          a.href = audioUrl;
+          a.download = "audio.wav";
+          a.click();
+          URL.revokeObjectURL(audioUrl);
+        }
+        console.warn("Continuing with video without audio due to muxing failure");
+        finalBlob = exporter.getVideoBlob();
+        if (!finalBlob || finalBlob.size === 0) {
+          throw new Error("Video blob is invalid after muxing failure");
+        }
       }
-      console.log("\u{1F4A1} Note: Client-side audio muxing is complex.");
-      console.log("\u{1F4A1} For full audio support, use server-side rendering: @twick/render-server");
-      console.log("\u{1F4A1} Or mux manually with: ffmpeg -i video.mp4 -i audio.wav -c:v copy -c:a aac output.mp4");
+    } else if (settings.includeAudio && !audioData) {
+      console.warn("Audio processing was enabled but no audio data was generated");
+    }
+    if (!finalBlob || finalBlob.size === 0) {
+      throw new Error("Final video blob is empty or invalid");
+    }
+    if (settings.onProgress) {
+      settings.onProgress(1);
     }
     if (settings.onComplete) {
       settings.onComplete(finalBlob);
@@ -461,17 +909,13 @@ var useBrowserRenderer = (options = {}) => {
   }, []);
   const download = useCallback((filename) => {
     if (!videoBlob) {
-      const downloadError = new Error("No video available to download. Please render the video first.");
-      setError(downloadError);
-      console.error(downloadError.message);
+      setError(new Error("No video available to download. Please render the video first."));
       return;
     }
     try {
       downloadVideoBlob(videoBlob, filename || options.downloadFilename || "video.mp4");
     } catch (err) {
-      const downloadError = err instanceof Error ? err : new Error("Failed to download video");
-      setError(downloadError);
-      console.error("Download error:", downloadError);
+      setError(err instanceof Error ? err : new Error("Failed to download video"));
     }
   }, [videoBlob, options.downloadFilename]);
   const render = useCallback(async (variables) => {
@@ -501,9 +945,7 @@ var useBrowserRenderer = (options = {}) => {
               try {
                 downloadVideoBlob(blob2, downloadFilename || "video.mp4");
               } catch (downloadErr) {
-                const error2 = downloadErr instanceof Error ? downloadErr : new Error("Failed to auto-download video");
-                setError(error2);
-                console.error("Auto-download error:", error2);
+                setError(downloadErr instanceof Error ? downloadErr : new Error("Failed to auto-download video"));
               }
             }
           },
@@ -519,9 +961,7 @@ var useBrowserRenderer = (options = {}) => {
       setProgress(1);
       return blob;
     } catch (err) {
-      const error2 = err instanceof Error ? err : new Error(String(err));
-      setError(error2);
-      console.error("Render error:", error2);
+      setError(err instanceof Error ? err : new Error(String(err)));
       return null;
     } finally {
       setIsRendering(false);