添加背景音乐

src/components/menu.vue

@@ -8,8 +8,18 @@
     </ul>
 
     <ul class="b-right" >
-      <li class="br-li" @click="emit('onClickMenuItem', item)" v-for="item in rmenu" :key="item.id">
-        <img :src="item.img" alt="">
+      <li
+        class="br-li"
+        @click="emit('onClickMenuItem', rmenu[0])"
+      >
+        <img :src="bgAudioStatus ? rmenu[0].imgOn : rmenu[0].imgOff" alt="" draggable="false">
+      </li>
+      <li
+        class="br-li"
+        @click="emit('onClickMenuItem', item)"
+        v-for="item in rmenu.slice(1)" :key="item.id"
+      >
+        <img :src="item.img" alt="" draggable="false">
       </li>
     </ul>
   </div>
@@ -20,13 +30,19 @@ import { shallowReactive } from "vue"
 
 const props = defineProps({
   list: Array,
-  currentTimeIdx:Number
+  currentTimeIdx:Number,
+  bgAudioStatus: Boolean,
 })
 
 
 const emit = defineEmits(['onClickTimeItem','onClickMenuItem'])
 
 const rmenu = shallowReactive([{
+  name: '背景音乐',
+  imgOn: utils.getImageUrl(`icon_music_on.png`),
+  imgOff: utils.getImageUrl(`icon_music_off.png`),
+  id: 'bgAudio'
+}, {
   name: '帮助',
   img: utils.getImageUrl(`icon_tip.png`),
   id: 'tip'
@@ -118,10 +134,9 @@ const rmenu = shallowReactive([{
     display: flex;
     width: 20%;
     position: relative;
-    justify-content: center;
+    justify-content: space-evenly;
 
     .br-li {
-      margin: 0 1rem;
       cursor: pointer;
       width: 2rem;
       >img {

src/views/LongImage.vue

@@ -1,7 +1,25 @@
 <template>
-  <div class="long-image" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp"
-    @mouseleave="onMouseLeave" @touchstart.passive="onTouchStart" @touchmove.prevent="onTouchMove" @touchend="onTouchEnd"
-    @touchcancel="onTouchCancel" @wheel.passive="onWheel">
+  <div
+    class="long-image"
+    @mousedown="onMouseDown"
+    @mousemove="onMouseMove"
+    @mouseup="onMouseUp"
+    @mouseleave="onMouseLeave"
+    @touchstart.passive="onTouchStart"
+    @touchmove.prevent="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchCancel"
+    @wheel.passive="onWheel"
+  >
+    <audio
+      ref="bgAudio$"
+      loop
+      autoplay
+      :src="bgAudio"
+      @play="bgAudioStatus = true"
+      @pause="bgAudioStatus = false"
+    />
+
     <div ref="longref$">
       <component :is="timeItem.component" v-for="(timeItem, index) in timeList"
         :info="{ ...timeItem.info, id: timeItem.id }" :style="{
@@ -12,8 +30,13 @@
     <Interaction ref="interaction$" :currentTimeIdx="currentTimeIdx" :list="timeList" />
 
 
-    <Vmenu :currentTimeIdx="currentTimeIdx" @onClickMenuItem="onClickMenuItem" @onClickTimeItem="onClickTimeItem"
-      :list="timeList" />
+    <Vmenu
+      :currentTimeIdx="currentTimeIdx"
+      @onClickMenuItem="onClickMenuItem"
+      @onClickTimeItem="onClickTimeItem"
+      :list="timeList"
+      :bgAudioStatus="bgAudioStatus"
+    />
 
 
     <teleport to="body">
@@ -93,6 +116,20 @@ const longref$ = ref(null)
 const video$ = ref(null)
 const interaction$ = ref(null)
 
+// 背景音乐相关
+const bgAudio = utils.getAudioUrl('bg.mp3')
+const bgAudio$ = ref(null)
+onMounted(() => {
+  bgAudio$.value.volume = 0.3
+})
+const bgAudioStatus = ref(false)
+function switchBgAudio() {
+  if (bgAudio$.value.paused) {
+    bgAudio$.value.play()
+  } else {
+    bgAudio$.value.pause()
+  }
+}
 
 // 动画帧相关
 const lastAnimationTimeStamp = ref(0);
@@ -116,16 +153,6 @@ const isLongImageVideo = ref(true)
 const isNeedToBofang = ref(true)
 const isShowSkip = ref(false)
 
-// 热点视频相关
-const isShowVideoHotspotDetail = ref(false);
-const videoHotspotUrl = ref('');
-
-// 时辰菜单显隐。为了兼容移动端，只好用js代替css。
-const isShowTimeList = ref(false);
-const timeBgAudioForSafari = ref(null);
-let firstIn = true
-
-
 const onVideoCanPlayThrough = () => {
   video$.value && video$.value.play()
 }
@@ -137,6 +164,7 @@ const onSkipClick = () => {
   }, 100);
 }
 
+let firstIn = true
 const onCloseGuide = () => {
   isShowGuide.value = false
   if (firstIn) {
@@ -185,8 +213,9 @@ const onClickTimeItem = (index) => {
 }
 
 const onClickMenuItem = (item) => {
-  console.log('result:', item);
-  if (item.id === 'search') {
+  if (item.id === 'bgAudio') {
+    switchBgAudio()
+  } else if (item.id === 'search') {
     isShowDir.value = true
   } else if (item.id === 'tip') {
     isShowGuide.value = true