feat(播放器): 实现音视频互斥播放功能并优化默认封面

在VideoPlayer和AudioPlayer组件中添加互斥播放逻辑，当播放视频时自动暂停音频，反之亦然为音频播放器添加默认封面图片更新所有测试图片和音频资源URL为正式CDN地址添加组件卸载时的清理逻辑

feat(播放器): 实现音视频互斥播放功能并优化默认封面
在VideoPlayer和AudioPlayer组件中添加互斥播放逻辑，当播放视频时自动暂停音频，反之亦然为音频播放器添加默认封面图片更新所有测试图片和音频资源URL为正式CDN地址添加组件卸载时的清理逻辑
hookehuyr
Commit b325a09e9649b07a8750d1af31de41690010c5b4 b325a09e 1 parent 79c30100
Showing 3 changed files with 220 additions and 38 deletions
src/components/ui/AudioPlayer.vue
src/components/ui/VideoPlayer.vue
src/views/checkin/IndexCheckInPage.vue
--- a/src/components/ui/AudioPlayer.vue
View file @b325a09
+++ b/src/components/ui/AudioPlayer.vue
View file @b325a09
 <!--
  * @Date: 2025-04-07 12:35:35
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-05-16 16:50:23
+ * @LastEditTime: 2025-05-30 15:26:15
  * @FilePath: /mlaj/src/components/ui/AudioPlayer.vue
  * @Description: 音频播放器组件，支持播放控制、进度条调节、音量控制、播放列表等功能
 -->
@@ -12,7 +12,7 @@
     <div class="flex flex-col items-center mb-4">
       <!-- 歌曲封面 -->
       <div class="w-24 h-24 rounded-lg overflow-hidden mb-2">
-        <img :src="currentSong?.cover" alt="封面" class="w-full h-full object-cover">
+        <img :src="currentSong?.cover ? currentSong?.cover : 'https://cdn.ipadbiz.cn/mlaj/images/audio_d_cover.jpg'" alt="封面" class="w-full h-full object-cover">
       </div>
       <!-- 歌曲信息 -->
@@ -21,7 +21,7 @@
         <p class="text-xs text-gray-500">{{ currentSong?.artist }}</p>
       </div>
-      </div>
+    </div>
       <!-- 进度条与时间：显示当前播放时间、总时长和可拖动的进度条 -->
       <div class="mt-4 mb-6">
@@ -105,7 +105,7 @@
         >
           <div class="absolute top-0 left-0 right-0 h-[1px] bg-gray-200"></div>
           <div class="w-16 h-16 rounded-lg overflow-hidden mr-4 flex-shrink-0">
-            <img :src="song?.cover" alt="封面" class="w-full h-full object-cover">
+            <img :src="song?.cover ? song?.cover : 'https://cdn.ipadbiz.cn/mlaj/images/audio_d_cover.jpg'" alt="封面" class="w-full h-full object-cover">
           </div>
           <div class="flex-1">
             <div class="font-medium">{{ song?.title }}</div>
@@ -177,6 +177,9 @@ const loadAudio = async () => {
   }
 }
+// 定义组件事件
+const emit = defineEmits(['play', 'pause'])
+
 // 播放控制：切换播放/暂停状态
 const togglePlay = async () => {
   if (isLoading.value) return
@@ -186,8 +189,10 @@ const togglePlay = async () => {
     }
     if (isPlaying.value) {
       await audio.value?.pause()
+      emit('pause', audio.value)
     } else {
       await audio.value?.play()
+      emit('play', audio.value)
     }
     isPlaying.value = !isPlaying.value
   } catch (error) {
@@ -195,6 +200,19 @@ const togglePlay = async () => {
   }
 }
+// 暴露给父组件的方法
+defineExpose({
+  togglePlay,
+  pause: () => {
+    if (isPlaying.value && audio.value) {
+      audio.value.pause();
+      isPlaying.value = false;
+      emit('pause', audio.value);
+    }
+  },
+  isPlaying: () => isPlaying.value
+})
+
 // 进度更新
 const updateProgress = () => {
   if (!audio.value) return
@@ -223,6 +241,8 @@ const prevSong = async () => {
     const normalizedVolume = Math.pow(volume.value / 100, 2)
     audio.value.volume = normalizedVolume
     isPlaying.value = true
+    // 发射播放事件
+    emit('play', audio.value)
   }
 }
@@ -241,6 +261,8 @@ const nextSong = async () => {
     const normalizedVolume = Math.pow(volume.value / 100, 2)
     audio.value.volume = normalizedVolume
     isPlaying.value = true
+    // 发射播放事件
+    emit('play', audio.value)
   }
 }
@@ -312,6 +334,8 @@ const selectSong = async (index) => {
   if (audio.value) {
     await audio.value.play()
     isPlaying.value = true
+    // 发射播放事件
+    emit('play', audio.value)
     // 关闭播放列表
     isPlaylistVisible.value = false
     // 滚动到当前播放的音频
--- a/src/components/ui/VideoPlayer.vue
View file @b325a09
+++ b/src/components/ui/VideoPlayer.vue
View file @b325a09
@@ -119,12 +119,12 @@ onBeforeUnmount(() => {
 defineExpose({
   pause() {
     if (player.value) {
-      player.value.pause();
+      player.value?.pause();
     }
   },
   play() {
     if (player.value) {
-      player.value.play();
+      player.value?.play();
     }
   },
 });
--- a/src/views/checkin/IndexCheckInPage.vue
View file @b325a09
+++ b/src/views/checkin/IndexCheckInPage.vue
View file @b325a09
 <!--
  * @Date: 2025-05-29 15:34:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-05-30 15:11:36
+ * @LastEditTime: 2025-05-30 15:54:33
  * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
  * @Description: 文件描述
 -->
@@ -38,7 +38,7 @@
           <van-progress :percentage="progress2" color="#4caf50" :show-pivot="false" />
         </div>
         <div style="padding: 0.75rem 1rem;">
-          <van-image round width="2.8rem" height="2.8rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+          <van-image round width="2.8rem" height="2.8rem" src="https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg"
             v-for="(item, index) in teamAvatars" :key="index"
             :style="{ marginLeft: index > 0 ? '-0.5rem' : '', border: '2px solid #FFF' }" />
         </div>
@@ -86,7 +86,7 @@
               <!-- 视频封面和播放按钮 -->
               <div v-if="post.video && !post.isPlaying" class="relative w-full rounded-lg overflow-hidden"
                 style="aspect-ratio: 16/9;">
-                <img :src="post.videoCover || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
+                <img :src="post.videoCover || 'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg'"
                   :alt="post.content" class="w-full h-full object-cover" />
                 <div class="absolute inset-0 flex items-center justify-center cursor-pointer bg-black/20"
                   @click="startPlay(post)">
@@ -98,9 +98,31 @@
               </div>
               <!-- 视频播放器 -->
               <VideoPlayer v-if="post.video && post.isPlaying" :video-url="post.video"
-                class="post-video rounded-lg overflow-hidden" ref="(el) => { if(el) videoPlayers.value.push(el) }"
+                class="post-video rounded-lg overflow-hidden"
-                @onPlay="(player) => handleVideoPlay(player, post)" @onPause="() => handleVideoPause(post)" />
+                :ref="el => {
-              <AudioPlayer v-if="post.audio.length" :songs="post.audio" class="post-audio" />
+                  if(el) {
+                    // 确保不重复添加
+                    if (!videoPlayers?.includes(el)) {
+                      videoPlayers?.push(el);
+                    }
+                  }
+                }"
+                @onPlay="(player) => handleVideoPlay(player, post)"
+                @onPause="() => handleVideoPause(post)" />
+              <AudioPlayer
+                v-if="post.audio.length"
+                :songs="post.audio"
+                class="post-audio"
+                :ref="el => {
+                  if(el) {
+                    // 确保不重复添加
+                    if (!audioPlayers?.includes(el)) {
+                      audioPlayers?.push(el);
+                    }
+                  }
+                }"
+                @play="(player) => handleAudioPlay(player, post)"
+              />
             </div>
           </div>
           <div class="post-footer">
@@ -116,7 +138,7 @@
 </template>
 <script setup>
-import { ref } from 'vue'
+import { ref, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import AppLayout from "@/components/layout/AppLayout.vue";
 import FrostedGlass from "@/components/ui/FrostedGlass.vue";
@@ -126,17 +148,43 @@ import AudioPlayer from "@/components/ui/AudioPlayer.vue";
 // 存储所有视频播放器的引用
 const videoPlayers = ref([]);
+// 存储所有音频播放器的引用
+const audioPlayers = ref([]);
+
+// 组件卸载前清理播放器引用
+onBeforeUnmount(() => {
+  // 停止所有视频和音频播放
+  if (videoPlayers.value) {
+    videoPlayers.value.forEach(player => {
+      if (player && typeof player.pause === 'function') {
+        player.pause();
+      }
+    });
+  }
+
+  stopAllAudio();
+
+  // 清空引用数组
+  if (videoPlayers.value) videoPlayers.value = [];
+  if (audioPlayers.value) audioPlayers.value = [];
+
+});
+
+
 /**
  * 开始播放指定帖子的视频
  * @param {Object} post - 要播放视频的帖子对象
  */
 const startPlay = (post) => {
-  // 先暂停所有其他视频
+  // 确保mockPosts.value是一个数组
-  mockPosts.value.forEach(p => {
+  if (mockPosts.value) {
-    if (p.id !== post.id) {
+    // 先暂停所有其他视频
-      p.isPlaying = false;
+    mockPosts.value.forEach(p => {
-    }
+      if (p.id !== post.id) {
-  });
+        p.isPlaying = false;
+      }
+    });
+  }
   // 设置当前视频为播放状态
   post.isPlaying = true;
@@ -167,12 +215,15 @@ const handleVideoPause = (post) => {
  * @param {Object} currentPost - 当前播放的帖子对象
  */
 const stopOtherVideos = (currentPlayer, currentPost) => {
-  // 暂停其他视频播放器
+  // 确保videoPlayers.value是一个数组
-  videoPlayers.value.forEach(player => {
+  if (videoPlayers.value) {
-    if (player !== currentPlayer && player.pause) {
+    // 暂停其他视频播放器
-      player.pause();
+    videoPlayers.value.forEach(player => {
-    }
+      if (player !== currentPlayer && player.pause) {
-  });
+        player.pause();
+      }
+    });
+  }
   // 更新其他帖子的播放状态
   mockPosts.value.forEach(post => {
@@ -180,6 +231,91 @@ const stopOtherVideos = (currentPlayer, currentPost) => {
       post.isPlaying = false;
     }
   });
+
+  // 同时暂停所有音频播放器
+  stopAllAudio();
+};
+
+/**
+ * 处理音频播放事件
+ * @param {Object} player - 音频播放器实例
+ * @param {Object} post - 包含音频的帖子对象
+ */
+const handleAudioPlay = (player, post) => {
+  // 停止其他音频播放
+  stopOtherAudio(player, post);
+
+  // 同时暂停所有视频
+  if (videoPlayers.value) {
+    videoPlayers.value.forEach(videoPlayer => {
+      if (videoPlayer.pause) {
+        videoPlayer.pause();
+      }
+    });
+  }
+
+  // 更新所有视频的播放状态为false
+  mockPosts.value.forEach(p => {
+    p.isPlaying = false;
+  });
+};
+
+/**
+ * 停止除当前播放器外的所有其他音频
+ * @param {Object} currentPlayer - 当前播放的音频播放器实例
+ * @param {Object} currentPost - 当前播放的帖子对象
+ */
+const stopOtherAudio = (currentPlayer, currentPost) => {
+  // 确保audioPlayers.value是一个数组
+  if (!audioPlayers.value) return;
+
+  // 暂停其他音频播放器
+  audioPlayers.value.forEach(player => {
+    // 只处理不是当前播放器的实例
+    if (player !== currentPlayer) {
+      // 使用组件暴露的pause方法
+      if (typeof player.pause === 'function') {
+        player.pause();
+      }
+      // 如果没有pause方法，尝试使用togglePlay方法
+      else if (typeof player.togglePlay === 'function' && player.isPlaying && player.isPlaying()) {
+        player.togglePlay();
+      }
+      // 最后尝试直接操作DOM
+      else if (player.$el && player.$el.querySelector('audio')) {
+        const audioElement = player.$el.querySelector('audio');
+        if (audioElement) {
+          audioElement.pause();
+        }
+      }
+    }
+  });
+};
+
+/**
+ * 停止所有音频播放
+ */
+const stopAllAudio = () => {
+  // 确保audioPlayers.value是一个数组
+  if (!audioPlayers.value) return;
+
+  audioPlayers.value.forEach(player => {
+    // 使用组件暴露的pause方法
+    if (typeof player.pause === 'function') {
+      player.pause();
+    }
+    // 如果没有pause方法，尝试使用togglePlay方法
+    else if (typeof player.togglePlay === 'function' && player.isPlaying && player.isPlaying()) {
+      player.togglePlay();
+    }
+    // 最后尝试直接操作DOM
+    else if (player.$el && player.$el.querySelector('audio')) {
+      const audioElement = player.$el.querySelector('audio');
+      if (audioElement) {
+        audioElement.pause();
+      }
+    }
+  });
 };
 // Mock数据
@@ -187,8 +323,8 @@ const mockPosts = ref([
   {
     id: 1,
     user: {
-      name: '小林',
+      name: '图片预览',
-      avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+      avatar: 'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
       time: '2小时前'
     },
     content: '今天完成了React基础课程的学习，收获满满！',
@@ -208,13 +344,13 @@ const mockPosts = ref([
     id: 2,
     user: {
       name: '小林',
-      avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+      avatar: 'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
       time: '2小时前'
     },
     content: '今天完成了React基础课程的学习，收获满满！',
     images: [],
     video: 'https://cdn.ipadbiz.cn/space/lk3DmvLO02dUC2zPiFwiClDe3nKL.mp4',
-    videoCover: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+    videoCover: 'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
     isPlaying: false,
     audio: [],
     likes: 12
@@ -223,7 +359,7 @@ const mockPosts = ref([
     id: 3,
     user: {
       name: '小林',
-      avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+      avatar: 'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
       time: '2小时前'
     },
     content: '今天完成了React基础课程的学习，收获满满！',
@@ -235,8 +371,8 @@ const mockPosts = ref([
       {
         title: '学习心得分享',
         artist: '小林',
-        url: 'https://example.com/audio.mp3',
+        url: 'https://cdn.ipadbiz.cn/space/816560/双手合十迎客来_Fs2W-5mnQSFL8S5CDsHho-_xcvaY.mp3',
-        cover: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
+        cover: 'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg'
       }
     ],
     likes: 12
@@ -245,17 +381,39 @@ const mockPosts = ref([
     id: 4,
     user: {
       name: '小林',
-      avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+      avatar: 'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
       time: '2小时前'
     },
     content: '今天完成了React基础课程的学习，收获满满！',
     images: [],
     video: 'https://cdn.ipadbiz.cn/space/lk3DmvLO02dUC2zPiFwiClDe3nKL.mp4',
-    videoCover: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+    videoCover: 'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
     isPlaying: false,
     audio: [],
     likes: 12
   },
+  {
+    id: 5,
+    user: {
+      name: '小林',
+      avatar: 'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
+      time: '2小时前'
+    },
+    content: '今天完成了React基础课程的学习，收获满满！',
+    images: [],
+    video: '',
+    videoCover: '',
+    isPlaying: false,
+    audio: [
+      {
+        title: '学习心得分享',
+        artist: '小林',
+        url: 'https://cdn.ipadbiz.cn/space/816560/双手合十迎客来_Fs2W-5mnQSFL8S5CDsHho-_xcvaY.mp3',
+        cover: 'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg'
+      }
+    ],
+    likes: 12
+  },
 ]);
 const themeVars = {
@@ -266,10 +424,10 @@ const progress1 = ref(50);
 const progress2 = ref(76);
 const teamAvatars = ref([
-  'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+  'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
-  'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+  'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
-  'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+  'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
-  'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
+  'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg'
 ])
 // 图片预览相关