测试音频功能

hookehuyr
Commit b75b8777a6d5c8fad5370fa0e49a5be6fb30e123 b75b8777 1 parent 1e278c10
Showing 6 changed files with 65 additions and 14 deletions
src/components/audioBackground.vue
src/route.js
src/views/bieyuan/info.vue
src/views/bieyuan/info_w.vue
src/views/bieyuan/map.vue
src/views/index.vue
--- a/src/components/audioBackground.vue
View file @b75b877
+++ b/src/components/audioBackground.vue
View file @b75b877
 <!--
  * @Date: 2023-06-12 11:23:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-06-12 14:51:13
+ * @LastEditTime: 2024-09-20 17:40:03
  * @FilePath: /map-demo/src/components/audioBackground.vue
  * @Description: 文件描述
 -->
--- a/src/route.js
View file @b75b877
+++ b/src/route.js
View file @b75b877
 /*
  * @Date: 2023-05-29 11:10:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-18 09:38:42
+ * @LastEditTime: 2024-09-20 17:29:12
  * @FilePath: /map-demo/src/route.js
  * @Description: 文件描述
  */
@@ -64,7 +64,7 @@ export default [
   },
   {
     path: '/bieyuan/info',
-    component: () => import('@/views/bieyuan/info.vue'),
+    component: () => import('@/views/bieyuan/info_w.vue'),
     meta: {
       title: '详情页',
     },
--- a/src/views/bieyuan/info.vue
View file @b75b877
+++ b/src/views/bieyuan/info.vue
View file @b75b877
 <!--
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-20 15:56:20
+ * @LastEditTime: 2024-09-20 17:35:46
  * @FilePath: /map-demo/src/views/bieyuan/info.vue
  * @Description: 文件描述
 -->
@@ -73,14 +73,14 @@
               </div>
               <div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
             </div>
-            <div class="audio-wrapper">
+            <!--<div class="audio-wrapper">
               <div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
                 <div>{{ item.text }}</div>
-                <!-- <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div> -->
+                <!~~ <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div> ~~>
                 <van-icon @click="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" />
                 <van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" />
               </div>
-            </div>
+            </div>-->
             <div style="padding: 0 1rem;">
               <img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
             </div>
@@ -100,9 +100,15 @@
 </template>
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { mainStore } from '@/store';
+
+const store = mainStore();
+const { audio_status } = storeToRefs(store);
+
 const $route = useRoute();
 const $router = useRouter();
@@ -121,15 +127,15 @@ const play_audio_index = ref(null);
 const audioList = ref([{
   text: '5分钟观呼吸',
-  src: 'https://cdn.ipadbiz.cn/bieyuan/map/1130958712.mp3',
+  src: 'https://cdn.ipadbiz.cn/bieyuan/map/audio/%E6%AD%A3%E5%BF%B5%E5%91%BC%E5%90%B8%EF%BC%8810%E5%88%86%E9%92%9F%EF%BC%89.mp3',
   play: false,
 }, {
   text: '10分钟正念静坐',
-  src: 'https://cdn.ipadbiz.cn/bieyuan/map/1130958712.mp3',
+  src: 'https://cdn.ipadbiz.cn/bieyuan/map/audio/%E5%8D%81%E5%88%86%E9%92%9F%E6%AD%A3%E5%BF%B5%E9%9D%99%E5%9D%9020210510.mp3',
   play: false,
 }, {
   text: '15分钟正念静坐',
-  src: 'https://cdn.ipadbiz.cn/bieyuan/map/1130958712.mp3',
+  src: 'https://cdn.ipadbiz.cn/bieyuan/map/audio/%E5%8D%81%E5%88%86%E9%92%9F%E6%AD%A3%E5%BF%B5%E9%9D%99%E5%9D%9020210510.mp3',
   play: false,
 }])
@@ -143,6 +149,9 @@ const playAudio = (item, index) => {
     play_status.then(() => {
       console.warn('success');
       item.play = true;
+      // 存放到pinia里面控制
+      store.changeAudioSrc(audio.value.src);
+      store.changeAudioStatus('play');
     }).catch((e) => {
       // 失败
       console.log('Operation is too fast, audio play fails')
@@ -157,6 +166,19 @@ const stopAudio = (item, index) => {
 const audio = ref(new Audio());
+onMounted(() => {
+  // 存放到pinia里面控制
+  if (store.changeAudio(audio.value)){
+    store.changeAudio(audio.value);
+    store.changeAudioStatus('pause');
+  }
+})
+
+// onUnmounted(() => {
+//   audio.value.pause();
+//   store.changeAudioStatus('pause');
+// })
+
 const audio_play = (src, index) => {
   audio.value.src = src;
 }
@@ -183,6 +205,22 @@ const goTo = () => { // 打开标记地图显示
   }
 }
+const voicePause = () => {
+  audio.value.pause();
+  store.changeAudioStatus('pause');
+}
+
+watch(
+  () => audio_status.value,
+  (v) => {
+    if (v === 'pause') {
+      voicePause();
+      audioList.value.forEach(item => item.play = false);
+    }
+  },
+  { immediate: true }
+);
+
 defineExpose({
   outerStopAudio
 })
--- a/src/views/bieyuan/info_w.vue 0 → 100644
View file @b75b877
+++ b/src/views/bieyuan/info_w.vue 0 → 100644
View file @b75b877
--- a/src/views/bieyuan/map.vue
View file @b75b877
+++ b/src/views/bieyuan/map.vue
View file @b75b877
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-20 16:14:21
+ * @LastEditTime: 2024-09-20 17:45:35
  * @FilePath: /map-demo/src/views/bieyuan/map.vue
  * @Description: 公众地图主体页面
 -->
@@ -56,6 +56,8 @@
     <van-dialog v-model:show="dialog_show" title="温馨提示">
       <div style="padding: 1rem; text-align: center;">{{ dialog_text }}</div>
     </van-dialog>
+
+    <!-- <audioBackground></audioBackground> -->
   </div>
 </template>
@@ -70,6 +72,9 @@ import { useRect } from '@vant/use';
 import { mapAPI } from '@/api/map.js'
 import wx from 'weixin-js-sdk'
 import pageInfo from '@/views/bieyuan/info.vue'
+import audioBackground from '@/components/audioBackground'
+import { mapState, mapActions } from 'pinia'
+import { mainStore } from '@/store'
 const GPS = {
   PI: 3.14159265358979324,
@@ -128,7 +133,7 @@ const GPS = {
 };
 export default {
-  components: { pageInfo },
+  components: { pageInfo, audioBackground },
   data() {
     return {
       map: '',
@@ -257,7 +262,11 @@ export default {
     //   deep: true        // 如果 query 是嵌套对象，可以设置 deep 监听深层变化
     // }
   },
+  computed: {
+    ...mapState(mainStore, ['audio_entity', 'audio_src', 'audio_status'])
+  },
   methods: {
+    ...mapActions(mainStore, ['changeAudio', 'changeAudioSrc', 'changeAudioStatus']),
     initMap() {
       // 初始化地图
       this.map = new AMap.Map('container', {
@@ -609,6 +618,10 @@ export default {
         // // 浮动面板样式
         // $('.van-floating-panel__content').css('borderRadius', '0');
         // this.showClose = true;
+        // 清空设置
+        // this.changeAudio('');
+        // this.changeAudioStatus('pause');
+        //
         this.$router.push({
           path: '/bieyuan/info',
           query: {
--- a/src/views/index.vue
View file @b75b877
+++ b/src/views/index.vue
View file @b75b877
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-12 16:28:53
+ * @LastEditTime: 2024-09-20 16:30:49
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 公众地图主体页面
 -->