From c1eae8d256e5433b4e1d97450a79edfd0ab0861b Mon Sep 17 00:00:00 2001 From: Chukwuma Nwaugha Date: Tue, 10 Dec 2024 22:14:43 +0000 Subject: [PATCH] improve seeking and scrubbing --- .../audio-player/AudioPlayer.svelte | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/app/src/lib/components/audio-player/AudioPlayer.svelte b/app/src/lib/components/audio-player/AudioPlayer.svelte index d57a47f..45ba505 100644 --- a/app/src/lib/components/audio-player/AudioPlayer.svelte +++ b/app/src/lib/components/audio-player/AudioPlayer.svelte @@ -8,6 +8,7 @@ import AudioPlayerVolumeController from './AudioPlayerVolumeController.svelte'; import AudioPlayerDownloadButton from './AudioPlayerDownloadButton.svelte'; import AudioPlayerPlaybackControl from './AudioPlayerPlaybackControl.svelte'; + import { debounce } from 'throttle-debounce'; export let src: string; export let title: string; @@ -20,28 +21,30 @@ let duration = 0; let currentTime = 0; - let previousSliderValue = 0; - function setAudioData() { duration = audioRef.duration; currentTime = audioRef.currentTime; } - function setAudioTime() { + function setCurrentTime() { currentTime = audioRef.currentTime; } + // Use a shorter debounce interval or remove it entirely for a smoother experience + const updateAudioTime = debounce(0, (t: number) => (audioRef.currentTime = t)); + onMount(() => { audioRef.volume = volume; }); - const handleSliderChange = (newValue: number[]) => { - const BUFFER = 2 * SLIDER_STEP; - const [value] = newValue; - // Only update if there's a significant change to prevent unnecessary updates - if (Math.abs(value - previousSliderValue) > BUFFER) { - audioRef.currentTime = (value / 100) * audioRef.duration; - } + let previousSliderValue = 0; + + // Since the slider value = currentTime and max = duration, we can directly update the time + const handleSliderChange = ([value]: number[]) => { + const valueDiff = Math.abs(value - previousSliderValue); + const seeking = valueDiff > 2 * SLIDER_STEP; + if (seeking) updateAudioTime(value); + previousSliderValue = value; }; @@ -52,18 +55,18 @@ }; -
+
-
+