已发生产环境

src/components/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="IndexPage">
+  <div class="IndexPage" @click.once="playMusic">
     <div class="index-title">
       <div class="title-flower"></div>
     </div>
@@ -51,17 +51,20 @@
     <div class="click-tips" v-if="locationId == 0"></div>
     <div class="tips-text" v-if="locationId == 0"></div>
 
+    <!-- 背景音乐 -->
+    <div class="music_icon" @click="musicIconPlay">
+      <audio style="display: none; height: 0" id="bg-music" autoplay="autoplay" preload="auto" :src="bgm"
+        loop="loop"></audio>
+    </div>
   </div>
   <div class="video-popup" @touchmove.prevent>
     <div class="video-box">
       <video class="plyr" id="player" controls>
         <source src="https://cdn.plyr.io/static/our-video.mp4" type="video/mp4">
-        <!-- 你可以根据需要添加多个source标签，支持不同的视频格式 -->
       </video>
     </div>
     <div class="cls-btn" @click="hideVideo"></div>
   </div>
-  <!-- <Line /> -->
 </template>
 
 <script setup>
@@ -70,10 +73,9 @@ import Plyr from 'plyr';
 import 'plyr/dist/plyr.css'; // 导入 Plyr 样式
 import ImageFramePlayer from 'image-frame-player';
 import { showSuccessToast } from "vant";
-import Line from './Line.vue';
 import { gsap } from 'gsap'
 import { MotionPathPlugin } from 'gsap/MotionPathPlugin'
-
+import { isAndriod } from "@/plugins"
 gsap.registerPlugin(MotionPathPlugin)
 
 
@@ -91,6 +93,10 @@ const xflIconRef = ref(null)
 const currentProgress = ref(0)  // 当前进度百分比
 const debounce = ref(true)
 let animation = null
+const firstClick = ref(true)
+const isCloseMusic = ref(false)
+
+const bgm = new URL(`../assets/media/bgm.mp3`, import.meta.url).href
 
 // 视频库
 const videoList = [
@@ -107,6 +113,7 @@ const frameList = Array.from({ length: 35 }, (_, index) => {
 });
 
 onMounted(() => {
+  iosMusic()
   initSvgAnimation()
   animationFn();
   // palyFrame()
@@ -117,7 +124,7 @@ onMounted(() => {
       fallback: true, // 启用全屏回退
       iosNative: true, // 在 iOS 上启用原生全屏
     },
-    autoplay: true, // 自动播放
+    autoplay: false, // 自动播放
     mute: false,    // 初始不静音
     loop: {        // 循环播放
       active: false
@@ -126,36 +133,24 @@ onMounted(() => {
 
 })
 
-// 帧图初始化
-// const palyFrame = () => {
-//   imageFramePlayer.value = new ImageFramePlayer({
-//     dom: document.getElementById("frameBox"),
-//     imgArr: frameList,
-//     fps: 25,
-//     useCanvas: true,
-//     loop: -1,
-//     yoyo: true
-//   });
-//   imageFramePlayer.value.play();
-// };
-
-
 
 // 播放事件
 const playFn = (index) => {
-
+  if (firstClick.value) return
   if (debounce.value) return
   debounce.value = true
   if (locationId.value == 0) {
+
+    if(!isCloseMusic.value) pauseMusic()
     gsap.set('.xfl-icon', { autoAlpha: 1 })
   }
   if (locationId.value !== index) {
     // 计算相差多少步
     const setpNum = Math.abs(index - locationId.value)
     const direction = index - locationId.value > 0 ? 1 : -1
-    console.log('setpNum', setpNum);
-
     locationId.value = index;
+    
+    if(!isCloseMusic.value) pauseMusic()
     playerRef.value.source = {
       type: 'video',
       sources: [
@@ -165,23 +160,35 @@ const playFn = (index) => {
         }
       ]
     };
+    playerRef.value.pause();
+    console.log('playerRef.value', playerRef.value);
+
+
     handleMove(progressArr[index - 1], setpNum, direction)
   } else {
     locationId.value = index
-    playerRef.value.source = {
-      type: 'video',
-      sources: [
-        {
-          src: videoList[locationId.value - 1],
-          type: 'video/mp4'
-        }
-      ]
-    };
+
     gsap.to(".video-popup", {
       autoAlpha: 1,
       duration: 0.3,
       onComplete: () => {
         debounce.value = false
+        playerRef.value.source = {
+          type: 'video',
+          sources: [
+            {
+              src: videoList[locationId.value - 1],
+              type: 'video/mp4'
+            }
+          ]
+        };
+
+        playerRef.value.play()
+      },
+      onStart: () => {
+        pauseMusic()
+
+
       }
     });
 
@@ -189,15 +196,17 @@ const playFn = (index) => {
 
 }
 
-
-
 // 关闭弹窗
 const hideVideo = () => {
   // playerRef.value.fullscreen.enter();
   playerRef.value.stop();
   gsap.to(".video-popup", {
     autoAlpha: 0,
-    duration: 0.5
+    duration: 0.5, onComplete: () => {
+      
+      if(!isCloseMusic.value) musicPlay()
+    
+    }
   });
 
   if (isDone.value && !isShowDone.value) {
@@ -205,9 +214,6 @@ const hideVideo = () => {
     isShowDone.value = true
   }
 }
-
-
-
 // 新增：坐标转换方法
 const convertCoordinates = (point) => {
   const svg = document.querySelector('.path-svg')
@@ -300,19 +306,28 @@ const handleMove = (percent, setpNum,) => {
       console.log(`当前进度: ${currentProgress.value}%`)
       // 标记已经去过的地点
       isMarkList.value[locationId.value - 1] = true
+
+
       gsap.to(".video-popup", {
         autoAlpha: 1,
         duration: 0.3,
+        onStart: () => {
+
+        },
         onComplete: () => {
           debounce.value = false
+          setTimeout(() => {
+            playerRef.value.play()
+            console.log('ssddd');
+
+          }, 500);
+
         }
       });
     }
   })
 }
 
-
-
 // 入场动画
 const animationFn = () => {
   const tl = gsap.timeline({
@@ -454,6 +469,74 @@ const animationFn = () => {
 
 }
 
+
+
+// ios端音乐自动播放
+const musicBtnAni = gsap.timeline();
+const playStatu = ref(true);
+const musicPlay = () => {
+  let audio = document.getElementById("bg-music");
+  musicBtnAni.play();
+  audio.play();  
+};
+
+const musicIconPlay = () => {
+  let audio = document.getElementById("bg-music");
+  musicBtnAni.play();
+  audio.play();
+  if (playStatu.value == true) {
+    musicBtnAni.pause();
+    audio.pause();
+    playStatu.value = false;
+    console.log("暂停");
+    isCloseMusic.value = true
+  } else {
+    musicBtnAni.play();
+    audio.play();
+    playStatu.value = true;
+    console.log("播放");
+    isCloseMusic.value = false
+
+  }
+};
+
+// 暂停
+const pauseMusic = () => {
+
+  let audio = document.getElementById("bg-music");
+  audio.pause();
+  musicBtnAni.pause();
+}
+
+const iosMusic = () => {
+  // ios自动播放音乐
+  var audio = document.getElementById("bg-music");
+  audio.play();
+  document.addEventListener(
+    "WeixinJSBridgeReady",
+    function () {
+
+      WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
+        audio.play();
+      });
+    },
+    false
+  );
+
+  musicBtnAni.fromTo(
+    ".music_icon",
+    { rotation: "0" },
+    { rotation: "+=360", repeat: -1, duration: 7, ease: "none" }
+  );
+  musicBtnAni.play();
+};
+const playMusic = () => {
+
+  var audio = document.getElementById("bg-music");
+  audio.play();
+  firstClick.value = false
+};
+
 </script>
 
 
@@ -464,6 +547,12 @@ const animationFn = () => {
   overflow: hidden;
   position: relative;
 
+  .music_icon {
+    @include pos(50px, 50px, 73px, 100px);
+    @include bgSrc("index/music.png");
+
+  }
+
   .index-title {
     @include bgSrc("index/title.png");
     @include pos(602px, 372px, 74px, -10px);