@waveform-playlist/browser 11.3.0 → 11.3.1

package/dist/index.d.mts

@@ -962,7 +962,7 @@ type TrackEffectsFunction = (graphEnd: unknown, destination: unknown, isOffline:
 interface ExportOptions extends WavEncoderOptions {
     /** Filename for download (without extension) */
     filename?: string;
-    /** Export mode: 'master' for stereo mix, 'individual' for single track */
+    /** Export mode: 'master' for full mixdown, 'individual' for single track */
     mode?: 'master' | 'individual';
     /** Track index for individual export (only used when mode is 'individual') */
     trackIndex?: number;
@@ -971,8 +971,8 @@ interface ExportOptions extends WavEncoderOptions {
     /** Whether to apply effects (fades, etc.) - defaults to true */
     applyEffects?: boolean;
     /**
-     * Optional Tone.js effects function for master effects. When provided, export will use Tone.Offline
-     * to render through the effects chain. The function receives isOffline=true.
+     * Optional Tone.js effects function for master effects. When provided, export renders
+     * through the effects chain. The function receives isOffline=true.
      */
     effectsFunction?: EffectsFunction;
     /**
@@ -1009,8 +1009,8 @@ interface TrackState {
     pan: number;
 }
 /**
- * Hook for exporting the waveform playlist to WAV format
- * Uses OfflineAudioContext for fast, non-real-time rendering
+ * Hook for exporting the waveform playlist to WAV format.
+ * Uses Tone.Offline for non-real-time rendering, mirroring the live playback graph.
  */
 declare function useExportWav(): UseExportWavReturn;
 

package/dist/index.d.ts

@@ -962,7 +962,7 @@ type TrackEffectsFunction = (graphEnd: unknown, destination: unknown, isOffline:
 interface ExportOptions extends WavEncoderOptions {
     /** Filename for download (without extension) */
     filename?: string;
-    /** Export mode: 'master' for stereo mix, 'individual' for single track */
+    /** Export mode: 'master' for full mixdown, 'individual' for single track */
     mode?: 'master' | 'individual';
     /** Track index for individual export (only used when mode is 'individual') */
     trackIndex?: number;
@@ -971,8 +971,8 @@ interface ExportOptions extends WavEncoderOptions {
     /** Whether to apply effects (fades, etc.) - defaults to true */
     applyEffects?: boolean;
     /**
-     * Optional Tone.js effects function for master effects. When provided, export will use Tone.Offline
-     * to render through the effects chain. The function receives isOffline=true.
+     * Optional Tone.js effects function for master effects. When provided, export renders
+     * through the effects chain. The function receives isOffline=true.
      */
     effectsFunction?: EffectsFunction;
     /**
@@ -1009,8 +1009,8 @@ interface TrackState {
     pan: number;
 }
 /**
- * Hook for exporting the waveform playlist to WAV format
- * Uses OfflineAudioContext for fast, non-real-time rendering
+ * Hook for exporting the waveform playlist to WAV format.
+ * Uses Tone.Offline for non-real-time rendering, mirroring the live playback graph.
  */
 declare function useExportWav(): UseExportWavReturn;
 

package/dist/index.js

@@ -2741,6 +2741,7 @@ function useTrackDynamicEffects() {
 
 // src/hooks/useExportWav.ts
 var import_react19 = require("react");
+var import_core4 = require("@waveform-playlist/core");
 var import_playout2 = require("@waveform-playlist/playout");
 
 // src/utils/wavEncoder.ts
@@ -2851,47 +2852,24 @@ function useExportWav() {
         totalDurationSamples += Math.round(sampleRate * 0.1);
         const duration = totalDurationSamples / sampleRate;
         const tracksToRender = mode === "individual" ? [{ track: tracks[trackIndex], state: trackStates[trackIndex], index: trackIndex }] : tracks.map((track, index) => ({ track, state: trackStates[index], index }));
-        const hasSolo = trackStates.some((state) => state.soloed);
-        const hasOfflineTrackEffects = !!createOfflineTrackEffects;
-        let renderedBuffer;
-        if ((effectsFunction || hasOfflineTrackEffects) && applyEffects) {
-          renderedBuffer = yield renderWithToneEffects(
-            tracksToRender,
-            trackStates,
-            hasSolo,
-            duration,
-            sampleRate,
-            effectsFunction,
-            createOfflineTrackEffects,
-            (p) => {
-              setProgress(p);
-              onProgress == null ? void 0 : onProgress(p);
-            }
-          );
-        } else {
-          const offlineCtx = new OfflineAudioContext(2, totalDurationSamples, sampleRate);
-          let scheduledClips = 0;
-          const totalClips = tracksToRender.reduce((sum, { track }) => sum + track.clips.length, 0);
-          for (const { track, state } of tracksToRender) {
-            if (state.muted && !state.soloed) continue;
-            if (hasSolo && !state.soloed) continue;
-            for (const clip of track.clips) {
-              yield scheduleClip(offlineCtx, clip, state, sampleRate, applyEffects);
-              scheduledClips++;
-              const currentProgress = scheduledClips / totalClips * 0.5;
-              setProgress(currentProgress);
-              onProgress == null ? void 0 : onProgress(currentProgress);
-            }
-          }
-          setProgress(0.5);
-          onProgress == null ? void 0 : onProgress(0.5);
-          renderedBuffer = yield offlineCtx.startRendering();
-        }
-        setProgress(0.9);
-        onProgress == null ? void 0 : onProgress(0.9);
+        const hasSolo = mode === "master" && trackStates.some((state) => state.soloed);
+        const reportProgress = (p) => {
+          setProgress(p);
+          onProgress == null ? void 0 : onProgress(p);
+        };
+        const renderedBuffer = yield renderOffline(
+          tracksToRender,
+          hasSolo,
+          duration,
+          sampleRate,
+          applyEffects,
+          effectsFunction,
+          createOfflineTrackEffects,
+          reportProgress
+        );
+        reportProgress(0.9);
         const blob = encodeWav(renderedBuffer, { bitDepth });
-        setProgress(1);
-        onProgress == null ? void 0 : onProgress(1);
+        reportProgress(1);
         if (autoDownload) {
           const exportFilename = mode === "individual" ? `${filename}_${tracks[trackIndex].name}` : filename;
           downloadBlob(blob, `${exportFilename}.wav`);
@@ -2918,29 +2896,35 @@ function useExportWav() {
     error
   };
 }
-function renderWithToneEffects(tracksToRender, _trackStates, hasSolo, duration, sampleRate, effectsFunction, createOfflineTrackEffects, onProgress) {
+function renderOffline(tracksToRender, hasSolo, duration, sampleRate, applyEffects, effectsFunction, createOfflineTrackEffects, onProgress) {
   return __async(this, null, function* () {
     const { Offline, Volume: Volume2, Gain, Panner, Player, ToneAudioBuffer } = yield import("tone");
     onProgress(0.1);
+    const audibleTracks = tracksToRender.filter(({ state }) => {
+      if (state.muted && !state.soloed) return false;
+      if (hasSolo && !state.soloed) return false;
+      return true;
+    });
+    const outputChannels = audibleTracks.reduce(
+      (max, { track }) => Math.max(max, (0, import_core4.trackChannelCount)(track)),
+      1
+    );
     let buffer;
     try {
       buffer = yield Offline(
         (_0) => __async(null, [_0], function* ({ transport, destination }) {
           const masterVolume = new Volume2(0);
-          let cleanup = void 0;
-          if (effectsFunction) {
-            cleanup = effectsFunction(masterVolume, destination, true);
+          if (effectsFunction && applyEffects) {
+            effectsFunction(masterVolume, destination, true);
           } else {
             masterVolume.connect(destination);
           }
-          for (const { track, state } of tracksToRender) {
-            if (state.muted && !state.soloed) continue;
-            if (hasSolo && !state.soloed) continue;
-            const trackVolume = new Volume2(gainToDb(state.volume));
-            const trackPan = new Panner(state.pan);
+          for (const { track, state } of audibleTracks) {
+            const trackVolume = new Volume2((0, import_core4.gainToDb)(state.volume));
+            const trackPan = new Panner({ pan: state.pan, channelCount: (0, import_core4.trackChannelCount)(track) });
             const trackMute = new Gain(state.muted ? 0 : 1);
             const trackEffects = createOfflineTrackEffects == null ? void 0 : createOfflineTrackEffects(track.id);
-            if (trackEffects) {
+            if (trackEffects && applyEffects) {
               trackEffects(trackMute, masterVolume, true);
             } else {
               trackMute.connect(masterVolume);
@@ -2957,6 +2941,12 @@ function renderWithToneEffects(tracksToRender, _trackStates, hasSolo, duration,
                 fadeIn,
                 fadeOut
               } = clip;
+              if (!audioBuffer) {
+                console.warn(
+                  '[waveform-playlist] Skipping clip "' + (clip.name || clip.id) + '" - no audioBuffer for export'
+                );
+                continue;
+              }
               const startTime = startSample / sampleRate;
               const clipDuration = durationSamples / sampleRate;
               const offset = offsetSamples / sampleRate;
@@ -2965,167 +2955,56 @@ function renderWithToneEffects(tracksToRender, _trackStates, hasSolo, duration,
               const fadeGain = new Gain(clipGain);
               player.connect(fadeGain);
               fadeGain.connect(trackVolume);
-              if (fadeIn) {
-                const fadeInStart = startTime;
-                const fadeInEnd = startTime + fadeIn.duration;
+              if (applyEffects) {
                 const audioParam = (0, import_playout2.getUnderlyingAudioParam)(fadeGain.gain);
                 if (audioParam) {
-                  audioParam.setValueAtTime(0, fadeInStart);
-                  audioParam.linearRampToValueAtTime(clipGain, fadeInEnd);
-                }
-              }
-              if (fadeOut) {
-                const fadeOutStart = startTime + clipDuration - fadeOut.duration;
-                const fadeOutEnd = startTime + clipDuration;
-                const audioParam = (0, import_playout2.getUnderlyingAudioParam)(fadeGain.gain);
-                if (audioParam) {
-                  audioParam.setValueAtTime(clipGain, fadeOutStart);
-                  audioParam.linearRampToValueAtTime(0, fadeOutEnd);
+                  applyClipFades(audioParam, clipGain, startTime, clipDuration, fadeIn, fadeOut);
+                } else if (fadeIn || fadeOut) {
+                  console.warn(
+                    '[waveform-playlist] Cannot apply fades for clip "' + (clip.name || clip.id) + '" - AudioParam not accessible'
+                  );
                 }
               }
               player.start(startTime, offset, clipDuration);
             }
           }
           transport.start(0);
-          if (cleanup) {
-          }
         }),
         duration,
-        2,
-        // stereo
+        outputChannels,
         sampleRate
       );
     } catch (err) {
       if (err instanceof Error) {
         throw err;
       } else {
-        throw new Error(`Tone.Offline rendering failed: ${String(err)}`);
+        throw new Error("Tone.Offline rendering failed: " + String(err));
       }
     }
     onProgress(0.9);
-    return buffer.get();
-  });
-}
-function gainToDb(gain) {
-  return 20 * Math.log10(Math.max(gain, 1e-4));
-}
-function scheduleClip(ctx, clip, trackState, sampleRate, applyEffects) {
-  return __async(this, null, function* () {
-    const {
-      audioBuffer,
-      startSample,
-      durationSamples,
-      offsetSamples,
-      gain: clipGain,
-      fadeIn,
-      fadeOut
-    } = clip;
-    if (!audioBuffer) {
-      console.warn(`Skipping clip "${clip.name || clip.id}" - no audioBuffer for export`);
-      return;
+    const result = buffer.get();
+    if (!result) {
+      throw new Error("Offline rendering produced no audio buffer");
     }
-    const startTime = startSample / sampleRate;
-    const duration = durationSamples / sampleRate;
-    const offset = offsetSamples / sampleRate;
-    const source = ctx.createBufferSource();
-    source.buffer = audioBuffer;
-    const gainNode = ctx.createGain();
-    const baseGain = clipGain * trackState.volume;
-    const pannerNode = ctx.createStereoPanner();
-    pannerNode.pan.value = trackState.pan;
-    source.connect(gainNode);
-    gainNode.connect(pannerNode);
-    pannerNode.connect(ctx.destination);
-    if (applyEffects) {
-      if (fadeIn) {
-        gainNode.gain.setValueAtTime(0, startTime);
-      } else {
-        gainNode.gain.setValueAtTime(baseGain, startTime);
-      }
-      if (fadeIn) {
-        const fadeInStart = startTime;
-        const fadeInEnd = startTime + fadeIn.duration;
-        applyFadeEnvelope(
-          gainNode.gain,
-          fadeInStart,
-          fadeInEnd,
-          0,
-          baseGain,
-          fadeIn.type || "linear"
-        );
-      }
-      if (fadeOut) {
-        const fadeOutStart = startTime + duration - fadeOut.duration;
-        const fadeOutEnd = startTime + duration;
-        if (!fadeIn || fadeIn.duration < duration - fadeOut.duration) {
-          gainNode.gain.setValueAtTime(baseGain, fadeOutStart);
-        }
-        applyFadeEnvelope(
-          gainNode.gain,
-          fadeOutStart,
-          fadeOutEnd,
-          baseGain,
-          0,
-          fadeOut.type || "linear"
-        );
-      }
-    } else {
-      gainNode.gain.setValueAtTime(baseGain, startTime);
-    }
-    source.start(startTime, offset, duration);
+    return result;
   });
 }
-function applyFadeEnvelope(gainParam, startTime, endTime, startValue, endValue, fadeType) {
-  const duration = endTime - startTime;
-  if (duration <= 0) return;
-  switch (fadeType) {
-    case "linear":
-      gainParam.setValueAtTime(startValue, startTime);
-      gainParam.linearRampToValueAtTime(endValue, endTime);
-      break;
-    case "exponential": {
-      const expStart = Math.max(startValue, 1e-4);
-      const expEnd = Math.max(endValue, 1e-4);
-      gainParam.setValueAtTime(expStart, startTime);
-      gainParam.exponentialRampToValueAtTime(expEnd, endTime);
-      if (endValue === 0) {
-        gainParam.setValueAtTime(0, endTime);
-      }
-      break;
-    }
-    case "logarithmic": {
-      const logCurve = generateFadeCurve(startValue, endValue, 256, "logarithmic");
-      gainParam.setValueCurveAtTime(logCurve, startTime, duration);
-      break;
-    }
-    case "sCurve": {
-      const sCurve = generateFadeCurve(startValue, endValue, 256, "sCurve");
-      gainParam.setValueCurveAtTime(sCurve, startTime, duration);
-      break;
-    }
-    default:
-      gainParam.setValueAtTime(startValue, startTime);
-      gainParam.linearRampToValueAtTime(endValue, endTime);
+function applyClipFades(gainParam, clipGain, startTime, clipDuration, fadeIn, fadeOut) {
+  if (fadeIn) {
+    gainParam.setValueAtTime(0, startTime);
+  } else {
+    gainParam.setValueAtTime(clipGain, startTime);
   }
-}
-function generateFadeCurve(startValue, endValue, numPoints, curveType) {
-  const curve = new Float32Array(numPoints);
-  const range = endValue - startValue;
-  for (let i = 0; i < numPoints; i++) {
-    const t = i / (numPoints - 1);
-    let curveValue;
-    if (curveType === "logarithmic") {
-      if (range > 0) {
-        curveValue = Math.log10(1 + t * 9) / Math.log10(10);
-      } else {
-        curveValue = 1 - Math.log10(1 + (1 - t) * 9) / Math.log10(10);
-      }
-    } else {
-      curveValue = t * t * (3 - 2 * t);
+  if (fadeIn) {
+    (0, import_core4.applyFadeIn)(gainParam, startTime, fadeIn.duration, fadeIn.type || "linear", 0, clipGain);
+  }
+  if (fadeOut) {
+    const fadeOutStart = startTime + clipDuration - fadeOut.duration;
+    if (!fadeIn || fadeIn.duration < clipDuration - fadeOut.duration) {
+      gainParam.setValueAtTime(clipGain, fadeOutStart);
     }
-    curve[i] = startValue + range * curveValue;
+    (0, import_core4.applyFadeOut)(gainParam, fadeOutStart, fadeOut.duration, fadeOut.type || "linear", clipGain, 0);
   }
-  return curve;
 }
 
 // src/hooks/useAnimationFrameLoop.ts
@@ -3520,7 +3399,7 @@ function useWaveformDataCache(tracks, baseScale) {
 
 // src/hooks/useDynamicTracks.ts
 var import_react22 = require("react");
-var import_core4 = require("@waveform-playlist/core");
+var import_core5 = require("@waveform-playlist/core");
 var import_playout3 = require("@waveform-playlist/playout");
 function getSourceName(source) {
   var _a, _b, _c, _d, _e;
@@ -3574,7 +3453,7 @@ function useDynamicTracks() {
     if (sources.length === 0) return;
     const audioContext = (0, import_playout3.getGlobalAudioContext)();
     const placeholders = sources.map((source) => ({
-      track: (0, import_core4.createTrack)({ name: `${getSourceName(source)} (loading...)`, clips: [] }),
+      track: (0, import_core5.createTrack)({ name: `${getSourceName(source)} (loading...)`, clips: [] }),
       source
     }));
     setTracks((prev) => [...prev, ...placeholders.map((p) => p.track)]);
@@ -3586,7 +3465,7 @@ function useDynamicTracks() {
       (() => __async(null, null, function* () {
         try {
           const { audioBuffer, name } = yield decodeSource(source, audioContext, controller.signal);
-          const clip = (0, import_core4.createClipFromSeconds)({
+          const clip = (0, import_core5.createClipFromSeconds)({
             audioBuffer,
             startTime: 0,
             duration: audioBuffer.duration,
@@ -3644,7 +3523,7 @@ function useDynamicTracks() {
 // src/hooks/useOutputMeter.ts
 var import_react23 = require("react");
 var import_playout4 = require("@waveform-playlist/playout");
-var import_core5 = require("@waveform-playlist/core");
+var import_core6 = require("@waveform-playlist/core");
 var import_worklets = require("@waveform-playlist/worklets");
 var PEAK_DECAY = 0.98;
 function useOutputMeter(options = {}) {
@@ -3699,8 +3578,8 @@ function useOutputMeter(options = {}) {
         const rmsValues = [];
         for (let ch = 0; ch < peak.length; ch++) {
           smoothed[ch] = Math.max(peak[ch], ((_a = smoothed[ch]) != null ? _a : 0) * PEAK_DECAY);
-          peakValues.push((0, import_core5.gainToNormalized)(smoothed[ch]));
-          rmsValues.push((0, import_core5.gainToNormalized)(rms[ch]));
+          peakValues.push((0, import_core6.gainToNormalized)(smoothed[ch]));
+          rmsValues.push((0, import_core6.gainToNormalized)(rms[ch]));
         }
         setLevels(peakValues);
         setRmsLevels(rmsValues);
@@ -5572,7 +5451,7 @@ var AnimatedPlayhead = ({ color = "#ff0000" }) => {
 // src/components/ChannelWithProgress.tsx
 var import_react31 = require("react");
 var import_styled_components5 = __toESM(require("styled-components"));
-var import_core6 = require("@waveform-playlist/core");
+var import_core7 = require("@waveform-playlist/core");
 var import_ui_components8 = require("@waveform-playlist/ui-components");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ChannelWrapper = import_styled_components5.default.div`
@@ -5635,7 +5514,7 @@ var ChannelWithProgress = (_a) => {
   const { isPlaying, currentTimeRef, registerFrameCallback, unregisterFrameCallback } = usePlaybackAnimation();
   const { samplesPerPixel, sampleRate } = usePlaylistData();
   const progressColor = (theme == null ? void 0 : theme.waveProgressColor) || "rgba(0, 0, 0, 0.1)";
-  const clipPixelWidth = (0, import_core6.clipPixelWidth)(
+  const clipPixelWidth = (0, import_core7.clipPixelWidth)(
     clipStartSample,
     clipDurationSamples,
     samplesPerPixel
@@ -7145,7 +7024,7 @@ var KeyboardShortcuts = ({
 var import_react40 = __toESM(require("react"));
 var import_react41 = require("@dnd-kit/react");
 var import_modifiers2 = require("@dnd-kit/abstract/modifiers");
-var import_core8 = require("@waveform-playlist/core");
+var import_core9 = require("@waveform-playlist/core");
 var import_ui_components12 = require("@waveform-playlist/ui-components");
 
 // src/modifiers/ClipCollisionModifier.ts
@@ -7174,7 +7053,7 @@ var ClipCollisionModifier = _ClipCollisionModifier;
 
 // src/modifiers/SnapToGridModifier.ts
 var import_abstract2 = require("@dnd-kit/abstract");
-var import_core7 = require("@waveform-playlist/core");
+var import_core8 = require("@waveform-playlist/core");
 var _SnapToGridModifier = class _SnapToGridModifier extends import_abstract2.Modifier {
   apply(operation) {
     const { transform, source } = operation;
@@ -7195,18 +7074,18 @@ var _SnapToGridModifier = class _SnapToGridModifier extends import_abstract2.Mod
     }
     const { snapTo, bpm, timeSignature, sampleRate } = this.options;
     if (snapTo === "off") return transform;
-    const gridTicks = snapTo === "bar" ? (0, import_core7.ticksPerBar)(timeSignature) : (0, import_core7.ticksPerBeat)(timeSignature);
+    const gridTicks = snapTo === "bar" ? (0, import_core8.ticksPerBar)(timeSignature) : (0, import_core8.ticksPerBeat)(timeSignature);
     if (startSample !== void 0) {
       const proposedSamples = startSample + transform.x * samplesPerPixel;
-      const proposedTicks = (0, import_core7.samplesToTicks)(proposedSamples, bpm, sampleRate);
-      const snappedTicks2 = (0, import_core7.snapToGrid)(proposedTicks, gridTicks);
-      const snappedSamples2 = (0, import_core7.ticksToSamples)(snappedTicks2, bpm, sampleRate);
+      const proposedTicks = (0, import_core8.samplesToTicks)(proposedSamples, bpm, sampleRate);
+      const snappedTicks2 = (0, import_core8.snapToGrid)(proposedTicks, gridTicks);
+      const snappedSamples2 = (0, import_core8.ticksToSamples)(snappedTicks2, bpm, sampleRate);
       return { x: (snappedSamples2 - startSample) / samplesPerPixel, y: 0 };
     }
     const deltaSamples = transform.x * samplesPerPixel;
-    const deltaTicks = (0, import_core7.samplesToTicks)(deltaSamples, bpm, sampleRate);
-    const snappedTicks = (0, import_core7.snapToGrid)(deltaTicks, gridTicks);
-    const snappedSamples = (0, import_core7.ticksToSamples)(snappedTicks, bpm, sampleRate);
+    const deltaTicks = (0, import_core8.samplesToTicks)(deltaSamples, bpm, sampleRate);
+    const snappedTicks = (0, import_core8.snapToGrid)(deltaTicks, gridTicks);
+    const snappedSamples = (0, import_core8.ticksToSamples)(snappedTicks, bpm, sampleRate);
     return { x: snappedSamples / samplesPerPixel, y: 0 };
   }
 };
@@ -7237,11 +7116,11 @@ var ClipInteractionProvider = ({
   const snapSamplePosition = (0, import_react40.useMemo)(() => {
     if (useBeatsSnap && beatsAndBars) {
       const { bpm, timeSignature, snapTo } = beatsAndBars;
-      const gridTicks = snapTo === "bar" ? (0, import_core8.ticksPerBar)(timeSignature) : (0, import_core8.ticksPerBeat)(timeSignature);
+      const gridTicks = snapTo === "bar" ? (0, import_core9.ticksPerBar)(timeSignature) : (0, import_core9.ticksPerBeat)(timeSignature);
       return (samplePos) => {
-        const ticks = (0, import_core8.samplesToTicks)(samplePos, bpm, sampleRate);
-        const snapped = (0, import_core8.snapToGrid)(ticks, gridTicks);
-        return (0, import_core8.ticksToSamples)(snapped, bpm, sampleRate);
+        const ticks = (0, import_core9.samplesToTicks)(samplePos, bpm, sampleRate);
+        const snapped = (0, import_core9.snapToGrid)(ticks, gridTicks);
+        return (0, import_core9.ticksToSamples)(snapped, bpm, sampleRate);
       };
     }
     if (useTimescaleSnap) {