Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b75b8777 1 parent 1e278c10

测试音频功能

Expand all
Inline Side-by-side
Showing 6 changed files with 65 additions and 14 deletions
<!--
* @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: 文件描述
-->
......
/*
* @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: '详情页',
},
......
<!--
* @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
})
......
This diff is collapsed. Click to expand it.
<!--
* @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: {
......
<!--
* @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: 公众地图主体页面
-->
......