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();
 })
 
 // 检查并播放音频
@@ -136,7 +141,7 @@ const checkAndPlayAudio = () => {
 
 // 初始化视频
 const initVideo = () => {
-  document.addEventListener('WeixinJSBridgeReady',()=>{
+  document.addEventListener('WeixinJSBridgeReady', () => {
     videoElement.value && videoElement.value.play()
   })
   setTimeout(() => {
@@ -360,6 +365,7 @@ const navigateGamePage = async () => {
     if (globalStore.game_chances <= 0) {
       return weui.alert("还没有探索机会，快去参加活动吧")
     } else {
+      checkAndPlayAudio()
       gameSwiperShow.value = true;
     }
   }
@@ -386,7 +392,7 @@ const getUserLottery = async () => {
   const result = await Request("lottery", { pool: "all" }, "GET")
   if (result.res.status === 200) {
     prizelist.value = result.json.lottery_logs.length > 0 ? result.json.lottery_logs : []
-    if(prizelist.value.length===0){
+    if (prizelist.value.length === 0) {
       weui.alert("您还没有中奖")
     }
   }
@@ -453,7 +459,7 @@ const handleAddress = (id) => {
   addressShow.value = true
 }
 
-globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
+globalToastEvent.on(ToastType.SHOW_ADDRESS, (id) => {
   handleAddress(id)
 })
 
@@ -540,12 +546,12 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
       <PrizeList :show="prizeListShow" @close="prizeListShow = false" :prizelist="prizelist" @address="handleAddress">
       </PrizeList>
       <Address :show="addressShow" :prizeId="activePrizeId" @address-submit="handleAddressSubmitAfter"
-    @address-close="addressShow = false"></Address>
+        @address-close="addressShow = false"></Address>
     </div>
   </div>
 
   <Login :show="loginShow" @login-success="handleLoginSuccess" />
-  <GameSwiper v-model:show="gameSwiperShow"  @close="gameSwiperShow = false" />
+  <GameSwiper v-model:show="gameSwiperShow" @close="gameSwiperShow = false" />
   <Todolist :show="todolistShow" @close="todolistShow = false"></Todolist>
   <GamePage :show="gamePageShow" @close="gamePageShow = false" :gameSlideId="gameSlideId" />
   <GameDemo :show="gameDemoShow" @close="gameDemoShow = false" />
@@ -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;