audio play

src/modules/editor/components/CompUI/basicUI/Page/PageMusic.tsx

@@ -1,9 +1,13 @@
 import { IconMusic } from "@/assets/icons";
 import { isWeixinBrowser } from "@/controllers/wxController";
 import { useEditor } from "@/modules/editor";
-import { PauseCircleOutlined, PlayCircleOutlined } from "@ant-design/icons-vue";
+import {
+  PauseCircleOutlined,
+  PlayCircleOutlined,
+  LoadingOutlined,
+} from "@ant-design/icons-vue";
 import { css } from "@linaria/core";
-import { Button, Slider } from "ant-design-vue";
+import { Button, Slider, Spin } from "ant-design-vue";
 import { Howl } from "howler";
 import { defineComponent, reactive, ref, watch } from "vue";
 import { bool, number } from "vue-types";
@@ -44,6 +48,12 @@ export const PageMusic = defineComponent({
           }
         }
       });
+      audioBgm.value.on("loaderror", () => {
+        console.log("音频加载失败");
+      });
+      audioBgm.value.on("playerror", () => {
+        console.log("音频播放失败");
+      });
       audioBgm.value.on("play", () => {
         if (!state.playStatus) {
           state.playStatus = true;
@@ -69,6 +79,9 @@ export const PageMusic = defineComponent({
     };
 
     const playAudio = async (status: boolean) => {
+      if (!audioBgm.value) {
+        return;
+      }
       if (status) {
         audioBgm.value.play();
       } else {
@@ -88,7 +101,7 @@ export const PageMusic = defineComponent({
         initAudioBgm();
       }
     );
-    const timeChange = (v: number) => {
+    const seekChange = (v: number) => {
       state.currentTime = v;
       audioBgm.value && audioBgm.value.seek(v);
     };
@@ -113,7 +126,7 @@ export const PageMusic = defineComponent({
               key={music}
               playStatus={state.playStatus}
               onStatus={playAudio}
-              onDuration={timeChange}
+              onSeekChange={seekChange}
               duration={state.duration}
               currentTime={state.currentTime}
             />
@@ -139,42 +152,28 @@ const AudioPlayer = defineComponent({
     currentTime: number(),
     duration: number(),
   },
-  emits: ["status", "duration"],
+  emits: ["status", "seekChange"],
   setup(props, { emit }) {
     const audioControl = (playStatus: boolean) => {
       emit("status", playStatus);
     };
-    const durationChange = (v: any) => {
-      emit("duration", v);
+    const seekChange = (v: any) => {
+      emit("seekChange", v);
     };
-    const transTime = (value?: number) => {
-      let time = "";
-      if (!value) {
+    const formatTime = (secs?: number) => {
+      if (!secs) {
         return "00:00";
       }
-      const h = parseInt(`${value / 3600}`);
-      value %= 3600;
-      let m = parseInt(`${value / 60}`);
-      let s = parseInt(`${value % 60}`);
-      if (h > 0) {
-        time = formatTime(h + ":" + m + ":" + s);
-      } else {
-        time = formatTime(m + ":" + s);
-      }
+      secs = Math.round(secs);
 
-      return time;
-    };
-    const formatTime = (value: string) => {
-      let time = "";
-      const s = value.split(":");
-      let i = 0;
-      for (; i < s.length - 1; i++) {
-        time += s[i].length === 1 ? "0" + s[i] : s[i];
-        time += ":";
-      }
-      time += s[i].length === 1 ? "0" + s[i] : s[i];
+      const minutes = Math.floor(secs / 60) || 0;
+      const seconds = secs - minutes * 60 || 0;
 
-      return time;
+      return (
+        String(minutes).padStart(2, "0") +
+        ":" +
+        String(seconds).padStart(2, "0")
+      );
     };
     return () => {
       return (
@@ -199,11 +198,11 @@ const AudioPlayer = defineComponent({
               min={0}
               max={Math.floor(props.duration || 0)}
               value={props.currentTime}
-              onChange={durationChange}
+              onChange={seekChange}
             ></Slider>
           </div>
           <div>
-            {transTime(props.currentTime)}/{transTime(props.duration)}
+            {formatTime(props.currentTime)}/{formatTime(props.duration)}
           </div>
         </div>
       );