update

src/components/HomePage.vue

@@ -6,6 +6,8 @@ import { globalStore } from "../globalstore.js";
 import Login from '../components/Login.vue'
 import { isWeixin, isLogin, getParam, Storage, Request } from "../libs/utils"
 import Lottery from '../components/Lottery.vue';
+import { Howl, Howler } from 'howler';
+
 
 import PrizeList from "./PrizeList.vue"
 import Rule from "./Rule.vue";
@@ -22,7 +24,7 @@ const props = defineProps({
   show: true
 })
 
-const isMusicOn = ref(true);
+const isMusicOn = ref(false);
 const audioElement = ref(null);
 const videoElement = ref(null);
 const videoLoaded = ref(false);
@@ -62,35 +64,38 @@ const fromShare = async () => {
 // 初始化全局音频实例
 const initGlobalAudio = () => {
   if (!globalStore.globalAudio) {
-    globalStore.globalAudio = new Audio(bgm);
-    globalStore.globalAudio.loop = true; // 设置循环播放
-    globalStore.globalAudio.preload = 'auto';
+    globalStore.globalAudio = new Howl({
+      src: [bgm],
+      autoplay: true,
+      loop: true,
+    })
+
+    globalStore.globalAudio.on('load', () => {
+      window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
+        globalStore.globalAudio.play()
+      }, false);
+      globalStore.globalAudio.play()
+    })
 
     // 监听音频事件
-    globalStore.globalAudio.addEventListener('play', () => {
+    globalStore.globalAudio.on('play', () => {
       isMusicOn.value = true;
     });
 
-    globalStore.globalAudio.addEventListener('pause', () => {
+    globalStore.globalAudio.on('pause', () => {
       isMusicOn.value = false;
     });
 
-    globalStore.globalAudio.addEventListener('ended', () => {
-      isMusicOn.value = false;
-    });
   }
   audioElement.value = globalStore.globalAudio;
 
   // 同步当前音乐状态
   isMusicOn.value = !globalStore.globalAudio.paused;
 };
-
+initGlobalAudio()
 onMounted(() => {
-  window.addEventListener("WeixinJSBridgeReady", () => {
-    initGlobalAudio();
-  })
-  initVideo();
-  checkAndPlayAudio();
+  checkAndPlayAudio()
+  // checkAndPlayAudio();
 })
 
 // 检查并播放音频
@@ -360,6 +365,7 @@ const navigateGamePage = async () => {
     if (globalStore.game_chances <= 0) {
       return weui.alert("还没有探索机会，快去参加活动吧")
     } else {
+      checkAndPlayAudio()
       gameSwiperShow.value = true;
     }
   }
@@ -558,6 +564,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
 .show-music-btn {
   z-index: 11;
 }
+
 .logo {
   top: 4vw;
   width: 24vw;
@@ -621,6 +628,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
   background-position: 0 0;
   z-index: -1;
 }
+
 .transparent-hole-cover {
   position: fixed;
   width: 30vw;
@@ -630,6 +638,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
   right: 8vw;
   z-index: -2;
 }
+
 .transparent-hole-cover-left {
   position: fixed;
   width: 30vw;
@@ -639,6 +648,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
   left: 8vw;
   z-index: -2;
 }
+
 .scene-item {
   position: absolute;
   cursor: pointer;
@@ -664,16 +674,19 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
   top: 43.2vw;
   left: 7.2vw;
 }
+
 .item-ma2 {
   width: 14vw;
   top: 43.2vw;
   right: 7.8vw;
 }
+
 .item-ma3 {
   width: 21vw;
   top: 147vw;
   left: 7vw;
 }
+
 .item-ma4 {
   width: 25vw;
   top: 121vw;
@@ -686,6 +699,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
   top: 58vw;
   left: 0;
 }
+
 .item-jiu2 {
   width: 49vw;
   top: 58vw;
@@ -733,18 +747,23 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
   0% {
     transform: translateY(0) translateX(0) scale(1) rotate(0deg);
   }
+
   20% {
     transform: translateY(-2px) translateX(2px) scale(1.01) rotate(-1deg);
   }
+
   40% {
     transform: translateY(0) translateX(3px) scale(1.01) rotate(1deg);
   }
+
   60% {
     transform: translateY(-3px) translateX(1px) scale(1.02) rotate(-0.5deg);
   }
+
   80% {
     transform: translateY(0) translateX(0) scale(1.01) rotate(0.5deg);
   }
+
   100% {
     transform: translateY(0) translateX(0) scale(1) rotate(0deg);
   }
@@ -780,36 +799,43 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
   animation-delay: -0.9s;
   transform-origin: center bottom;
 }
+
 .scene-item.item-xique2 img {
   animation: horse-gallop 1.7s infinite ease-in-out;
   animation-delay: -0.9s;
   transform-origin: center bottom;
 }
+
 .scene-item.item-sidai img {
   animation: horse-gallop 2.6s infinite ease-in-out;
   animation-delay: -0.9s;
   transform-origin: center bottom;
 }
+
 .scene-item.item-jiu1 {
   animation: horse-gallop 2.4s infinite ease-in-out;
   animation-delay: -0.9s;
   transform-origin: center bottom;
 }
+
 .scene-item.item-jiu2 {
   animation: horse-gallop 2.2s infinite ease-in-out;
   animation-delay: -0.9s;
   transform-origin: center bottom;
 }
+
 .scene-item.item-lihe img {
   animation: horse-gallop 2s infinite ease-in-out;
   animation-delay: -0.9s;
   transform-origin: center bottom;
 }
+
 .scene-item.item-taozi img {
   animation: horse-gallop 1.5s infinite ease-in-out;
   animation-delay: -0.9s;
   transform-origin: center bottom;
 }
+
 .scene-item.item-hulu img {
   animation: horse-gallop 1.8s infinite ease-in-out;
   animation-delay: -0.9s;