Fix URL

package.json

@@ -10,10 +10,12 @@
   },
   "dependencies": {
     "@icon-park/vue-next": "^1.4.2",
+    "aplayer": "^1.10.1",
     "axios": "^1.1.3",
     "element-plus": "^2.2.18",
     "pinia": "^2.0.23",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue3-aplayer": "^1.7.3"
   },
   "devDependencies": {
     "@vicons/fa": "^0.12.0",

src/App.vue

@@ -35,6 +35,7 @@ onMounted(() => {
   // 加载完成事件
   window.addEventListener("load", () => {
     console.log("加载完成");
+    console.clear();
     // 去除加载标记
     document.getElementsByTagName("body")[0].className = "";
     // 给加载动画添加结束标记

src/components/APlayerDom/Beta.vue

@@ -0,0 +1,275 @@
+<template>
+  <aplayer
+    showLrc
+    ref="player"
+    v-if="playList[0]"
+    :music="playList[playIndex]"
+    :list="playList"
+    :autoplay="autoplay"
+    :theme="theme"
+    :repeat="repeat"
+    :shuffle="shuffle"
+    :listMaxHeight="listMaxHeight"
+    :listFolded="listFolded"
+    @play="onPlay"
+    @pause="onPause"
+    @timeupdate="onTimeUp"
+  />
+</template>
+
+<script setup>
+import { MusicOne, PlayWrong } from "@icon-park/vue-next";
+import aplayer from "vue3-aplayer";
+import {
+  h,
+  ref,
+  reactive,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+} from "vue";
+import { getPlayerList } from "@/api";
+import { mainStore } from "@/store";
+const store = mainStore();
+
+// 获取播放器DOM
+const player = ref(null);
+
+// 歌曲播放列表
+let playList = ref([]);
+let playerLrc = ref("");
+
+// 歌曲播放项
+let playIndex = ref(0);
+let playListCount = ref(0);
+
+// 配置项
+const props = defineProps({
+  // 音频自动播放
+  autoplay: {
+    type: Boolean,
+    default: false,
+  },
+  // 主题色
+  theme: {
+    type: String,
+    default: "#efefef",
+  },
+  // 音频循环播放
+  repeat: {
+    type: String,
+    default: "list", //'list' | 'music' | 'none'
+  },
+  // 随机播放
+  shuffle: {
+    type: Boolean,
+    default: true,
+  },
+  // 默认音量
+  volume: {
+    type: Number,
+    default: 0.7,
+    validator: (value) => {
+      return value >= 0 && value <= 1;
+    },
+  },
+  // 歌曲服务器 ( netease-网易云, tencent-qq音乐, kugou-酷狗, xiami-小米音乐, baidu-百度音乐 )
+  songServer: {
+    type: String,
+    default: "netease", //'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'
+  },
+  // 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
+  songType: {
+    type: String,
+    default: "playlist",
+  },
+  // id
+  songId: {
+    type: String,
+    default: "7452421335",
+  },
+  // 列表是否默认折叠
+  listFolded: {
+    type: Boolean,
+    default: false,
+  },
+  // 列表最大高度
+  listMaxHeight: {
+    type: String,
+    default: "420px",
+  },
+});
+
+// 初始化播放器
+onMounted(() => {
+  nextTick(() => {
+    getPlayerList(props.songServer, props.songType, props.songId)
+      .then((res) => {
+        // 生成歌单信息
+        playIndex.value = Math.floor(Math.random() * res.length);
+        playListCount.value = res.length - 1;
+        // 更改播放器加载状态
+        store.musicIsOk = true;
+        console.log("音乐加载完成");
+        // 生成歌单
+        res.forEach((v) => {
+          playList.value.push({
+            title: v.name,
+            artist: v.artist,
+            src: v.url,
+            pic: v.pic,
+            lrc: v.lrc,
+          });
+        });
+      })
+      .catch(() => {
+        ElMessage({
+          message: "播放器加载失败",
+          grouping: true,
+          icon: h(PlayWrong, {
+            theme: "filled",
+            fill: "#efefef",
+          }),
+        });
+      });
+  });
+});
+
+// 播放暂停事件
+const onPlay = () => {
+  console.log("播放");
+  // 播放状态
+  store.setPlayerState(player.value.audio.paused);
+  // 储存播放器信息
+  store.setPlayerData(
+    player.value.currentMusic.title,
+    player.value.currentMusic.artist
+  );
+  ElMessage({
+    message: store.getPlayerData.name + " - " + store.getPlayerData.artist,
+    grouping: true,
+    icon: h(MusicOne, {
+      theme: "filled",
+      fill: "#efefef",
+    }),
+  });
+};
+const onPause = () => {
+  store.setPlayerState(player.value.audio.paused);
+};
+
+// 音频时间更新事件
+const onTimeUp = () => {
+  let playerRef = player.value.$.vnode.el;
+  playerLrc.value = playerRef.getElementsByClassName(
+    "aplayer-lrc-current"
+  )[0].innerHTML;
+};
+
+// 切换播放暂停事件
+const playToggle = () => {
+  player.value.toggle();
+};
+
+// 切换音量事件
+const changeVolume = (value) => {
+  player.value.audio.volume = value;
+};
+
+// 切换上下曲
+const changeSong = (type) => {
+  if (type) {
+    console.log("下一曲");
+    playIndex.value < playListCount.value
+      ? playIndex.value++
+      : (playIndex.value = 0);
+  } else {
+    console.log("上一曲");
+    console.log(playIndex.value);
+    playIndex.value > 0
+      ? playIndex.value--
+      : (playIndex.value = playListCount.value);
+  }
+  console.log(playList.value[playIndex.value]);
+  nextTick(() => {
+    player.value.play();
+  });
+};
+
+// 暴露子组件方法
+defineExpose({ playToggle, changeVolume, changeSong });
+
+// 监听歌词变化
+watch(
+  () => playerLrc.value,
+  (value) => {
+    console.log(value);
+    // 储存至 pinia
+    store.setPlayerLrc(value);
+  }
+);
+</script>
+
+<style lang='scss' scoped>
+.aplayer {
+  width: 80%;
+  background: transparent;
+  border-radius: 6px;
+  :deep(.aplayer-body) {
+    .aplayer-pic {
+      display: none;
+    }
+    .aplayer-info {
+      margin-left: 0;
+      background-color: #ffffff40;
+      border-color: transparent;
+      .aplayer-title {
+        font-size: 16px;
+      }
+      .aplayer-author {
+        color: #efefef;
+      }
+      .aplayer-lrc {
+        text-align: left;
+        margin: 4px 0 0 6px;
+        height: 38px;
+        &::before,
+        &::after {
+          display: none;
+        }
+        p {
+          color: #efefef;
+        }
+        .aplayer-lrc-current {
+          font-size: 0.95rem;
+          margin-bottom: 4px !important;
+        }
+      }
+      .aplayer-controller {
+        display: none;
+      }
+    }
+  }
+  :deep(.aplayer-list) {
+    margin-top: 6px;
+    ol {
+      li {
+        border-color: transparent;
+        &.aplayer-list-light {
+          background: #ffffff40;
+          border-radius: 6px;
+        }
+        &:hover {
+          background: #ffffff26 !important;
+          border-radius: 6px !important;
+        }
+        .aplayer-list-index,
+        .aplayer-list-author {
+          color: #efefef;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/APlayerDom/index.vue

@@ -4,8 +4,8 @@
 
 <script setup>
 import { MusicOne, PlayWrong } from "@icon-park/vue-next";
-import "@/utils/Aplayer/APlayer.min.js";
-import "@/utils/Aplayer/APlayer.min.css";
+import APlayer from "APlayer";
+import "APlayer/dist/APlayer.min.css";
 import {
   h,
   ref,

src/components/Music/index.vue

@@ -92,7 +92,7 @@
             fill="#ffffff60"
             @click="musicListShow = false"
           />
-          <AplayerDom
+          <APlayerDom
             :songServer="playerData.server"
             :songType="playerData.type"
             :songId="playerData.id"
@@ -116,7 +116,7 @@ import {
   VolumeSmall,
   VolumeNotice,
 } from "@icon-park/vue-next";
-import AplayerDom from "@/components/AplayerDom/index.vue";
+import APlayerDom from "@/components/APlayerDom/index.vue";
 import { mainStore } from "@/store";
 const store = mainStore();