@waveform-playlist/browser 11.2.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;
@@ -1174,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<{
@@ -1811,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;
@@ -1174,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<{
@@ -1811,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

@@ -3822,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);
@@ -4282,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(
@@ -4320,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) {
@@ -4559,7 +4579,9 @@ var WaveformPlaylistProvider = ({
       currentTimeRef,
       playbackStartTimeRef,
       audioStartPositionRef,
-      getPlaybackTime
+      getPlaybackTime,
+      registerFrameCallback,
+      unregisterFrameCallback
     }),
     [
       isPlaying,
@@ -4567,7 +4589,9 @@ var WaveformPlaylistProvider = ({
       currentTimeRef,
       playbackStartTimeRef,
       audioStartPositionRef,
-      getPlaybackTime
+      getPlaybackTime,
+      registerFrameCallback,
+      unregisterFrameCallback
     ]
   );
   const stateValue = (0, import_react24.useMemo)(
@@ -5348,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) {
@@ -5533,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) {
@@ -5631,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)(
@@ -5643,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;