hookehuyr

🐞 fix: 修复录音播放问题

......@@ -39,7 +39,7 @@ import { storeToRefs } from 'pinia'
import { mainStore } from '@/store';
const store = mainStore();
const { audio_status, audio_entity } = storeToRefs(store);
const { audio_status, audio_entity, audio_list_status, audio_list_entity } = storeToRefs(store);
const props = defineProps({
height: Number,
......@@ -69,13 +69,14 @@ watch(
info_height.value = v;
}
)
// watch(
// () => props.status,
// (v) => {
// if (v) { // 监听详情页播放状态,关闭浮层音频播放
// }
// }
// )
watch(
() => props.status,
(v) => {
if (v) { // 监听详情页播放状态,关闭浮层音频播放
console.warn(v);
}
}
)
const onClose = () => { // 关闭列表回调
audio.value.pause(); // 暂停音频播放
......@@ -211,7 +212,7 @@ const handleAudioPlay = (item, index) => {
if (audio_index.value !== index) {
audio.value.src = item.src;
}
// 后台有播放器运行时,先暂停
// 后台有播放器运行时,先暂停详情页播放器
if (audio_status.value === 'play'){
audio_entity.value.pause();
}
......@@ -222,9 +223,9 @@ const handleAudioPlay = (item, index) => {
play_status.then(() => {
item.play = true;
// 存放到pinia里面控制
store.changeAudio(audio.value);
store.changeAudioSrc(audio.value.src);
store.changeAudioStatus('play');
store.changeAudioList(audio.value);
store.changeAudioListSrc(audio.value.src);
store.changeAudioListStatus('play');
//
startProgress(duration.value, index); // 开始更新进度
if (audio_index.value !== index) { // 点击非同一音频
......@@ -242,13 +243,13 @@ const handleAudioPlay = (item, index) => {
const voicePause = () => {
audio.value.pause();
pauseProgress(); // 暂停进度更新
store.changeAudioStatus('pause');
store.changeAudioListStatus('pause');
}
watch(
() => audio_status.value,
(v) => {
if (v === 'pause') {
if (v === 'play') {
voicePause();
audio_list.value.forEach(item => item.play = false);
}
......
/*
* @Date: 2022-04-18 15:59:42
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-06-12 14:50:57
* @LastEditTime: 2024-10-10 21:27:15
* @FilePath: /map-demo/src/store/index.js
* @Description: 文件描述
*/
......@@ -26,6 +26,9 @@ export const mainStore = defineStore('main', {
audio_entity: '',
audio_src: '',
audio_status: 'pause',
audio_list_entity: '',
audio_list_src: '',
audio_list_status: 'pause',
};
},
getters: {
......@@ -79,6 +82,15 @@ export const mainStore = defineStore('main', {
},
changeAudioStatus (v) {
this.audio_status = v;
},
changeAudioList (v) {
this.audio_list_entity = v;
},
changeAudioListSrc (v) {
this.audio_list_src = v
},
changeAudioListStatus (v) {
this.audio_list_status = v;
}
},
});
......
<!--
* @Date: 2024-09-15 22:08:49
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-09 13:43:35
* @LastEditTime: 2024-10-10 21:29:30
* @FilePath: /map-demo/src/views/bieyuan/info.vue
* @Description: 文件描述
-->
......@@ -97,7 +97,7 @@ import $ from 'jquery';
import { mapAPI } from '@/api/map.js'
const store = mainStore();
const { audio_status, audio_entity } = storeToRefs(store);
const { audio_status, audio_entity, audio_list_status, audio_list_entity } = storeToRefs(store);
const $route = useRoute();
const $router = useRouter();
......@@ -153,8 +153,8 @@ const playAudio = (item, index) => {
page_details.value.experience_audio.forEach(item => item.play = false);
audio.value.src = item.src;
// 后台有播放器运行时,先暂停
if (audio_status.value === 'play'){
audio_entity.value.pause();
if (audio_list_status.value === 'play'){
audio_list_entity.value.pause();
}
play_audio_index.value = index;
let play_status = audio.value.play() // 播放
......