修改音频播放时切换进度条跳动异常问题

src/views/courseware-play/component/audio-item/index.module.less

@@ -46,6 +46,8 @@
   .slider {
     width: 100%;
     padding: 0 20px;
+    --van-slider-button-width: 13px !important;
+    --van-slider-button-height: 13px !important;
 
     :global {
       .n-slider {

src/views/courseware-play/component/audio-item/index.tsx

@@ -9,6 +9,7 @@ import iconpause from '../../image/icon-pause.png';
 import { NSlider } from 'naive-ui';
 import Vudio from 'vudio.js';
 import { getSecondRPM } from '@/helpers/utils';
+import { Slider } from 'vant';
 
 export default defineComponent({
   name: 'video-play',
@@ -42,7 +43,7 @@ export default defineComponent({
     const data = reactive({
       timer: null as any,
       currentTime: 0,
-      duration: 0,
+      duration: 0.1,
       loop: false,
       playState: 'pause' as 'play' | 'pause',
       vudio: null as any
@@ -121,7 +122,7 @@ export default defineComponent({
       data.timer = setTimeout(() => {
         audioRef.value.currentTime = val;
         data.timer = null;
-      }, 300);
+      }, 60);
     };
 
     /** 播放结束 */
@@ -135,7 +136,7 @@ export default defineComponent({
           <div ref={contetRef} class={styles.contentWrap}>
             <canvas ref={canvasRef}></canvas>
             <audio
-              src={isEmtry.value ? '' : item.value.content}
+              src={isEmtry.value ? '' : item.value.content + '?t=2'}
               ref={audioRef}
               loop={data.loop}
               onLoadedmetadata={onLoadedmetadata}
@@ -143,6 +144,15 @@ export default defineComponent({
                 if (data.timer && data.playState === 'pause') return;
                 data.currentTime = audioRef.value.currentTime;
               }}
+              onError={() => {
+                console.log('error');
+                audioRef.value.pause();
+                data.playState = 'pause';
+              }}
+              onPause={() => {
+                console.log('pause');
+                data.playState = 'pause';
+              }}
               onEnded={onEnded}
               crossorigin="anonymous"
               playsinline="false"></audio>
@@ -162,13 +172,22 @@ export default defineComponent({
             <div>{getSecondRPM(data.duration)}</div>
           </div>
           <div class={styles.slider}>
-            <NSlider
+            {/* <NSlider
               tooltip={false}
               step={0.01}
               class={styles.timeProgress}
               value={data.currentTime}
               max={data.duration}
               onUpdate:value={val => handleChangeTime(val)}
+            /> */}
+            <Slider
+              step={0.01}
+              class={styles.timeProgress}
+              v-model={data.currentTime}
+              max={data.duration}
+              onUpdate:modelValue={val => {
+                handleChangeTime(val);
+              }}
             />
           </div>
           <div class={styles.actions} onClick={() => emit('close')}>