fix
This commit is contained in:
@@ -9,28 +9,6 @@
|
|||||||
|
|
||||||
const audio = getAudioContext();
|
const audio = getAudioContext();
|
||||||
|
|
||||||
// Local state for slider to allow binding
|
|
||||||
let sliderValue = $state([0]);
|
|
||||||
|
|
||||||
// Sync Audio -> Slider
|
|
||||||
$effect(() => {
|
|
||||||
// Only sync if the value is different to avoid unnecessary updates
|
|
||||||
// and potential loops if onValueChange fires on prop change.
|
|
||||||
// Using a small threshold or just direct assignment if we trust the loop break.
|
|
||||||
if (Math.abs(sliderValue[0] - audio.currentTime) > 0.1) {
|
|
||||||
sliderValue = [audio.currentTime];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function onSeek(v: number[]) {
|
|
||||||
// Guard against feedback loop:
|
|
||||||
// If the value matches current time (within tolerance), it's likely a feedback
|
|
||||||
// from the effect above -> component -> onValueChange.
|
|
||||||
if (Math.abs(v[0] - audio.currentTime) < 0.1) return;
|
|
||||||
|
|
||||||
audio.seek(v[0]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function onVolume(v: number[]) {
|
function onVolume(v: number[]) {
|
||||||
player.setVolume(v[0]);
|
player.setVolume(v[0]);
|
||||||
}
|
}
|
||||||
@@ -72,12 +50,10 @@
|
|||||||
|
|
||||||
<!-- Progress -->
|
<!-- Progress -->
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<Slider
|
<input
|
||||||
bind:value={sliderValue}
|
type="range"
|
||||||
|
bind:value={audio.currentTime}
|
||||||
max={audio.duration || 100}
|
max={audio.duration || 100}
|
||||||
step={0.01}
|
|
||||||
onValueChange={onSeek}
|
|
||||||
type="multiple"
|
|
||||||
class="w-full"
|
class="w-full"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user