Hey there, let's dig into this frustrating issue you're hitting—where your Web Audio API WAV export works locally but throws that Rendering already started error in production. I've dealt with similar environment-specific bugs before, so here's what I think is going on and how to fix it:

First, Why Local vs. Production Difference? #

The key clue here is that your console.trace() shows the export function is being called multiple times. The reason this only blows up in production usually boils down to:

• Event binding duplicates: Production builds often optimize code (like minification or tree-shaking) that can accidentally cause event listeners (e.g., your export button click) to be attached multiple times. For example, if you're using a framework like React, forgetting to wrap your export handler in useCallback with proper dependencies might lead to re-binding on every render in production (even if it didn't trigger issues locally).
• Lack of user interaction throttling: You might not test rapid clicks or repeated triggers locally, but production users might click the export button faster, or other UI events might accidentally trigger the export logic.
• Third-party script interference: Production environments often have additional scripts (analytics, ads) that could inadvertently trigger your export button's click event or state changes that kick off the export flow.

Immediate Fix: Add a Render Lock to Prevent Duplicate Calls #

Even if you're still hunting down the root cause of the repeated calls, you can stop the error right away by adding a simple lock to your export function. This ensures only one OfflineAudioContext.startRendering() call runs at a time:

// Create a module-level lock variable to track active exports
let isExportInProgress = false;

async function handleAudioExport() {
  // Bail if an export is already running
  if (isExportInProgress) {
    console.log("Export already in progress—ignoring duplicate call");
    return;
  }

  isExportInProgress = true;

  try {
    // Your existing OfflineAudioContext setup logic
    const offlineCtx = new OfflineAudioContext(
      2,
      yourSourceBuffer.length,
      yourSourceBuffer.sampleRate
    );
    // Rebuild your audio graph (filters, StereoPanner, etc.) here
    // ...

    // Render and export the audio
    const renderedBuffer = await offlineCtx.startRendering();
    encodeToWavAndDownload(renderedBuffer); // Your WAV encoding function
  } catch (error) {
    console.error("Audio export failed:", error);
  } finally {
    // Release the lock regardless of success/failure
    isExportInProgress = false;
  }
}

This lock will block any duplicate calls to handleAudioExport() until the current export finishes, eliminating the Rendering already started error.

Root Cause Investigation Steps #

To fix the underlying issue of repeated calls, try these checks:

• Audit event listeners: If you're using a framework, ensure your export button's click handler is only bound once. For React, use useCallback with the correct dependency array, or attach the listener in a useEffect that runs only on mount.
• Add throttling/debouncing: Wrap your export function in a debounce (e.g., 500ms delay) to ignore rapid consecutive clicks. This is a good safety net even if you fix the binding issue.
• Check state triggers: If your export is triggered by a state change (not just a button click), verify that the state isn't being updated multiple times in production. Production code optimizations might cause state updates to fire more frequently than in local dev.
• Inspect third-party scripts: Use your browser's dev tools to pause on click events and see if any non-user-initiated clicks are triggering your export button.

Bonus: Ensure Clean OfflineAudioContext Usage #

Another thing to double-check: make sure you're creating a new OfflineAudioContext instance for each export attempt. Reusing the same instance across multiple exports will also trigger this error, since each context can only be rendered once. Your existing logic likely does this, but it's worth confirming!

内容的提问来源于stack exchange，提问作者Michael