歌手链接

src/views/common/SongCtrl.vue

@@ -16,7 +16,7 @@ const { settings } = store.state;
 const audioEl = ref("");
 const playing = ref(false);
 let currentTime = 0;
-let lastPause = Date.now()
+let lastPause = Date.now();
 
 onMounted(() => {
   audioEl.value.addEventListener("play", onPlay);
@@ -55,13 +55,17 @@ const play = async (id, im = true) => {
   console.log(id);
   await getSongUrl(id)
     .then((res) => {
-      audioEl.value.src = res.data.data[0].url;
-      store.commit("saveSettings", {
-        songId: id,
-      });
-      if (im) {
-        audioEl.value.play();
-        playing.value = true;
+      if (null !== res.data.data[0].url) {
+        audioEl.value.src = res.data.data[0].url;
+        store.commit("saveSettings", {
+          songId: id,
+        });
+        pubsub.publish('zp.getSongInfo', {id})
+
+        if (im) {
+          audioEl.value.play();
+          playing.value = true;
+        }
       }
     })
     .catch((err) => {
@@ -78,8 +82,8 @@ const resume = async () => {
   if (audioEl.value.readyState) {
     //如果暂停过了5分钟，需要再次载入歌曲
     // console.log(Date.now() - lastPause);
-    if((Date.now() - lastPause) > 1000 * 60 * 5){ 
-      console.log('暂停过了5分钟，再次载入歌曲');
+    if (Date.now() - lastPause > 1000 * 60 * 5) {
+      console.log("暂停过了5分钟，再次载入歌曲");
       await play(settings.songId, false);
       audioEl.value.currentTime = currentTime;
     }

src/views/common/SongInfo.vue

@@ -12,6 +12,7 @@ import { getSongDetial } from "@/network/song";
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 import duration from 'dayjs/plugin/duration'
+import ArtistsSpan from "../../components/ArtistsSpan.vue";
 
 const showInfo = ref(true);
 const info = reactive({
@@ -26,7 +27,7 @@ const songInfo = (id) => {
     .then((res) => {
       showInfo.value = true;
       info.name = res.data.songs[0].name;
-      info.artists = res.data.songs[0].ar[0].name;
+      info.artists = res.data.songs[0].ar;
       info.albumPicUrl = res.data.songs[0].al.picUrl;
     })
     .catch((err) => {});
@@ -44,7 +45,7 @@ function zpTime(time) {
 // totalTime.value = zpTime(12345)
 const psToken = pubsub.subscribe("zp", (msg, data) => {
   switch (msg) {
-    case "zp.play":
+    case "zp.getSongInfo":
       songInfo(data.id);
       break;
     case "zp.progress":
@@ -70,7 +71,9 @@ onUnmounted(() => {
     <div class="song" v-show="showInfo">
       <div class="w-song">
         <div class="song-name">{{ info.name }}</div>
-        <div class="song-author">{{ info.artists }}</div>
+        <div class="song-author">
+          <ArtistsSpan :artists="info.artists" />
+        </div>
       </div>
 
       <div class="song-time">