Update index.tsx

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

@@ -49,7 +49,8 @@ export default defineComponent({
       dragStatus: false, // 是否开始拖动
       playState: 'pause' as 'play' | 'pause',
       vudio: null as any,
-      afterMa3: true
+      afterMa3: true,
+      count: 0
     });
     const canvasRef: any = ref();
     const audioRef: any = ref();
@@ -58,19 +59,27 @@ export default defineComponent({
     watch(
       () => props.show,
       val => {
+        data.count = 0;
         if (val) {
-          data.vudio = null;
-          console.log(audioRef.value, 'audioRef.value');
+          // data.count = 0;
+          // audioRef.value.src = item.value.content;
           onToggleAudio();
-          // audioRef.value?.addEventListener('load', () => {
-          //   console.log('111');
-          // });
         } else {
           audioRef.value.pause();
+          // audioRef.value.src = '';
           data.playState = 'pause';
+          // data.vudio = null;
         }
       }
     );
+    // watch(
+    //   () => props.item,
+    //   () => {
+    //     // data.count = 0;
+    //     // audioRef.value.src = item.value.content;
+    //     onToggleAudio();
+    //   }
+    // );
     watch(
       () => props.pageVisibility,
       val => {
@@ -86,7 +95,17 @@ export default defineComponent({
       if (audioRef.value.paused) {
         audioRef.value.play();
         data.playState = 'play';
-        onInit(audioRef.value, canvasRef.value);
+        //
+        nextTick(() => {
+          // onInit(audioRef.value, canvasRef.value);
+          // setTimeout(() => {
+          //   onInit(audioRef.value, canvasRef.value);
+          // }, 100);
+          // console.log(data.vudio, 'data.vudio');
+          // if (data.vudio) {
+          //   data.vudio.dance();
+          // }
+        });
       } else {
         audioRef.value.pause();
         data.playState = 'pause';
@@ -94,12 +113,14 @@ export default defineComponent({
     };
 
     const onInit = (audio: undefined, canvas: undefined) => {
-      if (!data.vudio) {
+      if (!data.vudio && data.count > 1) {
+        console.log(data.vudio, 'data.vudio');
         try {
           const rect = contetRef.value.getBoundingClientRect() || {
             width: 200,
             height: 200
           };
+
           data.vudio = new Vudio(audio, canvas, {
             effect: 'waveform',
             accuracy: 128,
@@ -120,16 +141,18 @@ export default defineComponent({
         } catch (e) {
           console.log(e, 'e');
         }
+      } else {
       }
     };
     /** 加载成功 */
     const onLoadedmetadata = () => {
       data.duration = audioRef.value?.duration;
-
-      // if (props.item.autoPlay && audioRef.value && props.show) {
-      //   data.vudio = null;
-      //   onToggleAudio();
-      // }
+      // onInit(audioRef.value, canvasRef.value);
+      if (props.item.autoPlay && audioRef.value && props.show) {
+        // data.vudio = null;
+        // data.count = 0;
+        onToggleAudio();
+      }
 
       // if (audioRef.value) {
       //   audioRef.value.stop = () => {
@@ -196,7 +219,10 @@ export default defineComponent({
               onLoadedmetadata={onLoadedmetadata}
               onTimeupdate={() => {
                 if (data.timer && data.playState === 'pause') return;
-
+                if (data.count <= 1) {
+                  data.count += 1;
+                  onInit(audioRef.value, canvasRef.value);
+                }
                 // 开始拖动时也不能更新
                 if (data.dragStatus) return;
                 data.currentTime = audioRef.value?.currentTime;