hookehuyr

fix(音频播放器): 修复音频播放时meta_id传递问题

修正音频播放器组件中meta_id的传递逻辑,确保在播放事件中正确传递当前音频的meta_id。移除不再需要的getId方法,并在音频列表初始化时添加meta_id字段。
<!--
* @Date: 2025-04-07 12:35:35
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-11 11:58:22
* @LastEditTime: 2025-06-11 20:21:09
* @FilePath: /mlaj/src/components/ui/AudioPlayer.vue
* @Description: 音频播放器组件,支持播放控制、进度条调节、音量控制、播放列表等功能
-->
......@@ -145,6 +145,7 @@ const progress = ref(0) // 播放进度
const volume = ref(100) // 音量值
const isPlaylistVisible = ref(false) // 播放列表显示状态
const speed = ref(1.0) // 播放速度
const meta_id = ref(null) // 音频meta_id
// 计算属性
const currentSong = computed(() => props.songs[currentIndex.value]) // 当前播放的歌曲
......@@ -185,6 +186,7 @@ const loadAudio = async () => {
audio.value = new Audio(currentSong.value.url)
audio.value.volume = volume.value / 100
audio.value.playbackRate = speed.value
meta_id.value = currentSong.value.meta_id
// 添加事件监听
audio.value.addEventListener('timeupdate', updateProgress)
......@@ -241,7 +243,7 @@ const togglePlay = async () => {
if (audio.value) {
try {
await audio.value.play()
emit('play', audio.value)
emit('play', audio.value, meta_id.value)
} catch (playError) {
console.error('播放失败:', playError)
return
......@@ -295,7 +297,7 @@ const prevSong = async () => {
audio.value.volume = normalizedVolume
isPlaying.value = true
// 发射播放事件
emit('play', audio.value)
emit('play', audio.value, meta_id.value)
} catch (playError) {
console.error('播放上一首歌曲失败:', playError)
isPlaying.value = false
......@@ -335,7 +337,7 @@ const nextSong = async () => {
audio.value.volume = normalizedVolume
isPlaying.value = true
// 发射播放事件
emit('play', audio.value)
emit('play', audio.value, meta_id.value)
} catch (playError) {
console.error('播放下一首歌曲失败:', playError)
isPlaying.value = false
......@@ -384,7 +386,7 @@ watch(() => props.songs, () => {
console.warn('歌曲列表变化', props.songs);
currentIndex.value = 0
loadAudio()
}, { deep: true })
}, { deep: true, immediate: true })
// 组件卸载时清理事件监听
onUnmounted(() => {
......@@ -429,7 +431,7 @@ const selectSong = async (index) => {
await audio.value.play()
isPlaying.value = true
// 发射播放事件
emit('play', audio.value)
emit('play', audio.value, meta_id.value)
// 关闭播放列表
isPlaylistVisible.value = false
// 滚动到当前播放的音频
......@@ -481,9 +483,6 @@ defineExpose({
isPlaying: () => isPlaying.value,
id: props.id,
getPlayer: () => audio.value,
getId() {
return currentSong.value.meta_id || 'meta_id'
}
})
</script>
......
......@@ -370,6 +370,7 @@ const handleLessonClick = async (lesson) => {
// 更新音频列表数据
if (data.course_type === 'audio' && data.file?.list?.length) {
audioList.value = data.file.list.map(item => ({
meta_id: item.meta_id,
title: item.title || '未命名音频',
artist: '',
url: item.url,
......@@ -713,10 +714,10 @@ const downloadFile = ({ title, url, meta_id }) => {
* 音频播放事件
* @param audio 音频对象
*/
const onAudioPlay = (audio) => {
const onAudioPlay = (audio, meta_id) => {
console.log('开始播放音频', audio);
// 学习时长埋点开始
startAction();
startAction({meta_id});
}
/**
......@@ -787,10 +788,10 @@ const startAction = (item) => {
// 更新当前播放位置(如果是音频播放)
if (audioPlayerRef.value && audioPlayerRef.value.getPlayer()) {
audioPosition.value = audioPlayerRef.value.getPlayer().currentTime;
console.log('音频总时长:', audioDuration.value, '当前位置:', audioPosition.value, 'id:', audioPlayerRef.value.getId());
console.log('音频总时长:', audioDuration.value, '当前位置:', audioPosition.value, 'id:', item?.meta_id);
paramsObj = {
schedule_id: courseId.value,
meta_id: audioPlayerRef.value.getId(),
meta_id: item?.meta_id,
media_duration: audioDuration.value,
playback_position: audioPosition.value,
playback_id: uuid,
......