update(Player): 调整音频进度时，onPointerUp 时触发变更

src/components/AudioPlayer/Player.tsx

@@ -65,6 +65,7 @@ export default function AudioPlayer({
 
   const audioRef = useRef(new Audio(''));
   const isReady = useRef<boolean>(false); // 是否加载过组件
+  const isDrag = useRef<boolean>(false); // 是否拖动进度条
 
   const [trackProgress, setTrackProgress] = useState<number>(0); // 音频进度(s)
   const [duration, setDuration] = useState<number>(0); // 音频总时长(s)
@@ -125,7 +126,9 @@ export default function AudioPlayer({
       handleSwitchAudio(1);
     }
 
-    setTrackProgress(audioRef.current.currentTime);
+    if (!isDrag.current) {
+      setTrackProgress(audioRef.current.currentTime);
+    }
   };
 
   // 设置 mediaSession
@@ -211,6 +214,7 @@ export default function AudioPlayer({
       isReady.current = true;
     }
   };
+
   // 切换歌曲
   useEffect(() => {
     switchNewAudio();
@@ -279,9 +283,13 @@ export default function AudioPlayer({
 
           {/* 进度条 */}
           <ProgressBar
-            value={trackProgress}
+            currentTime={trackProgress}
             duration={duration}
-            onChange={(value: number) => handleChangeProgress(value)}
+            onChange={(value: number) => setTrackProgress(value)}
+            onCommit={(value: number) => handleChangeProgress(value)}
+            onChangeDraging={(value: boolean) => {
+              isDrag.current = value;
+            }}
             className="w-710px"
           />
 

src/components/AudioPlayer/widget/ProgressBar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import * as Slider from '@radix-ui/react-slider';
@@ -5,26 +7,44 @@ import * as Slider from '@radix-ui/react-slider';
 import styles from './index.module.css';
 
 export default function ProgressBar({
-  value,
+  currentTime,
   duration,
   className,
   onChange,
+  onCommit,
+  onChangeDraging,
 }: {
-  value: number;
+  currentTime: number;
   duration: number;
   className?: string;
   onChange: (value: number) => void;
+  onCommit: (value: number) => void;
+  onChangeDraging: (value: boolean) => void;
 }) {
-  const handleChange = (value: number) => {
-    onChange(value);
+  const handleChange = (v: number) => {
+    onChange(v);
+  };
+
+  // 光标按下
+  const handlePointerDown = () => {
+    onChangeDraging(true);
+  };
+
+  // 光标抬起
+  const handlePointerUp = () => {
+    onChangeDraging(false);
+    onCommit(currentTime);
   };
 
   return (
     <Slider.Root
-      value={[value]}
+      value={[currentTime]}
       max={duration}
+      step={1}
       className={`${styles.ProgressBarRoot} ${className}`}
       onValueChange={(value: number[]) => handleChange(value[0])}
+      onPointerDown={handlePointerDown}
+      onPointerUp={handlePointerUp}
     >
       <Slider.Track className={`${styles.ProgressBarTrack}`}>
         <Slider.Range className={`${styles.ProgressBarRange}`} />