elpatron/hoerdle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(waveform): fix playback cursor animation using useEffect

Browse Source
This commit is contained in:
Hördle Bot
2025-11-23 01:10:04 +01:00
parent e06e0d2919
commit 54f47a9470
1 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/WaveformEditor.tsx
View File

@@ -187,15 +187,30 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
}
};
const updatePlaybackPosition = () => {
if (!audioContextRef.current || !isPlaying) return;
// Animation loop for playback cursor
useEffect(() => {
if (!isPlaying || !audioContextRef.current) {
return;
}
const elapsed = audioContextRef.current.currentTime - playbackStartTimeRef.current;
const currentPos = playbackOffsetRef.current + elapsed;
setPlaybackPosition(currentPos);
const animate = () => {
if (!audioContextRef.current || !isPlaying) return;
animationFrameRef.current = requestAnimationFrame(updatePlaybackPosition);
};
const elapsed = audioContextRef.current.currentTime - playbackStartTimeRef.current;
const currentPos = playbackOffsetRef.current + elapsed;
setPlaybackPosition(currentPos);
animationFrameRef.current = requestAnimationFrame(animate);
};
animationFrameRef.current = requestAnimationFrame(animate);
return () => {
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
}
};
}, [isPlaying]);
const handlePlaySegment = (segmentIndex: number) => {
if (!audioBuffer || !audioContextRef.current) return;
@@ -219,8 +234,6 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
setPlayingSegment(segmentIndex);
setPlaybackPosition(segmentStart);
animationFrameRef.current = requestAnimationFrame(updatePlaybackPosition);
source.onended = () => {
setIsPlaying(false);
setPlayingSegment(null);
@@ -250,8 +263,6 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
setIsPlaying(true);
setPlaybackPosition(startTime);
animationFrameRef.current = requestAnimationFrame(updatePlaybackPosition);
source.onended = () => {
setIsPlaying(false);
setPlaybackPosition(null);