hookehuyr

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

添加对acc、aac、wav和ogg格式的支持
增加pause事件监听器来检测音频是否播放结束,解决某些格式不触发ended事件的问题
<!--
* @Date: 2025-04-07 12:35:35
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-11 20:21:09
* @LastEditTime: 2025-06-11 20:28:32
* @FilePath: /mlaj/src/components/ui/AudioPlayer.vue
* @Description: 音频播放器组件,支持播放控制、进度条调节、音量控制、播放列表等功能
-->
......@@ -173,6 +173,8 @@ const loadAudio = async () => {
if (audio.value) {
audio.value.removeEventListener('timeupdate', updateProgress)
audio.value.removeEventListener('ended', handleEnded)
// 确保移除所有可能的事件监听器
audio.value.removeEventListener('pause', checkIfEnded)
}
// 检查歌曲URL是否存在
......@@ -192,6 +194,9 @@ const loadAudio = async () => {
audio.value.addEventListener('timeupdate', updateProgress)
audio.value.addEventListener('ended', handleEnded)
// 添加额外的检查,用于处理某些格式(如acc)可能不触发ended事件的情况
audio.value.addEventListener('pause', checkIfEnded)
// 加载音频并等待可以流畅播放
await audio.value?.load()
return new Promise((resolve) => {
......@@ -212,6 +217,19 @@ const loadAudio = async () => {
}
}
// 检查音频是否已播放结束
const checkIfEnded = () => {
if (!audio.value) return
// 如果当前播放时间接近总时长(允许0.5秒误差),则认为播放已结束
if (audio.value.currentTime > 0 &&
audio.value.duration > 0 &&
Math.abs(audio.value.currentTime - audio.value.duration) < 0.5) {
console.log('检测到音频播放结束 (通过时间检查)')
handleEnded()
}
}
// 定义组件事件
const emit = defineEmits(['play', 'pause'])
......@@ -394,6 +412,7 @@ onUnmounted(() => {
audio.value.pause();
audio.value.removeEventListener('timeupdate', updateProgress);
audio.value.removeEventListener('ended', handleEnded);
audio.value.removeEventListener('pause', checkIfEnded);
audio.value = null;
}
isPlaying.value = false;
......
......@@ -672,6 +672,10 @@ const downloadFile = ({ title, url, meta_id }) => {
'rar': 'application/x-rar-compressed',
'7z': 'application/x-7z-compressed',
'mp3': 'audio/mpeg',
'acc': 'audio/aac', // 添加对 acc 格式的支持
'aac': 'audio/aac', // 添加对 aac 格式的支持
'wav': 'audio/wav', // 添加对 wav 格式的支持
'ogg': 'audio/ogg', // 添加对 ogg 格式的支持
'mp4': 'video/mp4',
'jpg': 'image/jpeg',
'jpeg': 'image/jpeg',
......