audio autoplay

package.json

@@ -54,6 +54,7 @@
     "dom-to-image": "^2.6.0",
     "file-saver": "^2.0.5",
     "hotkeys-js": "^3.10.2",
+    "howler": "^2.2.3",
     "jszip": "^3.10.1",
     "load-asset": "^1.2.0",
     "lodash": "^4.17.21",

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

@@ -1,13 +1,16 @@
+import { IconMusic } from "@/assets/icons";
+import { isWeixinBrowser } from "@/controllers/wxController";
 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, onMounted, reactive, ref, watch } from "vue";
-import { number, bool } from "vue-types";
-import { IconMusic } from "@/assets/icons";
+import { Howl } from "howler";
+import { defineComponent, reactive, ref, watch } from "vue";
+import { bool, number } from "vue-types";
+declare const WeixinJSBridge: any;
 export const PageMusic = defineComponent({
-  setup(props) {
-    const { store, actions, helper, controls } = useEditor();
+  setup() {
+    const { store, helper } = useEditor();
     const state = reactive({
       playStatus: false,
       duration: 0,
@@ -15,48 +18,92 @@ export const PageMusic = defineComponent({
       muted: true,
     });
     const rootComp = helper.findRootComp();
+    let audioBgm = ref();
 
-    const audioRef = ref();
+    const initAudioBgm = () => {
+      audioBgm.value = null;
+      audioBgm.value = new Howl({
+        src: [rootComp?.value.music],
+        loop: store.isEditMode ? false : true,
+        preload: true,
+        HTML5: true,
+        autoplay: store.isEditMode ? false : true,
+      });
+      audioBgm.value.on("load", () => {
+        state.duration = audioBgm.value.duration();
+        if (!store.isEditMode) {
+          if (isWeixinBrowser()) {
+            WeixinJSBridge.invoke(
+              "getNetworkType",
+              {},
+              () => {
+                playAudio(true);
+              },
+              false
+            );
+          }
+        }
+      });
+      audioBgm.value.on("play", () => {
+        if (!state.playStatus) {
+          state.playStatus = true;
+        }
+        playStep();
+      });
+      audioBgm.value.on("end", () => {
+        audioRest();
+      });
+    };
+    initAudioBgm();
+    const playStep = () => {
+      if (!audioBgm.value) {
+        return;
+      }
+      let playing = audioBgm.value.playing();
+      if (!playing) {
+        return;
+      }
+      let seek = audioBgm.value.seek();
+      state.currentTime = seek;
+      requestAnimationFrame(playStep);
+    };
 
     const playAudio = async (status: boolean) => {
       if (status) {
-        audioRef.value.play();
+        audioBgm.value.play();
       } else {
-        audioRef.value.pause();
         audioRest();
       }
-      state.playStatus = status;
+      let playing = audioBgm.value.playing();
+      if (status && playing) {
+        state.playStatus = true;
+        return;
+      }
+      state.playStatus = false;
     };
     watch(
       () => rootComp?.value.music,
       () => {
         audioRest();
+        initAudioBgm();
       }
     );
-    const audioRest = () => {
-      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;
+      audioBgm.value && audioBgm.value.seek(v);
+    };
+    const audioRest = () => {
+      if (!audioBgm.value) {
+        return;
+      }
+      let playing = audioBgm.value.playing();
+      if (playing) {
+        audioBgm.value.pause();
+      }
+      state.playStatus = false;
+      state.currentTime = 0;
+      audioBgm.value.seek(0);
     };
-
     return () => {
       const music = rootComp?.value.music;
       return (
@@ -80,32 +127,6 @@ export const PageMusic = defineComponent({
               <IconMusic />
             </div>
           )}
-          <audio
-            controls={false}
-            ref={audioRef}
-            key={music}
-            loop={store.isEditMode ? false : true}
-            autoplay={store.isEditMode ? false : true}
-            onPlay={() => {
-              if (!state.playStatus) {
-                state.playStatus = true;
-              }
-            }}
-            onLoadedmetadata={(e: any) => {
-              state.duration = e.target?.duration;
-            }}
-            onTimeupdate={(e: any) => {
-              state.currentTime = e.target.currentTime;
-            }}
-            onEnded={() => {
-              if (store.isEditMode) {
-                audioRest();
-              }
-            }}
-          >
-            <source src={music} type="audio/mpeg" />
-            <p>你的浏览器不支持音频播放</p>
-          </audio>
         </div>
       );
     };

src/typings/pro.d.ts

@@ -21,3 +21,4 @@ declare module "vue-dndrop" {
   export const vueDndrop: any;
 }
 declare module "ckeditor5-line-height-latest/src/lineheight";
+declare module 'howler'

yarn.lock

@@ -5162,6 +5162,11 @@ hotkeys-js@^3.10.2:
   resolved "http://124.70.149.18:4873/hotkeys-js/-/hotkeys-js-3.10.2.tgz#cf52661904f5a13a973565cb97085fea2f5ae257"
   integrity sha512-Z6vLmJTYzkbZZXlBkhrYB962Q/rZGc/WHQiyEGu9ZZVF7bAeFDjjDa31grWREuw9Ygb4zmlov2bTkPYqj0aFnQ==
 
+howler@^2.2.3:
+  version "2.2.3"
+  resolved "http://124.70.149.18:4873/howler/-/howler-2.2.3.tgz#a2eff9b08b586798e7a2ee17a602a90df28715da"
+  integrity sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg==
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "http://124.70.149.18:4873/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"