feat: 新增加载音乐失败的处理方法

src/components/Player.vue

@@ -16,6 +16,7 @@
     @pause="onPause"
     @timeupdate="onTimeUp"
     @onSelectSong="onSelectSong"
+    @error="loadMusicError"
   />
 </template>
 
@@ -37,6 +38,8 @@ const playList = ref([]);
 const playIndex = ref(0);
 const playListCount = ref(0);
 
+const skipTimeout = ref(null);
+
 // 配置项
 const props = defineProps({
   // 音频自动播放
@@ -202,8 +205,39 @@ const changeSong = (type) => {
   });
 };
 
+// 加载音频错误
+const loadMusicError = () => {
+  let notice = "";
+  if (playList.value.length > 1) {
+    notice = "播放音频出现错误，播放器将在 2s 后进行跳转";
+    // 播放下一首
+    skipTimeout.value = setTimeout(() => {
+      changeSong(1);
+      if (!player.value.audio.paused) {
+        onPlay();
+      }
+    }, 2000);
+  } else {
+    notice = "播放音频出现错误";
+  }
+  ElMessage({
+    message: notice,
+    grouping: true,
+    icon: h(PlayWrong, {
+      theme: "filled",
+      fill: "#EFEFEF",
+      duration: 2000,
+    }),
+  });
+  console.error("播放音乐: " + player.value.currentMusic.title + " 出现错误");
+};
+
 // 暴露子组件方法
 defineExpose({ playToggle, changeVolume, changeSong });
+
+onBeforeUnmount(() => {
+  clearTimeout(skipTimeout.value);
+});
 </script>
 
 <style lang="scss" scoped>