feates

src/App.vue

@@ -8,10 +8,12 @@
   import { amapInit } from '@/utils/amap'
 
   const [, setMapReady] = useModel('map');
+  const { setAudio, onEnded } = useModel('audio');
 
   const loading = ref(true);
   const percent = ref(0);
   const resources = ref([]);
+  const audioRef = ref();
 
   amapInit().then(() => setMapReady(true));
 
@@ -23,15 +25,23 @@
     preload(updateCallback).then((res) => {
       loading.value = false;
       resources.value = res.filter(x => !x.hidden);
-    })
+    });
+
+    setAudio(audioRef.value);
   });
 </script>
 
 <template>
+  <audio class="cache-audio" src="" ref="audioRef" @ended="onEnded"></audio>
   <Loader :loading="loading" :percent="percent" />
   <ScrollDown />
   <Image v-for="res in resources" :key="res.image" :resource="res"></Image>
 </template>
 
-<style lang="less" scoped>
+<style lang="less">
+.cache-audio {
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+}
 </style>

src/components/CoverBtn.vue

@@ -37,7 +37,7 @@ import { computed, ref } from 'vue';
 <style lang="less" scoped>
 .cover-btn {
   position: absolute;
-  background: rgba(255, 0, 0, 0.5);
+  // background: rgba(255, 0, 0, 0.5);
   z-index: 10;
 }
 </style>

src/components/InfoBox.vue

@@ -5,8 +5,8 @@
       <div class="head">
         <div>{{ resource.name }}</div>
         <div>
-          <span @click="onClickAudio">
-            <i class="iconfont icon-playcircle" v-if="!playing"></i>
+          <span @click="toggle(resource.audio)">
+            <i class="iconfont icon-playcircle" v-if="!currentPlaying"></i>
             <i class="iconfont icon-pausecircle" v-else></i>
           </span>
           <span @click="onClickLoc"><i class="iconfont icon-map"></i></span>            
@@ -14,15 +14,15 @@
       </div>
       <div class="body">{{ resource.desc }}</div>  
     </div>
-    <AudioVue :audio="resource.audio" ref="audioRef" @play="playing = true" @stop="playing = false" />
+    
+    <audio class="cache-audio" :src="resource.audio" preload="auto"></audio>
   </OverLay>
 </template>
 
 <script setup>
-  import { ref, watch } from 'vue';
+  import { ref, watch, computed } from 'vue';
+  import { useModel } from "@zjxpcyc/vue-tiny-store";
   import OverLay from './OverLay.vue';
-  import AudioVue from './Audio.vue';
-
   
   const props = defineProps({
     visible: Boolean,
@@ -36,15 +36,9 @@
   const emit = defineEmits(['close']);
 
   const audioRef = ref();
-  const playing = ref(false);
+  const { playing, audioSrc, toggle, stopCheck } = useModel('audio');
+  const currentPlaying = computed(() => audioSrc.value === props.resource.audio && playing.value);
 
-  const onClickAudio = () => audioRef.value.toggle();
-  const stopAudio = () => {
-    if (playing.value) {
-      audioRef.value.toggle();
-      playing.value = false;
-    }
-  }
   const onClickLoc = () => {
     if (wx) {
       wx.openLocation({
@@ -60,7 +54,7 @@
 
   watch(() => props.visible, (val) => {
     if (val) {
-      stopAudio();
+      stopCheck(props.resource.audio);
     }
   })
   

src/components/OverLay.vue

@@ -60,7 +60,6 @@
     overflow: hidden;
     z-index: 2000;
     opacity: 1;
-    will-change: opacity;
     transition: opacity .1s ease-out;
 
     &.hidden {

src/components/ScenicAudio.vue

@@ -3,10 +3,10 @@
     :center="center"
     :width="width"
     :height="height"
-    @click="onPlayBtn"
+    @click="toggle(audio)"
   >
     <AudioPlaying :style="iconStyle" />
-    <AudioVue :audio="audio" ref="audioRef" @play="onPlay" @stop="onStop" />
+    <audio class="cache-audio" :src="audio" preload="auto"></audio>
   </CoverBtn>
   <div v-if="showGesture" class="gesture" :class="{ hidden: gestureHide }" :style="gestureStyle">
     <i class="iconfont icon-cc-pointer-right"></i>
@@ -15,9 +15,9 @@
 
 <script setup>
   import { computed, watch, ref } from 'vue';
+  import { useModel } from "@zjxpcyc/vue-tiny-store";
   import CoverBtn from "./CoverBtn.vue";
   import AudioPlaying from "./AudioPlaying.vue";
-  import AudioVue from './Audio.vue';
 
   const props = defineProps({
     center: Array,
@@ -28,16 +28,14 @@
     },
   });
 
+  const { playing, audioSrc, toggle } = useModel('audio');
   const width = ref(64);
   const height = ref(64);
   const audioRef = ref();
-  const playState = ref(0);
   const gestureHide = ref(false);
+  const iconStyle = ref({ opacity: 0 });
+  const currentPlaying = computed(() => audioSrc.value === props.audio && playing.value);
   
-  const iconStyle = computed(() => ({
-    opacity: playState.value,
-  }));
-
   const gestureStyle = computed(() => {
     if (props.center && props.center.length > 1) {
       return {
@@ -49,19 +47,15 @@
     }
   });
 
-  const onPlay = () => {
-    playState.value = 1;
-    gestureHide.value = true;
-  }
+  watch(currentPlaying, (val) => {
+    if (val) {
+      iconStyle.value = { opacity: 1 };
+      gestureHide.value = true;
+    } else {
+      iconStyle.value = { opacity: 0 };
+    }
+  });
 
-  const onStop = () => {
-    playState.value = 0;
-  }
-  
-  // 点击播放
-  const onPlayBtn = () => {
-    audioRef.value.toggle();
-  };
 </script>
 
 <style lang="less" scoped>

src/store/index.js

@@ -2,16 +2,72 @@ import { ref } from 'vue';
 import createStore from '@zjxpcyc/vue-tiny-store';
 
 const useAudio = () => {
-  const current = ref()
+  const audioRef = ref();
+  const audioSrc = ref();
+  const playing = ref(false);
+  
+  const setAudio = audio => audioRef.value = audio;
+  const isCurrent = src => audioSrc.value === src;
+
+  const play = (src) => {
+    if (audioRef.value) {
+      if (!isCurrent(src)) {
+        if (playing.value) {
+          playing.value = false;
+          stop();
+        }
+
+        audioSrc.value = src;
+        audioRef.value.src = src;
+      }
+
+      if (playing.value) return;
 
-  const changeAudio = (aduRef) => {
-    current.value = aduRef;
+      audioRef.value.play();
+      playing.value = true;
+    }
   }
 
-  return [
-    current,
-    changeAudio,
-  ]
+  const stop = () => {
+    if (audioRef.value) {
+      audioRef.value.pause();
+      playing.value = false;
+    }
+  }
+
+  const toggle = (src) => {
+    if (isCurrent(src)) {
+      if (playing.value) {
+        stop();
+      } else {
+        play(src);
+      }
+    } else {
+      play(src);
+    }
+  }
+
+  const stopCheck = src => {
+    if (!isCurrent(src) && playing.value) {
+      stop();
+    }
+  }
+
+  const onEnded = () => {
+    playing.value = false;
+  }
+
+  return {
+    setAudio,
+    playing,
+    audioSrc,
+    isCurrent,
+    play,
+    stop,
+    toggle,
+    stopCheck,
+    onEnded,
+  }
 };
 
 const useMap = () => {

src/style.css

@@ -28,4 +28,4 @@ img {
 }
 .amap-copyright {
   opacity:0;
-}
+}