feat(audio): 新增can-play事件 (#1515)

src/packages/__VUE/audio/demo.vue

@@ -17,6 +17,7 @@
       :muted="muted"
       :autoplay="autoplay"
       :loop="false"
+      @can-play="onCanplay"
       type="none"
       ref="audioDemo"
     >
@@ -124,11 +125,12 @@ export default createDemo({
       console.log('改变进度条', val);
     };
 
+    const onCanplay = (e: Event) => {
+      duration.value = audioDemo.value.second.toFixed();
+    };
+
     onMounted(() => {
       console.log(audioDemo.value);
-      setTimeout(() => {
-        duration.value = audioDemo.value.second.toFixed();
-      }, 500);
     });
 
     return {
@@ -141,7 +143,8 @@ export default createDemo({
       ended,
       duration,
       changeProgress,
-      translate
+      translate,
+      onCanplay
     };
   }
 });

src/packages/__VUE/audio/doc.en-US.md

@@ -234,3 +234,4 @@ export default {
 | ended  | Emitted when audio ended | —— |
 | mute  | Emitted when audio mute | —— |
 | changeProgress  | Emitted when audio progress change | play time（millisecond） |
+| can-play `v3.2.0` | Emitted when the user agent can play the media | `event: Event` |

src/packages/__VUE/audio/doc.md

@@ -234,5 +234,6 @@ export default {
 | ended  | 语音播放完成，当loop设置为false时生效 | —— |
 | mute  | 触发静音 | —— |
 | changeProgress  | 当进度条改变时触发 | 返回当前播放时长（单位：毫秒） |
+| can-play `v3.2.0` | 当可以播放媒体文件时触发 | `event: Event` |
 
     

src/packages/__VUE/audio/index.vue

@@ -52,6 +52,7 @@
       :autoplay="autoplay"
       :loop="loop"
       @timeupdate="onTimeupdate"
+      @canplay="onCanplay"
       @ended="audioEnd"
       :muted="hanMuted"
     >
@@ -104,7 +105,7 @@ export default create({
     }
   },
   components: {},
-  emits: ['fastBack', 'play', 'forward', 'ended', 'changeProgress', 'mute'],
+  emits: ['fastBack', 'play', 'forward', 'ended', 'changeProgress', 'mute', 'can-play'],
 
   setup(props, { emit }) {
     const audioRef = ref(null);
@@ -144,20 +145,23 @@ export default create({
       } catch (e) {
         console.log((e as any).message);
       }
+    });
 
-      // 获取当前音频播放时长
-      setTimeout(() => {
-        const audioR = audioRef.value as any;
-        // 自动播放
-        if (props.autoplay) {
-          if (audioR && audioR.paused) {
-            audioR.play();
-          }
+    // audio canplay 事件触发时
+    const onCanplay = (e: Event) => {
+      const audioR = audioRef.value as any;
+      // 自动播放
+      if (props.autoplay) {
+        if (audioR && audioR.paused) {
+          audioR.play();
         }
-        audioData.second = audioR.duration;
-        audioData.duration = formatSeconds(audioR.duration);
-      }, 500);
-    });
+      }
+      // 获取当前音频播放时长
+      audioData.second = audioR.duration;
+      audioData.duration = formatSeconds(audioR.duration);
+
+      emit('can-play', e);
+    };
 
     //播放时间
     const onTimeupdate = (e: any) => {
@@ -166,7 +170,9 @@ export default create({
 
     //后退
     const fastBack = () => {
-      audioData.currentTime--;
+      if (audioData.currentTime > 0) {
+        audioData.currentTime--;
+      }
       (audioRef.value as any).currentTime = audioData.currentTime;
 
       emit('fastBack', audioData.currentTime);
@@ -265,7 +271,8 @@ export default create({
       progressChange,
       audioEnd,
       onTimeupdate,
-      handleMute
+      handleMute,
+      onCanplay
     };
   }
 });