hookehuyr

🐞 fix: 修复录音播放问题

...@@ -39,7 +39,7 @@ import { storeToRefs } from 'pinia' ...@@ -39,7 +39,7 @@ import { storeToRefs } from 'pinia'
39 import { mainStore } from '@/store'; 39 import { mainStore } from '@/store';
40 40
41 const store = mainStore(); 41 const store = mainStore();
42 -const { audio_status, audio_entity } = storeToRefs(store); 42 +const { audio_status, audio_entity, audio_list_status, audio_list_entity } = storeToRefs(store);
43 43
44 const props = defineProps({ 44 const props = defineProps({
45 height: Number, 45 height: Number,
...@@ -69,13 +69,14 @@ watch( ...@@ -69,13 +69,14 @@ watch(
69 info_height.value = v; 69 info_height.value = v;
70 } 70 }
71 ) 71 )
72 -// watch( 72 +watch(
73 -// () => props.status, 73 + () => props.status,
74 -// (v) => { 74 + (v) => {
75 -// if (v) { // 监听详情页播放状态,关闭浮层音频播放 75 + if (v) { // 监听详情页播放状态,关闭浮层音频播放
76 -// } 76 + console.warn(v);
77 -// } 77 + }
78 -// ) 78 + }
79 +)
79 80
80 const onClose = () => { // 关闭列表回调 81 const onClose = () => { // 关闭列表回调
81 audio.value.pause(); // 暂停音频播放 82 audio.value.pause(); // 暂停音频播放
...@@ -211,7 +212,7 @@ const handleAudioPlay = (item, index) => { ...@@ -211,7 +212,7 @@ const handleAudioPlay = (item, index) => {
211 if (audio_index.value !== index) { 212 if (audio_index.value !== index) {
212 audio.value.src = item.src; 213 audio.value.src = item.src;
213 } 214 }
214 - // 后台有播放器运行时,先暂停 215 + // 后台有播放器运行时,先暂停详情页播放器
215 if (audio_status.value === 'play'){ 216 if (audio_status.value === 'play'){
216 audio_entity.value.pause(); 217 audio_entity.value.pause();
217 } 218 }
...@@ -222,9 +223,9 @@ const handleAudioPlay = (item, index) => { ...@@ -222,9 +223,9 @@ const handleAudioPlay = (item, index) => {
222 play_status.then(() => { 223 play_status.then(() => {
223 item.play = true; 224 item.play = true;
224 // 存放到pinia里面控制 225 // 存放到pinia里面控制
225 - store.changeAudio(audio.value); 226 + store.changeAudioList(audio.value);
226 - store.changeAudioSrc(audio.value.src); 227 + store.changeAudioListSrc(audio.value.src);
227 - store.changeAudioStatus('play'); 228 + store.changeAudioListStatus('play');
228 // 229 //
229 startProgress(duration.value, index); // 开始更新进度 230 startProgress(duration.value, index); // 开始更新进度
230 if (audio_index.value !== index) { // 点击非同一音频 231 if (audio_index.value !== index) { // 点击非同一音频
...@@ -242,13 +243,13 @@ const handleAudioPlay = (item, index) => { ...@@ -242,13 +243,13 @@ const handleAudioPlay = (item, index) => {
242 const voicePause = () => { 243 const voicePause = () => {
243 audio.value.pause(); 244 audio.value.pause();
244 pauseProgress(); // 暂停进度更新 245 pauseProgress(); // 暂停进度更新
245 - store.changeAudioStatus('pause'); 246 + store.changeAudioListStatus('pause');
246 } 247 }
247 248
248 watch( 249 watch(
249 () => audio_status.value, 250 () => audio_status.value,
250 (v) => { 251 (v) => {
251 - if (v === 'pause') { 252 + if (v === 'play') {
252 voicePause(); 253 voicePause();
253 audio_list.value.forEach(item => item.play = false); 254 audio_list.value.forEach(item => item.play = false);
254 } 255 }
......
1 /* 1 /*
2 * @Date: 2022-04-18 15:59:42 2 * @Date: 2022-04-18 15:59:42
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-06-12 14:50:57 4 + * @LastEditTime: 2024-10-10 21:27:15
5 * @FilePath: /map-demo/src/store/index.js 5 * @FilePath: /map-demo/src/store/index.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -26,6 +26,9 @@ export const mainStore = defineStore('main', { ...@@ -26,6 +26,9 @@ export const mainStore = defineStore('main', {
26 audio_entity: '', 26 audio_entity: '',
27 audio_src: '', 27 audio_src: '',
28 audio_status: 'pause', 28 audio_status: 'pause',
29 + audio_list_entity: '',
30 + audio_list_src: '',
31 + audio_list_status: 'pause',
29 }; 32 };
30 }, 33 },
31 getters: { 34 getters: {
...@@ -79,6 +82,15 @@ export const mainStore = defineStore('main', { ...@@ -79,6 +82,15 @@ export const mainStore = defineStore('main', {
79 }, 82 },
80 changeAudioStatus (v) { 83 changeAudioStatus (v) {
81 this.audio_status = v; 84 this.audio_status = v;
85 + },
86 + changeAudioList (v) {
87 + this.audio_list_entity = v;
88 + },
89 + changeAudioListSrc (v) {
90 + this.audio_list_src = v
91 + },
92 + changeAudioListStatus (v) {
93 + this.audio_list_status = v;
82 } 94 }
83 }, 95 },
84 }); 96 });
......
1 <!-- 1 <!--
2 * @Date: 2024-09-15 22:08:49 2 * @Date: 2024-09-15 22:08:49
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-09 13:43:35 4 + * @LastEditTime: 2024-10-10 21:29:30
5 * @FilePath: /map-demo/src/views/bieyuan/info.vue 5 * @FilePath: /map-demo/src/views/bieyuan/info.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -97,7 +97,7 @@ import $ from 'jquery'; ...@@ -97,7 +97,7 @@ import $ from 'jquery';
97 import { mapAPI } from '@/api/map.js' 97 import { mapAPI } from '@/api/map.js'
98 98
99 const store = mainStore(); 99 const store = mainStore();
100 -const { audio_status, audio_entity } = storeToRefs(store); 100 +const { audio_status, audio_entity, audio_list_status, audio_list_entity } = storeToRefs(store);
101 101
102 const $route = useRoute(); 102 const $route = useRoute();
103 const $router = useRouter(); 103 const $router = useRouter();
...@@ -153,8 +153,8 @@ const playAudio = (item, index) => { ...@@ -153,8 +153,8 @@ const playAudio = (item, index) => {
153 page_details.value.experience_audio.forEach(item => item.play = false); 153 page_details.value.experience_audio.forEach(item => item.play = false);
154 audio.value.src = item.src; 154 audio.value.src = item.src;
155 // 后台有播放器运行时,先暂停 155 // 后台有播放器运行时,先暂停
156 - if (audio_status.value === 'play'){ 156 + if (audio_list_status.value === 'play'){
157 - audio_entity.value.pause(); 157 + audio_list_entity.value.pause();
158 } 158 }
159 play_audio_index.value = index; 159 play_audio_index.value = index;
160 let play_status = audio.value.play() // 播放 160 let play_status = audio.value.play() // 播放
......