music

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

@@ -2,16 +2,17 @@ import { useEditor } from "@/modules/editor";
 import { PauseCircleOutlined, PlayCircleOutlined } from "@ant-design/icons-vue";
 import { css } from "@linaria/core";
 import { Button, Slider } from "ant-design-vue";
-import { defineComponent, reactive, ref, watch } from "vue";
+import { defineComponent, onMounted, reactive, ref, watch } from "vue";
 import { number, bool } from "vue-types";
 import { IconMusic } from "@/assets/icons";
 export const PageMusic = defineComponent({
   setup(props) {
-    const { store, actions, helper } = useEditor();
+    const { store, actions, helper, controls } = useEditor();
     const state = reactive({
       playStatus: false,
       duration: 0,
       currentTime: 0,
+      muted: true,
     });
     const rootComp = helper.findRootComp();
 
@@ -36,7 +37,21 @@ export const PageMusic = defineComponent({
       state.playStatus = false;
       audioRef.value.currentTime = 0;
     };
-
+    onMounted(() => {
+      setTimeout(() => {
+        if (!store.isEditMode && !state.playStatus) {
+          document.body.addEventListener(
+            "touchend",
+            () => {
+              playAudio(true);
+            },
+            {
+              once: true,
+            }
+          );
+        }
+      }, 500);
+    });
     const timeChange = (v: number) => {
       state.currentTime = v;
       audioRef.value.currentTime = v;
@@ -83,7 +98,9 @@ export const PageMusic = defineComponent({
               state.currentTime = e.target.currentTime;
             }}
             onEnded={() => {
-              audioRest();
+              if (store.isEditMode) {
+                audioRest();
+              }
             }}
           >
             <source src={music} type="audio/mpeg" />