hookehuyr

fix(音频播放器): 添加对更多音频格式的支持并修复播放结束检测

添加对acc、aac、wav和ogg格式的支持
增加pause事件监听器来检测音频是否播放结束,解决某些格式不触发ended事件的问题
1 <!-- 1 <!--
2 * @Date: 2025-04-07 12:35:35 2 * @Date: 2025-04-07 12:35:35
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-06-11 20:21:09 4 + * @LastEditTime: 2025-06-11 20:28:32
5 * @FilePath: /mlaj/src/components/ui/AudioPlayer.vue 5 * @FilePath: /mlaj/src/components/ui/AudioPlayer.vue
6 * @Description: 音频播放器组件,支持播放控制、进度条调节、音量控制、播放列表等功能 6 * @Description: 音频播放器组件,支持播放控制、进度条调节、音量控制、播放列表等功能
7 --> 7 -->
...@@ -173,6 +173,8 @@ const loadAudio = async () => { ...@@ -173,6 +173,8 @@ const loadAudio = async () => {
173 if (audio.value) { 173 if (audio.value) {
174 audio.value.removeEventListener('timeupdate', updateProgress) 174 audio.value.removeEventListener('timeupdate', updateProgress)
175 audio.value.removeEventListener('ended', handleEnded) 175 audio.value.removeEventListener('ended', handleEnded)
176 + // 确保移除所有可能的事件监听器
177 + audio.value.removeEventListener('pause', checkIfEnded)
176 } 178 }
177 179
178 // 检查歌曲URL是否存在 180 // 检查歌曲URL是否存在
...@@ -192,6 +194,9 @@ const loadAudio = async () => { ...@@ -192,6 +194,9 @@ const loadAudio = async () => {
192 audio.value.addEventListener('timeupdate', updateProgress) 194 audio.value.addEventListener('timeupdate', updateProgress)
193 audio.value.addEventListener('ended', handleEnded) 195 audio.value.addEventListener('ended', handleEnded)
194 196
197 + // 添加额外的检查,用于处理某些格式(如acc)可能不触发ended事件的情况
198 + audio.value.addEventListener('pause', checkIfEnded)
199 +
195 // 加载音频并等待可以流畅播放 200 // 加载音频并等待可以流畅播放
196 await audio.value?.load() 201 await audio.value?.load()
197 return new Promise((resolve) => { 202 return new Promise((resolve) => {
...@@ -212,6 +217,19 @@ const loadAudio = async () => { ...@@ -212,6 +217,19 @@ const loadAudio = async () => {
212 } 217 }
213 } 218 }
214 219
220 +// 检查音频是否已播放结束
221 +const checkIfEnded = () => {
222 + if (!audio.value) return
223 +
224 + // 如果当前播放时间接近总时长(允许0.5秒误差),则认为播放已结束
225 + if (audio.value.currentTime > 0 &&
226 + audio.value.duration > 0 &&
227 + Math.abs(audio.value.currentTime - audio.value.duration) < 0.5) {
228 + console.log('检测到音频播放结束 (通过时间检查)')
229 + handleEnded()
230 + }
231 +}
232 +
215 // 定义组件事件 233 // 定义组件事件
216 const emit = defineEmits(['play', 'pause']) 234 const emit = defineEmits(['play', 'pause'])
217 235
...@@ -394,6 +412,7 @@ onUnmounted(() => { ...@@ -394,6 +412,7 @@ onUnmounted(() => {
394 audio.value.pause(); 412 audio.value.pause();
395 audio.value.removeEventListener('timeupdate', updateProgress); 413 audio.value.removeEventListener('timeupdate', updateProgress);
396 audio.value.removeEventListener('ended', handleEnded); 414 audio.value.removeEventListener('ended', handleEnded);
415 + audio.value.removeEventListener('pause', checkIfEnded);
397 audio.value = null; 416 audio.value = null;
398 } 417 }
399 isPlaying.value = false; 418 isPlaying.value = false;
......
...@@ -672,6 +672,10 @@ const downloadFile = ({ title, url, meta_id }) => { ...@@ -672,6 +672,10 @@ const downloadFile = ({ title, url, meta_id }) => {
672 'rar': 'application/x-rar-compressed', 672 'rar': 'application/x-rar-compressed',
673 '7z': 'application/x-7z-compressed', 673 '7z': 'application/x-7z-compressed',
674 'mp3': 'audio/mpeg', 674 'mp3': 'audio/mpeg',
675 + 'acc': 'audio/aac', // 添加对 acc 格式的支持
676 + 'aac': 'audio/aac', // 添加对 aac 格式的支持
677 + 'wav': 'audio/wav', // 添加对 wav 格式的支持
678 + 'ogg': 'audio/ogg', // 添加对 ogg 格式的支持
675 'mp4': 'video/mp4', 679 'mp4': 'video/mp4',
676 'jpg': 'image/jpeg', 680 'jpg': 'image/jpeg',
677 'jpeg': 'image/jpeg', 681 'jpeg': 'image/jpeg',
......