fix(音频播放器): 添加对更多音频格式的支持并修复播放结束检测
添加对acc、aac、wav和ogg格式的支持 增加pause事件监听器来检测音频是否播放结束,解决某些格式不触发ended事件的问题
Showing
2 changed files
with
24 additions
and
1 deletions
| 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', | ... | ... |
-
Please register or login to post a comment