@waveform-playlist/browser 11.1.0 → 11.3.0

package/dist/index.d.mts

@@ -41,6 +41,15 @@ interface TrackState$1 {
     volume: number;
     pan: number;
 }
+/** Per-frame data passed to registered animation callbacks. */
+interface FrameData {
+    /** Raw engine time (for state/logic — NOT for visual positioning). */
+    readonly time: number;
+    /** time - outputLatency (for DOM positioning — matches speaker output). */
+    readonly visualTime: number;
+    readonly sampleRate: number;
+    readonly samplesPerPixel: number;
+}
 interface PlaybackAnimationContextValue {
     isPlaying: boolean;
     currentTime: number;
@@ -49,6 +58,10 @@ interface PlaybackAnimationContextValue {
     audioStartPositionRef: React__default.RefObject<number>;
     /** Returns current playback time from engine (auto-wraps at loop boundaries). */
     getPlaybackTime: () => number;
+    /** Register a per-frame callback driven by the single animation loop. */
+    registerFrameCallback: (id: string, cb: (data: FrameData) => void) => void;
+    /** Unregister a per-frame callback. */
+    unregisterFrameCallback: (id: string) => void;
 }
 interface PlaylistStateContextValue {
     continuousPlay: boolean;
@@ -186,6 +199,10 @@ interface WaveformPlaylistProviderProps {
     /** Disable automatic stop when the cursor reaches the end of the longest
      *  track. Useful for DAW-style recording beyond existing audio. */
     indefinitePlayback?: boolean;
+    /** Desired AudioContext sample rate. Creates a cross-browser AudioContext at
+     *  this rate via standardized-audio-context. Pre-computed peaks (.dat files)
+     *  render instantly when they match. On mismatch, falls back to worker. */
+    sampleRate?: number;
     children: ReactNode;
 }
 declare const WaveformPlaylistProvider: React__default.FC<WaveformPlaylistProviderProps>;
@@ -1170,7 +1187,7 @@ declare const TimeFormatSelect: React__default.FC<{
 }>;
 /**
  * Audio position display that uses the playlist context.
- * Uses requestAnimationFrame for smooth 60fps updates during playback.
+ * Updates via the shared animation frame registry — no own rAF loop.
  * Direct DOM manipulation avoids React re-renders.
  */
 declare const AudioPosition: React__default.FC<{
@@ -1807,4 +1824,4 @@ declare function getWaveformDataMetadata(src: string): Promise<{
     bits: 8 | 16;
 }>;
 
-export { type ActiveEffect, type AnnotationIntegration, AnnotationIntegrationProvider, AudioPosition, type AudioTrackConfig, AutomaticScrollCheckbox, ClearAllButton, type ClearAllButtonProps, ClipCollisionModifier, ClipInteractionProvider, type ClipInteractionProviderProps, ContinuousPlayCheckbox, DownloadAnnotationsButton, EditableCheckbox, type EffectDefinition, type EffectInstance, type EffectParameter, type ExportOptions, type ExportResult, ExportWavButton, type ExportWavButtonProps, FastForwardButton, type GetAnnotationBoxLabelFn, KeyboardShortcuts, type KeyboardShortcutsProps, LinkEndpointsCheckbox, LoopButton, MasterVolumeControl, type MasterVolumeControls, type MediaElementAnimationContextValue, MediaElementAnnotationList, type MediaElementAnnotationListProps, type MediaElementControlsContextValue, type MediaElementDataContextValue, MediaElementPlaylist, type MediaElementPlaylistProps, MediaElementPlaylistProvider, type MediaElementStateContextValue, type MediaElementTrackConfig, MediaElementWaveform, type MediaElementWaveformProps, type OnAnnotationUpdateFn, type ParameterType, PauseButton, PlayButton, PlaylistAnnotationList, type PlaylistAnnotationListProps, PlaylistVisualization, type PlaylistVisualizationProps, RewindButton, SelectionTimeInputs, SetLoopRegionButton, SkipBackwardButton, SkipForwardButton, SnapToGridModifier, type SpectrogramIntegration, SpectrogramIntegrationProvider, StopButton, type TimeFormatControls, TimeFormatSelect, type TrackActiveEffect, type TrackEffectsState, type TrackLoadError, type TrackSource, type TrackState$1 as TrackState, type UseDynamicEffectsReturn, type UseDynamicTracksReturn, type UseExportWavReturn, type UseOutputMeterOptions, type UseOutputMeterReturn, type UsePlaybackShortcutsOptions, type UsePlaybackShortcutsReturn, type UseTrackDynamicEffectsReturn, Waveform, WaveformPlaylistProvider, type WaveformProps, type WaveformTrack, type ZoomControls, ZoomInButton, ZoomOutButton, createEffectChain, createEffectInstance, effectCategories, effectDefinitions, getEffectDefinition, getEffectsByCategory, getWaveformDataMetadata, loadPeaksFromWaveformData, loadWaveformData, noDropAnimationPlugins, useAnnotationDragHandlers, useAnnotationIntegration, useAnnotationKeyboardControls, useAudioTracks, useClipDragHandlers, useClipInteractionEnabled, useClipSplitting, useDragSensors, useDynamicEffects, useDynamicTracks, useExportWav, useKeyboardShortcuts, useMasterAnalyser, useMasterVolume, useMediaElementAnimation, useMediaElementControls, useMediaElementData, useMediaElementState, useOutputMeter, usePlaybackAnimation, usePlaybackShortcuts, usePlaylistControls, usePlaylistData, usePlaylistState, useSpectrogramIntegration, useTimeFormat, useTrackDynamicEffects, useZoomControls, waveformDataToPeaks };
+export { type ActiveEffect, type AnnotationIntegration, AnnotationIntegrationProvider, AudioPosition, type AudioTrackConfig, AutomaticScrollCheckbox, ClearAllButton, type ClearAllButtonProps, ClipCollisionModifier, ClipInteractionProvider, type ClipInteractionProviderProps, ContinuousPlayCheckbox, DownloadAnnotationsButton, EditableCheckbox, type EffectDefinition, type EffectInstance, type EffectParameter, type ExportOptions, type ExportResult, ExportWavButton, type ExportWavButtonProps, FastForwardButton, type FrameData, type GetAnnotationBoxLabelFn, KeyboardShortcuts, type KeyboardShortcutsProps, LinkEndpointsCheckbox, LoopButton, MasterVolumeControl, type MasterVolumeControls, type MediaElementAnimationContextValue, MediaElementAnnotationList, type MediaElementAnnotationListProps, type MediaElementControlsContextValue, type MediaElementDataContextValue, MediaElementPlaylist, type MediaElementPlaylistProps, MediaElementPlaylistProvider, type MediaElementStateContextValue, type MediaElementTrackConfig, MediaElementWaveform, type MediaElementWaveformProps, type OnAnnotationUpdateFn, type ParameterType, PauseButton, PlayButton, PlaylistAnnotationList, type PlaylistAnnotationListProps, PlaylistVisualization, type PlaylistVisualizationProps, RewindButton, SelectionTimeInputs, SetLoopRegionButton, SkipBackwardButton, SkipForwardButton, SnapToGridModifier, type SpectrogramIntegration, SpectrogramIntegrationProvider, StopButton, type TimeFormatControls, TimeFormatSelect, type TrackActiveEffect, type TrackEffectsState, type TrackLoadError, type TrackSource, type TrackState$1 as TrackState, type UseDynamicEffectsReturn, type UseDynamicTracksReturn, type UseExportWavReturn, type UseOutputMeterOptions, type UseOutputMeterReturn, type UsePlaybackShortcutsOptions, type UsePlaybackShortcutsReturn, type UseTrackDynamicEffectsReturn, Waveform, WaveformPlaylistProvider, type WaveformProps, type WaveformTrack, type ZoomControls, ZoomInButton, ZoomOutButton, createEffectChain, createEffectInstance, effectCategories, effectDefinitions, getEffectDefinition, getEffectsByCategory, getWaveformDataMetadata, loadPeaksFromWaveformData, loadWaveformData, noDropAnimationPlugins, useAnnotationDragHandlers, useAnnotationIntegration, useAnnotationKeyboardControls, useAudioTracks, useClipDragHandlers, useClipInteractionEnabled, useClipSplitting, useDragSensors, useDynamicEffects, useDynamicTracks, useExportWav, useKeyboardShortcuts, useMasterAnalyser, useMasterVolume, useMediaElementAnimation, useMediaElementControls, useMediaElementData, useMediaElementState, useOutputMeter, usePlaybackAnimation, usePlaybackShortcuts, usePlaylistControls, usePlaylistData, usePlaylistState, useSpectrogramIntegration, useTimeFormat, useTrackDynamicEffects, useZoomControls, waveformDataToPeaks };

package/dist/index.d.ts

@@ -41,6 +41,15 @@ interface TrackState$1 {
     volume: number;
     pan: number;
 }
+/** Per-frame data passed to registered animation callbacks. */
+interface FrameData {
+    /** Raw engine time (for state/logic — NOT for visual positioning). */
+    readonly time: number;
+    /** time - outputLatency (for DOM positioning — matches speaker output). */
+    readonly visualTime: number;
+    readonly sampleRate: number;
+    readonly samplesPerPixel: number;
+}
 interface PlaybackAnimationContextValue {
     isPlaying: boolean;
     currentTime: number;
@@ -49,6 +58,10 @@ interface PlaybackAnimationContextValue {
     audioStartPositionRef: React__default.RefObject<number>;
     /** Returns current playback time from engine (auto-wraps at loop boundaries). */
     getPlaybackTime: () => number;
+    /** Register a per-frame callback driven by the single animation loop. */
+    registerFrameCallback: (id: string, cb: (data: FrameData) => void) => void;
+    /** Unregister a per-frame callback. */
+    unregisterFrameCallback: (id: string) => void;
 }
 interface PlaylistStateContextValue {
     continuousPlay: boolean;
@@ -186,6 +199,10 @@ interface WaveformPlaylistProviderProps {
     /** Disable automatic stop when the cursor reaches the end of the longest
      *  track. Useful for DAW-style recording beyond existing audio. */
     indefinitePlayback?: boolean;
+    /** Desired AudioContext sample rate. Creates a cross-browser AudioContext at
+     *  this rate via standardized-audio-context. Pre-computed peaks (.dat files)
+     *  render instantly when they match. On mismatch, falls back to worker. */
+    sampleRate?: number;
     children: ReactNode;
 }
 declare const WaveformPlaylistProvider: React__default.FC<WaveformPlaylistProviderProps>;
@@ -1170,7 +1187,7 @@ declare const TimeFormatSelect: React__default.FC<{
 }>;
 /**
  * Audio position display that uses the playlist context.
- * Uses requestAnimationFrame for smooth 60fps updates during playback.
+ * Updates via the shared animation frame registry — no own rAF loop.
  * Direct DOM manipulation avoids React re-renders.
  */
 declare const AudioPosition: React__default.FC<{
@@ -1807,4 +1824,4 @@ declare function getWaveformDataMetadata(src: string): Promise<{
     bits: 8 | 16;
 }>;
 
-export { type ActiveEffect, type AnnotationIntegration, AnnotationIntegrationProvider, AudioPosition, type AudioTrackConfig, AutomaticScrollCheckbox, ClearAllButton, type ClearAllButtonProps, ClipCollisionModifier, ClipInteractionProvider, type ClipInteractionProviderProps, ContinuousPlayCheckbox, DownloadAnnotationsButton, EditableCheckbox, type EffectDefinition, type EffectInstance, type EffectParameter, type ExportOptions, type ExportResult, ExportWavButton, type ExportWavButtonProps, FastForwardButton, type GetAnnotationBoxLabelFn, KeyboardShortcuts, type KeyboardShortcutsProps, LinkEndpointsCheckbox, LoopButton, MasterVolumeControl, type MasterVolumeControls, type MediaElementAnimationContextValue, MediaElementAnnotationList, type MediaElementAnnotationListProps, type MediaElementControlsContextValue, type MediaElementDataContextValue, MediaElementPlaylist, type MediaElementPlaylistProps, MediaElementPlaylistProvider, type MediaElementStateContextValue, type MediaElementTrackConfig, MediaElementWaveform, type MediaElementWaveformProps, type OnAnnotationUpdateFn, type ParameterType, PauseButton, PlayButton, PlaylistAnnotationList, type PlaylistAnnotationListProps, PlaylistVisualization, type PlaylistVisualizationProps, RewindButton, SelectionTimeInputs, SetLoopRegionButton, SkipBackwardButton, SkipForwardButton, SnapToGridModifier, type SpectrogramIntegration, SpectrogramIntegrationProvider, StopButton, type TimeFormatControls, TimeFormatSelect, type TrackActiveEffect, type TrackEffectsState, type TrackLoadError, type TrackSource, type TrackState$1 as TrackState, type UseDynamicEffectsReturn, type UseDynamicTracksReturn, type UseExportWavReturn, type UseOutputMeterOptions, type UseOutputMeterReturn, type UsePlaybackShortcutsOptions, type UsePlaybackShortcutsReturn, type UseTrackDynamicEffectsReturn, Waveform, WaveformPlaylistProvider, type WaveformProps, type WaveformTrack, type ZoomControls, ZoomInButton, ZoomOutButton, createEffectChain, createEffectInstance, effectCategories, effectDefinitions, getEffectDefinition, getEffectsByCategory, getWaveformDataMetadata, loadPeaksFromWaveformData, loadWaveformData, noDropAnimationPlugins, useAnnotationDragHandlers, useAnnotationIntegration, useAnnotationKeyboardControls, useAudioTracks, useClipDragHandlers, useClipInteractionEnabled, useClipSplitting, useDragSensors, useDynamicEffects, useDynamicTracks, useExportWav, useKeyboardShortcuts, useMasterAnalyser, useMasterVolume, useMediaElementAnimation, useMediaElementControls, useMediaElementData, useMediaElementState, useOutputMeter, usePlaybackAnimation, usePlaybackShortcuts, usePlaylistControls, usePlaylistData, usePlaylistState, useSpectrogramIntegration, useTimeFormat, useTrackDynamicEffects, useZoomControls, waveformDataToPeaks };
+export { type ActiveEffect, type AnnotationIntegration, AnnotationIntegrationProvider, AudioPosition, type AudioTrackConfig, AutomaticScrollCheckbox, ClearAllButton, type ClearAllButtonProps, ClipCollisionModifier, ClipInteractionProvider, type ClipInteractionProviderProps, ContinuousPlayCheckbox, DownloadAnnotationsButton, EditableCheckbox, type EffectDefinition, type EffectInstance, type EffectParameter, type ExportOptions, type ExportResult, ExportWavButton, type ExportWavButtonProps, FastForwardButton, type FrameData, type GetAnnotationBoxLabelFn, KeyboardShortcuts, type KeyboardShortcutsProps, LinkEndpointsCheckbox, LoopButton, MasterVolumeControl, type MasterVolumeControls, type MediaElementAnimationContextValue, MediaElementAnnotationList, type MediaElementAnnotationListProps, type MediaElementControlsContextValue, type MediaElementDataContextValue, MediaElementPlaylist, type MediaElementPlaylistProps, MediaElementPlaylistProvider, type MediaElementStateContextValue, type MediaElementTrackConfig, MediaElementWaveform, type MediaElementWaveformProps, type OnAnnotationUpdateFn, type ParameterType, PauseButton, PlayButton, PlaylistAnnotationList, type PlaylistAnnotationListProps, PlaylistVisualization, type PlaylistVisualizationProps, RewindButton, SelectionTimeInputs, SetLoopRegionButton, SkipBackwardButton, SkipForwardButton, SnapToGridModifier, type SpectrogramIntegration, SpectrogramIntegrationProvider, StopButton, type TimeFormatControls, TimeFormatSelect, type TrackActiveEffect, type TrackEffectsState, type TrackLoadError, type TrackSource, type TrackState$1 as TrackState, type UseDynamicEffectsReturn, type UseDynamicTracksReturn, type UseExportWavReturn, type UseOutputMeterOptions, type UseOutputMeterReturn, type UsePlaybackShortcutsOptions, type UsePlaybackShortcutsReturn, type UseTrackDynamicEffectsReturn, Waveform, WaveformPlaylistProvider, type WaveformProps, type WaveformTrack, type ZoomControls, ZoomInButton, ZoomOutButton, createEffectChain, createEffectInstance, effectCategories, effectDefinitions, getEffectDefinition, getEffectsByCategory, getWaveformDataMetadata, loadPeaksFromWaveformData, loadWaveformData, noDropAnimationPlugins, useAnnotationDragHandlers, useAnnotationIntegration, useAnnotationKeyboardControls, useAudioTracks, useClipDragHandlers, useClipInteractionEnabled, useClipSplitting, useDragSensors, useDynamicEffects, useDynamicTracks, useExportWav, useKeyboardShortcuts, useMasterAnalyser, useMasterVolume, useMediaElementAnimation, useMediaElementControls, useMediaElementData, useMediaElementState, useOutputMeter, usePlaybackAnimation, usePlaybackShortcuts, usePlaylistControls, usePlaylistData, usePlaylistState, useSpectrogramIntegration, useTimeFormat, useTrackDynamicEffects, useZoomControls, waveformDataToPeaks };

package/dist/index.js

@@ -172,11 +172,13 @@ var import_tone4 = require("tone");
 var import_waveform_data = __toESM(require("waveform-data"));
 function loadWaveformData(src) {
   return __async(this, null, function* () {
+    var _a, _b;
     const response = yield fetch(src);
     if (!response.ok) {
       throw new Error(`Failed to fetch waveform data: ${response.statusText}`);
     }
-    const isBinary = src.endsWith(".dat");
+    const { pathname } = new URL(src, (_b = (_a = globalThis.location) == null ? void 0 : _a.href) != null ? _b : "http://localhost");
+    const isBinary = pathname.toLowerCase().endsWith(".dat");
     if (isBinary) {
       const arrayBuffer = yield response.arrayBuffer();
       return import_waveform_data.default.create(arrayBuffer);
@@ -3764,6 +3766,7 @@ var WaveformPlaylistProvider = ({
   soundFontCache,
   deferEngineRebuild = false,
   indefinitePlayback = false,
+  sampleRate: sampleRateProp,
   children
 }) => {
   var _a, _b, _c, _d;
@@ -3819,6 +3822,7 @@ var WaveformPlaylistProvider = ({
   const playbackEndTimeRef = (0, import_react24.useRef)(null);
   const scrollContainerRef = (0, import_react24.useRef)(null);
   const isAutomaticScrollRef = (0, import_react24.useRef)(false);
+  const frameCallbacksRef = (0, import_react24.useRef)(/* @__PURE__ */ new Map());
   const continuousPlayRef = (0, import_react24.useRef)((_d = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _d : false);
   const activeAnnotationIdRef = (0, import_react24.useRef)(null);
   const engineTracksRef = (0, import_react24.useRef)(null);
@@ -3827,9 +3831,21 @@ var WaveformPlaylistProvider = ({
   const isDraggingRef = (0, import_react24.useRef)(false);
   const prevTracksRef = (0, import_react24.useRef)([]);
   const samplesPerPixelRef = (0, import_react24.useRef)(initialSamplesPerPixel);
-  const sampleRateRef = (0, import_react24.useRef)(
-    typeof AudioContext !== "undefined" ? (0, import_playout5.getGlobalAudioContext)().sampleRate : 48e3
-  );
+  const [initialSampleRate] = (0, import_react24.useState)(() => {
+    if (typeof AudioContext === "undefined") return sampleRateProp != null ? sampleRateProp : 48e3;
+    try {
+      if (sampleRateProp !== void 0) {
+        return (0, import_playout5.configureGlobalContext)({ sampleRate: sampleRateProp });
+      }
+      return (0, import_playout5.getGlobalAudioContext)().sampleRate;
+    } catch (err) {
+      console.warn(
+        "[waveform-playlist] Failed to configure AudioContext: " + String(err) + " \u2014 falling back to " + (sampleRateProp != null ? sampleRateProp : 48e3) + " Hz"
+      );
+      return sampleRateProp != null ? sampleRateProp : 48e3;
+    }
+  });
+  const sampleRateRef = (0, import_react24.useRef)(initialSampleRate);
   const { timeFormat, setTimeFormat, formatTime: formatTime2 } = useTimeFormat();
   const zoom = useZoomControls({ engineRef, initialSamplesPerPixel });
   const { samplesPerPixel, onEngineState: onZoomEngineState } = zoom;
@@ -4179,15 +4195,28 @@ var WaveformPlaylistProvider = ({
         let peaks;
         if (clip.waveformData) {
           try {
+            const wdRate = clip.waveformData.sample_rate;
+            const clipRate = clip.sampleRate;
+            let peakOffset = clip.offsetSamples;
+            let peakDuration = clip.durationSamples;
+            let peakSpp = samplesPerPixel;
+            if (wdRate !== clipRate && clipRate > 0 && wdRate > 0) {
+              const ratio = wdRate / clipRate;
+              peakOffset = Math.round(clip.offsetSamples * ratio);
+              peakDuration = Math.round(clip.durationSamples * ratio);
+              peakSpp = Math.max(1, Math.round(samplesPerPixel * ratio));
+            }
             peaks = extractPeaksFromWaveformDataFull(
               clip.waveformData,
-              samplesPerPixel,
+              peakSpp,
               mono,
-              clip.offsetSamples,
-              clip.durationSamples
+              peakOffset,
+              peakDuration
             );
           } catch (err) {
-            console.warn("[waveform-playlist] Failed to extract peaks from waveformData:", err);
+            console.warn(
+              "[waveform-playlist] Failed to extract peaks from waveformData: " + String(err)
+            );
           }
         }
         if (!peaks) {
@@ -4202,7 +4231,9 @@ var WaveformPlaylistProvider = ({
                 clip.durationSamples
               );
             } catch (err) {
-              console.warn("[waveform-playlist] Failed to extract peaks from cache:", err);
+              console.warn(
+                "[waveform-playlist] Failed to extract peaks from cache: " + String(err)
+              );
             }
           }
         }
@@ -4252,10 +4283,30 @@ var WaveformPlaylistProvider = ({
     const elapsed = (0, import_tone4.getContext)().currentTime - ((_a2 = playbackStartTimeRef.current) != null ? _a2 : 0);
     return ((_b2 = audioStartPositionRef.current) != null ? _b2 : 0) + elapsed;
   }, []);
+  const registerFrameCallback = (0, import_react24.useCallback)((id, cb) => {
+    frameCallbacksRef.current.set(id, cb);
+  }, []);
+  const unregisterFrameCallback = (0, import_react24.useCallback)((id) => {
+    frameCallbacksRef.current.delete(id);
+  }, []);
   const startAnimationLoop = (0, import_react24.useCallback)(() => {
+    const audioCtx = (0, import_playout5.getGlobalAudioContext)();
     const updateTime = () => {
       const time = getPlaybackTime();
       currentTimeRef.current = time;
+      const latency = "outputLatency" in audioCtx ? audioCtx.outputLatency : 0;
+      const visualTime = Math.max(0, time - latency);
+      const sr = sampleRateRef.current;
+      const spp = samplesPerPixelRef.current;
+      const frameData = {
+        time,
+        visualTime,
+        sampleRate: sr,
+        samplesPerPixel: spp
+      };
+      for (const cb of frameCallbacksRef.current.values()) {
+        cb(frameData);
+      }
       const currentAnnotations = annotationsRef.current;
       if (currentAnnotations.length > 0) {
         const currentAnnotation = currentAnnotations.find(
@@ -4290,10 +4341,9 @@ var WaveformPlaylistProvider = ({
       }
       if (isAutomaticScrollRef.current && scrollContainerRef.current && duration > 0) {
         const container = scrollContainerRef.current;
-        const sr = sampleRateRef.current;
-        const pixelPosition = time * sr / samplesPerPixelRef.current;
+        const pixelPosition = visualTime * sr / spp;
         const containerWidth = container.clientWidth;
-        const targetScrollLeft = Math.max(0, pixelPosition - containerWidth / 2);
+        const targetScrollLeft = Math.round(Math.max(0, pixelPosition - containerWidth / 2));
         container.scrollLeft = targetScrollLeft;
       }
       if (playbackEndTimeRef.current !== null && time >= playbackEndTimeRef.current) {
@@ -4529,7 +4579,9 @@ var WaveformPlaylistProvider = ({
       currentTimeRef,
       playbackStartTimeRef,
       audioStartPositionRef,
-      getPlaybackTime
+      getPlaybackTime,
+      registerFrameCallback,
+      unregisterFrameCallback
     }),
     [
       isPlaying,
@@ -4537,7 +4589,9 @@ var WaveformPlaylistProvider = ({
       currentTimeRef,
       playbackStartTimeRef,
       audioStartPositionRef,
-      getPlaybackTime
+      getPlaybackTime,
+      registerFrameCallback,
+      unregisterFrameCallback
     ]
   );
   const stateValue = (0, import_react24.useMemo)(
@@ -5318,32 +5372,19 @@ var PositionDisplay = import_styled_components3.default.span`
 var AudioPosition = ({ className }) => {
   var _a;
   const timeRef = (0, import_react27.useRef)(null);
-  const animationFrameRef = (0, import_react27.useRef)(null);
-  const { isPlaying, currentTimeRef, getPlaybackTime } = usePlaybackAnimation();
+  const { isPlaying, currentTimeRef, registerFrameCallback, unregisterFrameCallback } = usePlaybackAnimation();
   const { timeFormat: format } = usePlaylistData();
   (0, import_react27.useEffect)(() => {
-    const updateTime = () => {
-      var _a2;
-      if (timeRef.current) {
-        const time = isPlaying ? getPlaybackTime() : (_a2 = currentTimeRef.current) != null ? _a2 : 0;
-        timeRef.current.textContent = (0, import_ui_components6.formatTime)(time, format);
-      }
-      if (isPlaying) {
-        animationFrameRef.current = requestAnimationFrame(updateTime);
-      }
-    };
+    const id = "audio-position";
     if (isPlaying) {
-      animationFrameRef.current = requestAnimationFrame(updateTime);
-    } else {
-      updateTime();
+      registerFrameCallback(id, ({ time }) => {
+        if (timeRef.current) {
+          timeRef.current.textContent = (0, import_ui_components6.formatTime)(time, format);
+        }
+      });
     }
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = null;
-      }
-    };
-  }, [isPlaying, format, currentTimeRef, getPlaybackTime]);
+    return () => unregisterFrameCallback(id);
+  }, [isPlaying, format, registerFrameCallback, unregisterFrameCallback]);
   (0, import_react27.useEffect)(() => {
     var _a2;
     if (!isPlaying && timeRef.current) {
@@ -5503,33 +5544,20 @@ var PlayheadLine = import_styled_components4.default.div.attrs((props) => ({
 `;
 var AnimatedPlayhead = ({ color = "#ff0000" }) => {
   const playheadRef = (0, import_react30.useRef)(null);
-  const animationFrameRef = (0, import_react30.useRef)(null);
-  const { isPlaying, currentTimeRef, getPlaybackTime } = usePlaybackAnimation();
+  const { isPlaying, currentTimeRef, registerFrameCallback, unregisterFrameCallback } = usePlaybackAnimation();
   const { samplesPerPixel, sampleRate, progressBarWidth } = usePlaylistData();
   (0, import_react30.useEffect)(() => {
-    const updatePosition = () => {
-      var _a;
-      if (playheadRef.current) {
-        const time = isPlaying ? getPlaybackTime() : (_a = currentTimeRef.current) != null ? _a : 0;
-        const position = time * sampleRate / samplesPerPixel;
-        playheadRef.current.style.transform = `translate3d(${position}px, 0, 0)`;
-      }
-      if (isPlaying) {
-        animationFrameRef.current = requestAnimationFrame(updatePosition);
-      }
-    };
+    const id = "playhead";
     if (isPlaying) {
-      animationFrameRef.current = requestAnimationFrame(updatePosition);
-    } else {
-      updatePosition();
+      registerFrameCallback(id, ({ visualTime, sampleRate: sr, samplesPerPixel: spp }) => {
+        if (playheadRef.current) {
+          const px = visualTime * sr / spp;
+          playheadRef.current.style.transform = `translate3d(${px}px, 0, 0)`;
+        }
+      });
     }
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = null;
-      }
-    };
-  }, [isPlaying, sampleRate, samplesPerPixel, currentTimeRef, getPlaybackTime]);
+    return () => unregisterFrameCallback(id);
+  }, [isPlaying, registerFrameCallback, unregisterFrameCallback]);
   (0, import_react30.useEffect)(() => {
     var _a;
     if (!isPlaying && playheadRef.current) {
@@ -5601,10 +5629,10 @@ var ChannelWithProgress = (_a) => {
     "clipOffsetSeconds"
   ]);
   const progressRef = (0, import_react31.useRef)(null);
-  const animationFrameRef = (0, import_react31.useRef)(null);
+  const callbackId = (0, import_react31.useId)();
   const theme = (0, import_ui_components8.useTheme)();
   const { waveHeight } = (0, import_ui_components8.usePlaylistInfo)();
-  const { isPlaying, currentTimeRef, getPlaybackTime } = usePlaybackAnimation();
+  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)(
@@ -5613,46 +5641,32 @@ var ChannelWithProgress = (_a) => {
     samplesPerPixel
   );
   (0, import_react31.useEffect)(() => {
-    const updateProgress = () => {
-      var _a2;
-      if (progressRef.current) {
-        const currentTime = isPlaying ? getPlaybackTime() : (_a2 = currentTimeRef.current) != null ? _a2 : 0;
-        const currentSample = currentTime * sampleRate;
-        const clipEndSample = clipStartSample + clipDurationSamples;
-        let ratio = 0;
-        if (currentSample <= clipStartSample) {
-          ratio = 0;
-        } else if (currentSample >= clipEndSample) {
-          ratio = 1;
-        } else {
-          const playedSamples = currentSample - clipStartSample;
-          ratio = playedSamples / clipDurationSamples;
-        }
-        progressRef.current.style.transform = `scaleX(${ratio})`;
-      }
-      if (isPlaying) {
-        animationFrameRef.current = requestAnimationFrame(updateProgress);
-      }
-    };
     if (isPlaying) {
-      animationFrameRef.current = requestAnimationFrame(updateProgress);
-    } else {
-      updateProgress();
+      registerFrameCallback(callbackId, ({ visualTime, sampleRate: sr }) => {
+        if (progressRef.current) {
+          const currentSample = visualTime * sr;
+          const clipEndSample = clipStartSample + clipDurationSamples;
+          let ratio = 0;
+          if (currentSample <= clipStartSample) {
+            ratio = 0;
+          } else if (currentSample >= clipEndSample) {
+            ratio = 1;
+          } else {
+            const playedSamples = currentSample - clipStartSample;
+            ratio = playedSamples / clipDurationSamples;
+          }
+          progressRef.current.style.transform = `scaleX(${ratio})`;
+        }
+      });
     }
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = null;
-      }
-    };
+    return () => unregisterFrameCallback(callbackId);
   }, [
     isPlaying,
-    sampleRate,
     clipStartSample,
     clipDurationSamples,
-    clipPixelWidth,
-    currentTimeRef,
-    getPlaybackTime
+    callbackId,
+    registerFrameCallback,
+    unregisterFrameCallback
   ]);
   (0, import_react31.useEffect)(() => {
     var _a2;