Vue3音乐播放器切换曲目后单曲循环功能异常求助

核心问题分析 #

你遇到的问题主要来自两个关键点：

1. 事件监听器绑定不规范：每次点击循环按钮都添加新的匿名ended事件监听器，移除时用null无法正确清理，导致切换歌曲后事件逻辑混乱。
2. 状态未随歌曲切换重置：切换歌曲时isRepeatOn保持true，但新歌曲的事件逻辑未正确衔接，同时字符串格式的时间比较存在潜在误差。

分步解决方案 #

1. 重构循环事件逻辑，规范监听器的添加与移除 #

把ended事件的处理函数抽成独立变量，确保添加和移除时使用同一个函数引用，避免重复绑定：

// 定义独立的结束事件处理函数
const handleTrackEnded = () => {
  if (isRepeatOn.value) {
    audio.value.currentTime = 0;
    audio.value.play();
  } else {
    useSong.nextSong(currentTrack.value);
  }
}

const loopCurrentTrack = () => {
  isRepeatOn.value = !isRepeatOn.value;
  // 先移除旧监听器，避免重复绑定
  audio.value.removeEventListener("ended", handleTrackEnded);
  // 根据当前状态决定是否添加新监听器
  if (isRepeatOn.value) {
    audio.value.addEventListener("ended", handleTrackEnded);
  }
}

同时可以移除原来监听isTrackTimeCurrent的watch，因为切歌逻辑已经整合到handleTrackEnded中。

2. 监听歌曲切换，重置循环状态并清理事件 #

添加对currentTrack的监听，切换歌曲时自动重置循环状态，并清理旧的事件监听器：

watch(currentTrack, () => {
  // 重置循环状态
  isRepeatOn.value = false;
  // 移除旧的ended事件监听器
  audio.value.removeEventListener("ended", handleTrackEnded);
  // 重新初始化时间显示
  setTimeout(() => {
    const duration = audio.value.duration;
    const minutes = Math.floor(duration / 60);
    const seconds = Math.floor(duration % 60);
    isTrackTimeTotal.value = `${minutes}:${seconds.toString().padStart(2, '0')}`;
  }, 300);
});

3. 优化时间更新逻辑，避免字符串比较误差 #

合并重复的时间计算逻辑，确保时间格式统一，同时避免重复绑定timeupdate事件：

const updateTrackTime = () => {
  const current = audio.value.currentTime;
  const duration = audio.value.duration;
  
  const currentMinutes = Math.floor(current / 60);
  const currentSeconds = Math.floor(current - currentMinutes * 60);
  isTrackTimeCurrent.value = `${currentMinutes}:${currentSeconds.toString().padStart(2, '0')}`;
  
  const totalMinutes = Math.floor(duration / 60);
  const totalSeconds = Math.floor(duration % 60);
  isTrackTimeTotal.value = `${totalMinutes}:${totalSeconds.toString().padStart(2, '0')}`;
  
  trackTime.value = isTrackTimeCurrent.value;
  const value = (100 / duration) * current;
  range.value = value;
  seeker.value.value = value;
}

const timeupdate = () => {
  // 先移除旧监听器，防止重复绑定
  audio.value.removeEventListener("timeupdate", updateTrackTime);
  audio.value.addEventListener("timeupdate", updateTrackTime);
}

const loadmetadata = () => {
  audio.value.addEventListener('loadedmetadata', updateTrackTime);
}

4. 整合后的关键代码片段 #

const useSong = useSongStore()
const { isPlaying, audio, currentTrack, trackTime, isTrackTimeTotal, currentVolume} = storeToRefs(useSong)

// ... 其他变量定义 ...
let isRepeatOn = ref(false)
const handleTrackEnded = () => {
  if (isRepeatOn.value) {
    audio.value.currentTime = 0;
    audio.value.play();
  } else {
    useSong.nextSong(currentTrack.value);
  }
}

const loopCurrentTrack = () => {
  isRepeatOn.value = !isRepeatOn.value;
  audio.value.removeEventListener("ended", handleTrackEnded);
  if (isRepeatOn.value) {
    audio.value.addEventListener("ended", handleTrackEnded);
  }
}

// ... 时间更新相关函数 ...

// 监听歌曲切换
watch(currentTrack, () => {
  isRepeatOn.value = false;
  audio.value.removeEventListener("ended", handleTrackEnded);
  setTimeout(updateTrackTime, 300);
})

watch(() => audio.value, () => {
  timeupdate()
  loadmetadata()
})

onMounted(() => {
  if (audio.value) {
    setTimeout(() => {
      updateTrackTime();
      timeupdate();
      loadmetadata();
    }, 300)
  }
  // ... 原有进度条相关事件绑定逻辑 ...
})

额外说明 #

• 切换歌曲时重置isRepeatOn符合主流音乐播放器的交互逻辑，用户切换歌曲通常意味着要退出当前单曲循环状态。
• 每次添加事件监听器前先移除旧的，彻底避免多次绑定导致的逻辑冲突。
• 移除冗余的时间监听watch，减少不必要的状态触发。

内容的提问来源于stack exchange，提问作者jeanpegg