✨ feat(Play): 完成播放可以根据列表播放 上一首 下一首

.env.development

@@ -1,3 +1,4 @@
-VITE_API=/api
+VITE_API = /api
-VITE_API_MT=/mt
+VITE_API_MT = /mt
-VITE_API_MUSIC = /music
+VITE_API_MUSIC = /music
+VITE_API_PROXY = http://110.42.251.190:9856

.env.production

@@ -1,3 +1,4 @@
-VITE_API=http://123.56.226.179:3000
+VITE_API = http://110.42.251.190:9898
-VITE_API_MT=http://mt.myalger.top
+VITE_API_MT = http://mt.myalger.top
-VITE_API_MUSIC=http://myalger.top:4000
+VITE_API_MUSIC = http://myalger.top:4000
+VITE_API_PROXY = http://110.42.251.190:9856

.gitignore

@@ -3,3 +3,5 @@ node_modules
 dist
 dist-ssr
 *.local
+
+pnpm-lock.yaml

package.json

@@ -10,6 +10,7 @@
     "@vue/runtime-core": "^3.3.4",
     "autoprefixer": "^9.8.6",
     "axios": "^0.21.1",
+    "lodash": "^4.17.21",
     "postcss": "^7.0.36",
     "sass": "^1.35.2",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",

src/components/RecommendSonglist.vue

@@ -1,58 +1,68 @@
 <template>
-    <div class="recommend-music">
+  <div class="recommend-music">
-        <div class="title" :class="setAnimationClass('animate__fadeInLeft')">本周最热音乐</div>
+    <div class="title" :class="setAnimationClass('animate__fadeInLeft')">
-        <div
+      本周最热音乐
-            class="recommend-music-list"
-            :class="setAnimationClass('animate__bounceInUp')"
-            v-show="recommendMusic?.result"
-        >
-            <!-- 推荐音乐列表 -->
-            <template v-for="(item, index) in recommendMusic?.result" :key="item.id">
-                <div
-                    :class="setAnimationClass('animate__bounceInUp')"
-                    :style="setAnimationDelay(index, 100)"
-                >
-                    <song-item :item="item" />
-                </div>
-            </template>
-        </div>
     </div>
+    <div
+      class="recommend-music-list"
+      :class="setAnimationClass('animate__bounceInUp')"
+      v-show="recommendMusic?.result"
+    >
+      <!-- 推荐音乐列表 -->
+      <template v-for="(item, index) in recommendMusic?.result" :key="item.id">
+        <div
+          :class="setAnimationClass('animate__bounceInUp')"
+          :style="setAnimationDelay(index, 100)"
+        >
+          <song-item :item="item" @play="handlePlay" />
+        </div>
+      </template>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref } from 'vue'
-import { getRecommendMusic } from "@/api/home";
+import { getRecommendMusic } from '@/api/home'
-import type { IRecommendMusic } from "@/type/music";
+import type { IRecommendMusic } from '@/type/music'
-import { setAnimationClass, setAnimationDelay } from "@/utils";
+import { setAnimationClass, setAnimationDelay } from '@/utils'
-import SongItem from "./common/SongItem.vue";
+import SongItem from './common/SongItem.vue'
+import { useStore } from 'vuex'
+
+const store = useStore();
 // 推荐歌曲
-const recommendMusic = ref<IRecommendMusic>();
+const recommendMusic = ref<IRecommendMusic>()
 
 // 加载推荐歌曲
 const loadRecommendMusic = async () => {
-    const { data } = await getRecommendMusic({ limit: 10 });
+  const { data } = await getRecommendMusic({ limit: 10 })
-    recommendMusic.value = data;
+  recommendMusic.value = data
-};
+}
 
 // 页面初始化
 onMounted(() => {
-    loadRecommendMusic();
+  loadRecommendMusic()
-});
+})
+
+const handlePlay = (item: any) => {
+  const musicIndex = (recommendMusic.value?.result.findIndex((music: any) => music.id == item.id) || 0) + 1
+  store.commit('setPlayList', recommendMusic.value?.result.slice(musicIndex))
+}
 </script>
 
 <style lang="scss" scoped>
 .title {
-    @apply text-lg font-bold mb-4;
+  @apply text-lg font-bold mb-4;
 }
 .recommend-music {
-    @apply flex-auto;
+  @apply flex-auto;
-    // width: 530px;
+  // width: 530px;
-    .text-ellipsis {
+  .text-ellipsis {
-        width: 100%;
+    width: 100%;
-    }
+  }
-    &-list {
+  &-list {
-        @apply rounded-3xl p-2 w-full border border-gray-700;
+    @apply rounded-3xl p-2 w-full border border-gray-700;
-        background-color: #0d0d0d;
+    background-color: #0d0d0d;
-    }
+  }
 }
-</style>
+</style>

src/components/common/SongItem.vue

@@ -1,102 +1,113 @@
 <template>
-    <div class="recommend-music-list-item">
+  <div class="recommend-music-list-item">
-        <img :src="item.picUrl + '?param=200y200'" class="recommend-music-list-item-img" />
+    <img
-        <div class="recommend-music-list-item-content">
+      :src="item.picUrl + '?param=200y200'"
-            <div class="recommend-music-list-item-content-title">
+      class="recommend-music-list-item-img"
-                <n-ellipsis class="text-ellipsis" line-clamp="1">{{ item.song.name }}</n-ellipsis>
+    />
-            </div>
+    <div class="recommend-music-list-item-content">
-            <div class="recommend-music-list-item-content-name">
+      <div class="recommend-music-list-item-content-title">
-                <n-ellipsis class="text-ellipsis" line-clamp="1">
+        <n-ellipsis class="text-ellipsis" line-clamp="1">{{
-                    <span
+          item.name
-                        v-for="(artists,artistsindex) in item.song.artists"
+        }}</n-ellipsis>
-                        :key="artistsindex"
+      </div>
-                    >{{ artists.name }}{{ artistsindex < item.song.artists.length - 1 ? ' / ' : '' }}</span>
+      <div class="recommend-music-list-item-content-name">
-                </n-ellipsis>
+        <n-ellipsis class="text-ellipsis" line-clamp="1">
-            </div>
+          <span
-        </div>
+            v-for="(artists, artistsindex) in item.song.artists"
-        <div class="recommend-music-list-item-operating">
+            :key="artistsindex"
-            <div class="recommend-music-list-item-operating-like">
+            >{{ artists.name
-                <i class="iconfont icon-likefill"></i>
+            }}{{
-            </div>
+              artistsindex < item.song.artists.length - 1 ? ' / ' : ''
-            <div
+            }}</span
-                class="recommend-music-list-item-operating-play bg-black"
+          >
-                :class="isPlaying ? 'bg-green-600' : ''"
+        </n-ellipsis>
-                @click="playMusicEvent(item)"
+      </div>
-            >
-                <i class="iconfont icon-playfill"></i>
-            </div>
-        </div>
     </div>
+    <div class="recommend-music-list-item-operating">
+      <div class="recommend-music-list-item-operating-like">
+        <i class="iconfont icon-likefill"></i>
+      </div>
+      <div
+        class="recommend-music-list-item-operating-play bg-black"
+        :class="isPlaying ? 'bg-green-600' : ''"
+        @click="playMusicEvent(item)"
+      >
+        <i v-if="isPlaying && play" class="iconfont icon-stop"></i>
+        <i v-else class="iconfont icon-playfill"></i>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { useStore } from "vuex";
+import { useStore } from 'vuex'
-import type { SongResult } from "@/type/music";
+import type { SongResult } from '@/type/music'
-import { computed, } from "vue";
+import { computed } from 'vue'
-
 
 const props = defineProps({
-    item: {
+  item: {
-        type: Object,
+    type: Object,
-        required: true
+    required: true,
-    }
+  },
 })
 
+const store = useStore()
 
-const store = useStore();
+const play = computed(() => store.state.play as boolean)
-
-const playMusic = computed(() => store.state.playMusic);
 
+const playMusic = computed(() => store.state.playMusic)
 
 // 判断是否为正在播放的音乐
 const isPlaying = computed(() => {
-    return playMusic.value.id == props.item.id;
+  return playMusic.value.id == props.item.id
 })
 
+const emits = defineEmits(['play'])
+
 // 播放音乐 设置音乐详情 打开音乐底栏
 const playMusicEvent = (item: any) => {
-    store.commit("setPlay", item);
+  store.commit('setPlay', item)
-    store.commit("setIsPlay", true);
+  store.commit('setIsPlay', true)
-};
+  store.state.playListIndex = 0 
-
+  emits('play', item)
-
+}
 </script>
 
 <style lang="scss" scoped>
 .text-ellipsis {
-    width: 100%;
+  width: 100%;
 }
 .recommend-music-list-item {
-    @apply rounded-3xl p-3 flex items-center hover:bg-gray-800 transition;
+  @apply rounded-3xl p-3 flex items-center hover:bg-gray-800 transition;
-    &-img {
+  &-img {
-        @apply w-12 h-12 rounded-2xl mr-4;
+    @apply w-12 h-12 rounded-2xl mr-4;
+  }
+  &-content {
+    @apply flex-1;
+    &-title {
+      @apply text-base text-white;
     }
-    &-content {
+    &-name {
-        @apply flex-1;
+      @apply text-xs;
-        &-title {
+      @apply text-gray-400;
-            @apply text-base text-white;
-        }
-        &-name {
-            @apply text-xs;
-            @apply text-gray-400;
-        }
     }
-    &-operating {
+  }
-        @apply flex items-center pl-4 rounded-full border border-gray-700;
+  &-operating {
-        background-color: #0d0d0d;
+    @apply flex items-center pl-4 rounded-full border border-gray-700;
-        .iconfont {
+    background-color: #0d0d0d;
-            @apply text-xl;
+    .iconfont {
-        }
+      @apply text-xl;
-        .icon-likefill {
-            color: #868686;
-            @apply text-xl hover:text-red-600 transition;
-        }
-        &-like {
-            @apply mr-2 cursor-pointer;
-        }
-        &-play {
-            @apply cursor-pointer border border-gray-500 rounded-full w-10 h-10 flex justify-center items-center hover:bg-green-600 transition;
-        }
     }
+    .icon-likefill {
+      color: #868686;
+      @apply text-xl hover:text-red-600 transition;
+    }
+    &-like {
+      @apply mr-2 cursor-pointer;
+    }
+    &-play {
+      @apply cursor-pointer border border-gray-500 rounded-full w-10 h-10 flex justify-center items-center hover:bg-green-600 transition;
+    }
+  }
 }
 </style>

src/layout/components/PlayBar.vue

@@ -1,185 +1,215 @@
 <template>
-    <!-- 展开全屏 -->
+  <!-- 展开全屏 -->
-    <transition name="musicPage">
+  <transition name="musicPage">
-        <div id="drawer-target" v-show="musicFull">
+    <div id="drawer-target" v-show="musicFull">
-            <div class="music-img">
+      <div class="music-img">
-                <img class="img" :src="playMusic.picUrl + '?param=300y300'" />
+        <img class="img" :src="playMusic.picUrl + '?param=300y300'" />
-            </div>
+      </div>
-            <div class="music-content">
+      <div class="music-content">
-                <div class="music-content-name">{{ playMusic.song.name }}</div>
+        <div class="music-content-name">{{ playMusic.song.name }}</div>
-                <div class="music-content-singer">
+        <div class="music-content-singer">
-                    <span
+          <span v-for="(item, index) in playMusic.song.artists" :key="index">{{ item.name
-                        v-for="(item,index) in playMusic.song.artists"
+          }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}</span>
-                        :key="index"
-                    >{{ item.name }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}</span>
-                </div>
-                <n-layout
-                    class="music-lrc"
-                    style="height: 550px;"
-                    ref="lrcSider"
-                    :native-scrollbar="false"
-                    @mouseover="mouseOverLayout"
-                    @mouseleave="mouseLeaveLayout"
-                >
-                    <template v-for="(item,index) in lrcArray" :key="index">
-                        <div
-                            class="music-lrc-text"
-                            :class="{ 'now-text': isCurrentLrc(index) }"
-                            @click="setAudioTime(index)"
-                        >{{ item.text }}</div>
-                    </template>
-                </n-layout>
-            </div>
         </div>
-    </transition>
+        <n-layout class="music-lrc" style="height: 550px" ref="lrcSider" :native-scrollbar="false"
-    <!-- 底部播放栏 -->
+          @mouseover="mouseOverLayout" @mouseleave="mouseLeaveLayout">
-    <div class="music-play-bar" :class="setAnimationClass('animate__bounceInUp')">
+          <template v-for="(item, index) in lrcArray" :key="index">
-        <img class="play-bar-img" :src="playMusic.picUrl + '?param=200y200'" @click="setMusicFull" />
+            <div class="music-lrc-text" :class="{ 'now-text': isCurrentLrc(index) }" @click="setAudioTime(index)">
-        <div class="music-content">
+              {{ item.text }}
-            <div class="music-content-title">
-                <n-ellipsis class="text-ellipsis" line-clamp="1">{{ playMusic.song.name }}</n-ellipsis>
             </div>
-            <div class="music-content-name">
+          </template>
-                <n-ellipsis class="text-ellipsis" line-clamp="1">
+        </n-layout>
-                    <span
+      </div>
-                        v-for="(item,index) in playMusic.song.artists"
-                        :key="index"
-                    >{{ item.name }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}</span>
-                </n-ellipsis>
-            </div>
-        </div>
-        <div class="music-buttons">
-            <div>
-                <i class="iconfont icon-prev"></i>
-            </div>
-            <div class="music-buttons-play" @click="playMusicEvent">
-                <i class="iconfont icon" :class="play ? 'icon-stop' : 'icon-play'"></i>
-            </div>
-            <div>
-                <i class="iconfont icon-next"></i>
-            </div>
-        </div>
-        <div class="music-time">
-            <div class="time">{{ getNowTime }}</div>
-            <n-slider v-model:value="timeSlider" :step="0.05" :tooltip="false"></n-slider>
-            <div class="time">{{ getAllTime }}</div>
-        </div>
-        <div class="audio-volume">
-            <div>
-                <i class="iconfont icon-notificationfill"></i>
-            </div>
-            <n-slider v-model:value="volumeSlider" :step="0.01" :tooltip="false"></n-slider>
-        </div>
-        <div class="audio-button">
-            <n-tooltip trigger="hover">
-                <template #trigger>
-                    <i class="iconfont icon-likefill"></i>
-                </template>
-                喜欢
-            </n-tooltip>
-            <n-tooltip trigger="hover">
-                <template #trigger>
-                    <i class="iconfont icon-Play" @click="parsingMusic"></i>
-                </template>
-                解析播放
-            </n-tooltip>
-            <n-tooltip trigger="hover">
-                <template #trigger>
-                    <i class="iconfont icon-full" @click="setMusicFull"></i>
-                </template>
-                歌词
-            </n-tooltip>
-        </div>
-        <!-- 播放音乐 -->
-        <audio ref="audio" :src="playMusicUrl" :autoplay="play"></audio>
     </div>
+  </transition>
+  <!-- 底部播放栏 -->
+  <div class="music-play-bar" :class="setAnimationClass('animate__bounceInUp')">
+    <img class="play-bar-img" :src="playMusic.picUrl + '?param=200y200'" @click="setMusicFull" />
+    <div class="music-content">
+      <div class="music-content-title">
+        <n-ellipsis class="text-ellipsis" line-clamp="1">{{
+          playMusic.name
+        }}</n-ellipsis>
+      </div>
+      <div class="music-content-name">
+        <n-ellipsis class="text-ellipsis" line-clamp="1">
+          <span v-for="(item, index) in playMusic.song.artists" :key="index">{{ item.name
+          }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}</span>
+        </n-ellipsis>
+      </div>
+    </div>
+    <div class="music-buttons">
+      <div @click="handlePrev">
+        <i class="iconfont icon-prev"></i>
+      </div>
+      <div class="music-buttons-play" @click="playMusicEvent">
+        <i class="iconfont icon" :class="play ? 'icon-stop' : 'icon-play'"></i>
+      </div>
+      <div @click="handleEnded">
+        <i class="iconfont icon-next"></i>
+      </div>
+    </div>
+    <div class="music-time">
+      <div class="time">{{ getNowTime }}</div>
+      <n-slider v-model:value="timeSlider" :step="0.05" :tooltip="false"></n-slider>
+      <div class="time">{{ getAllTime }}</div>
+    </div>
+    <div class="audio-volume">
+      <div>
+        <i class="iconfont icon-notificationfill"></i>
+      </div>
+      <n-slider v-model:value="volumeSlider" :step="0.01" :tooltip="false"></n-slider>
+    </div>
+    <div class="audio-button">
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <i class="iconfont icon-likefill"></i>
+        </template>
+        喜欢
+      </n-tooltip>
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <i class="iconfont icon-Play" @click="parsingMusic"></i>
+        </template>
+        解析播放
+      </n-tooltip>
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <i class="iconfont icon-full" @click="setMusicFull"></i>
+        </template>
+        歌词
+      </n-tooltip>
+    </div>
+    <!-- 播放音乐 -->
+    <audio ref="audio" :src="playMusicUrl" :autoplay="play"></audio>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import type { SongResult } from "@/type/music";
+import type { SongResult } from '@/type/music'
-import type { ILyric } from "@/type/lyric";
+import type { ILyric } from '@/type/lyric'
-import { secondToMinute } from "@/utils";
+import { secondToMinute } from '@/utils'
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from 'vue'
-import { useStore } from 'vuex';
+import { useStore } from 'vuex'
-import { setAnimationClass } from "@/utils";
+import { setAnimationClass } from '@/utils'
-import { getMusicLrc, getParsingMusicUrl } from "@/api/music"
+import { getMusicLrc, getParsingMusicUrl } from '@/api/music'
+import axios from 'axios'
 
-
+const store = useStore()
-const store = useStore();
+const audio = ref<any>(null)
 
 // 播放的音乐信息
 const playMusic = computed(() => store.state.playMusic as SongResult)
 // 是否播放
 const play = computed(() => store.state.play as boolean)
 // 播放链接
-const playMusicUrl = computed(() => store.state.playMusicUrl as string)
+const ProxyUrl =
-
+  import.meta.env.VITE_API_PROXY + '' || 'http://110.42.251.190:9856'
+const playMusicUrl = ref('')
+watch(
+  () => store.state.playMusicUrl,
+  async (value, oldValue) => {
+    const isUrlHasMc = location.href.includes('mc.')
+    if (value && isUrlHasMc) {
+      let playMusicUrl1 = value as string
+      if (!ProxyUrl) {
+        playMusicUrl.value = playMusicUrl1
+        return
+      }
+      const url = new URL(playMusicUrl1)
+      const pathname = url.pathname
+      const subdomain = url.origin.split('.')[0].split('//')[1]
+      playMusicUrl1 = `${ProxyUrl}/mc?m=${subdomain}&url=${pathname}`
+      // console.log('playMusicUrl1', playMusicUrl1)
+      // // 获取音频文件
+      // const { data } = await axios.get(playMusicUrl1, {
+      //   responseType: 'blob'
+      // })
+      // const musicUrl = URL.createObjectURL(data)
+      // console.log('musicUrl', musicUrl)
+      // playMusicUrl.value = musicUrl
+      playMusicUrl.value = playMusicUrl1
+      console.log('playMusicUrl1',playMusicUrl1)
+      setTimeout(() => {
+        onAudio(audio.value)
+        store.commit('setPlayMusic', true)
+      }, 100)
+    }else {
+      playMusicUrl.value = value
+    }
+  },
+  { immediate: true }
+)
 // 获取音乐播放Dom
-const audio = ref<any>(null)
 
 onMounted(() => {
-    // 监听音乐是否播放
+  // 监听音乐是否播放
-    watch(() => play.value, (value, oldValue) => {
+  watch(
-        if (value) {
+    () => play.value,
-            audio.value.play()
+    (value, oldValue) => {
-            onAudio(audio.value)
+      if (value) {
-        } else {
+        audio.value.play()
-            audio.value.pause()
+        onAudio(audio.value)
-        }
+      } else {
-    })
+        audio.value.pause()
-
+      }
-    watch(() => playMusicUrl.value, (value, oldValue) => {
-        if (!value) {
-            parsingMusic()
-        }
-    })
-
-    // 抬起键盘按钮监听
-    document.onkeyup = (e) => {
-        switch (e.code) {
-            case 'Space':
-                playMusicEvent()
-        }
     }
+  )
 
-    // 按下键盘按钮监听
+  watch(
-    document.onkeydown = (e) => {
+    () => playMusicUrl.value,
-        switch (e.code) {
+    (value, oldValue) => {
-            case 'Space':
+      if (!value) {
-                return false
+        parsingMusic()
-
+      }
-        }
     }
+  )
+
+  // 抬起键盘按钮监听
+  document.onkeyup = (e) => {
+    switch (e.code) {
+      case 'Space':
+        playMusicEvent()
+    }
+  }
+
+  // 按下键盘按钮监听
+  document.onkeydown = (e) => {
+    switch (e.code) {
+      case 'Space':
+        return false
+    }
+  }
 })
 
 const nowTime = ref(0)
 const allTime = ref(0)
 // 计算属性  获取当前播放时间的进度
 const timeSlider = computed({
-    get: () => nowTime.value / allTime.value * 100,
+  get: () => (nowTime.value / allTime.value) * 100,
-    set: (value) => {
+  set: (value) => {
-        audio.value.currentTime = value * allTime.value / 100
+    audio.value.currentTime = (value * allTime.value) / 100
-        audio.value.play()
+    audio.value.play()
-        store.commit("setPlayMusic", true);
+    store.commit('setPlayMusic', true)
-    }
+  },
 })
 
 // 音量条
 const audioVolume = ref(1)
 const volumeSlider = computed({
-    get: () => audioVolume.value * 100,
+  get: () => audioVolume.value * 100,
-    set: (value) => {
+  set: (value) => {
-        audio.value.volume = value / 100
+    audio.value.volume = value / 100
-    }
+  },
 })
 // 获取当前播放时间
 const getNowTime = computed(() => {
-    return secondToMinute(nowTime.value)
+  return secondToMinute(nowTime.value)
 })
 
 // 获取总时间
 const getAllTime = computed(() => {
-    return secondToMinute(allTime.value)
+  return secondToMinute(allTime.value)
 })
 
 // 获取歌词滚动dom
@@ -189,239 +219,268 @@ const newLrcIndex = ref(0)
 const isMouse = ref(false)
 // 歌词滚动方法
 const lrcScroll = () => {
-    if (musicFull.value && !isMouse.value) {
+  if (musicFull.value && !isMouse.value) {
-        let top = newLrcIndex.value * 50 - 225;
+    let top = newLrcIndex.value * 50 - 225
-        lrcSider.value.scrollTo({ top: top, behavior: 'smooth' })
+    lrcSider.value.scrollTo({ top: top, behavior: 'smooth' })
-    }
+  }
 }
 const mouseOverLayout = () => {
-    isMouse.value = true
+  isMouse.value = true
 }
 const mouseLeaveLayout = () => {
-    setTimeout(() => {
+  setTimeout(() => {
-        isMouse.value = false
+    isMouse.value = false
-    }, 3000);
+  }, 3000)
 }
 
 // 监听音乐播放 获取时间
-const onAudio = (audio: any) => {
+const onAudio = (audio: HTMLAudioElement) => {
-    audio.addEventListener("timeupdate", function () {//监听音频播放的实时时间事件
+  audio.removeEventListener('timeupdate', handleGetAudioTime);
-        // 获取当前播放时间
+  audio.removeEventListener('ended', handleEnded);
-        nowTime.value = Math.floor(audio.currentTime)
+  audio.addEventListener('timeupdate', handleGetAudioTime);
-        // 获取总时间
+  audio.addEventListener('ended', handleEnded);
-        allTime.value = audio.duration
+}
 
-        if (audio.currentTime >= audio.duration) {
+function handleEnded() {
-            // store.commit("setPlayMusic", false);
+  store.commit('nextPlay');
-            audio.play()
+}
-        }
-        // 获取音量
-        audioVolume.value = audio.volume
 
-        lrcScroll()
+function handlePrev(){
+  store.commit('prevPlay');
+}
 
-    })
+function handleGetAudioTime(this: any) {
+  // 监听音频播放的实时时间事件
+  const audio = this as HTMLAudioElement;
+  // 获取当前播放时间
+  nowTime.value = Math.floor(audio.currentTime);
+  // 获取总时间
+  allTime.value = audio.duration;
+  // 获取音量
+  audioVolume.value = audio.volume;
+  lrcScroll();
 }
 
 // 播放暂停按钮事件
 const playMusicEvent = async () => {
-    if (play.value) {
+  if (play.value) {
-        store.commit("setPlayMusic", false);
+    store.commit('setPlayMusic', false)
-    } else {
+  } else {
-        store.commit("setPlayMusic", true);
+    store.commit('setPlayMusic', true)
-    }
+  }
 }
 
 const musicFull = ref(false)
 
 // 设置musicFull
 const setMusicFull = () => {
-    musicFull.value = !musicFull.value
+  musicFull.value = !musicFull.value
-    if (musicFull.value) {
+  if (musicFull.value) {
-        loadLrc()
+    loadLrc()
-    }
+  }
 }
 
 // 解析音乐
 const parsingMusic = async () => {
-    const { data } = await getParsingMusicUrl(playMusic.value.id)
+  const { data } = await getParsingMusicUrl(playMusic.value.id)
-    store.state.playMusicUrl = data.data.url
+  store.state.playMusicUrl = data.data.url
 }
 
-
 const lrcData = ref<ILyric>()
 
 interface ILrcData {
-    text: string;
+  text: string
-    trText: string;
+  trText: string
 }
 const lrcArray = ref<Array<ILrcData>>()
 const lrcTimeArray = ref<Array<Number>>([])
 // 加载歌词
 const loadLrc = async () => {
-    const { data } = await getMusicLrc(playMusic.value.id)
+  const { data } = await getMusicLrc(playMusic.value.id)
-    lrcData.value = data
+  lrcData.value = data
+
+  try {
+    let musicText = data.lrc.lyric
+    //歌词时间
+    let timeArray = musicText.match(/(\d{2}):(\d{2})(\.(\d*))?/g)
+    let timeArrayNum: Array<Number> = []
+    timeArray?.forEach(function (item, index) {
+      if (item.length < 9) {
+        item = item + '0'
+      }
+      timeArrayNum.push(
+        parseInt(item.split(':')[0]) * 60 + parseFloat(item.split(':')[1])
+      )
+    })
+    lrcTimeArray.value = timeArrayNum
+    //歌词
+    let musicTextArray = musicText
+      .replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '')
+      .split('\n')
+    let text = []
 
     try {
-
+      let trMusicText = data.tlyric.lyric
-        let musicText = data.lrc.lyric
+      let trMusicTextArray = trMusicText
-        //歌词时间
+        .replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '')
-        let timeArray = musicText.match(/(\d{2}):(\d{2})(\.(\d*))?/g)
+        .split('\n')
-        let timeArrayNum: Array<Number> = []
+      for (let i = 0; i < musicTextArray.length - 1; i++) {
-        timeArray?.forEach(function (item, index) {
+        text.push({
-            if (item.length < 9) {
+          text: musicTextArray[i],
-                item = item + "0"
+          trText: trMusicTextArray[i],
-            }
-            timeArrayNum.push(parseInt(item.split(':')[0]) * 60 + parseFloat(item.split(':')[1]));
         })
-        lrcTimeArray.value = timeArrayNum
+      }
-        //歌词
+      lrcArray.value = text
-        let musicTextArray = musicText.replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '').split('\n')
-        let text = []
-
-        try {
-            let trMusicText = data.tlyric.lyric
-            let trMusicTextArray = trMusicText.replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '').split('\n')
-            for (let i = 0; i < musicTextArray.length - 1; i++) {
-                text.push({
-                    text: musicTextArray[i],
-                    trText: trMusicTextArray[i]
-                })
-            }
-            lrcArray.value = text
-
-        } catch (err) {
-            text = []
-        }
     } catch (err) {
-        console.log(err)
+      text = []
     }
+  } catch (err) {
+    console.log(err)
+  }
 }
 
 // 是否是当前正在播放的歌词
 const isCurrentLrc = (index: any) => {
-    let isTrue = !(nowTime.value <= lrcTimeArray.value[index] || nowTime.value >= lrcTimeArray.value[index + 1])
+  let isTrue = !(nowTime.value <= lrcTimeArray.value[index] || nowTime.value >= lrcTimeArray.value[index + 1])
-    if (isTrue) {
+  if (isTrue) {
-        newLrcIndex.value = index
+    newLrcIndex.value = index
-
+  }
-    }
+  return isTrue
-    return isTrue
 }
 // 设置当前播放时间
 const setAudioTime = (index: any) => {
-    audio.value.currentTime = lrcTimeArray.value[index]
+  audio.value.currentTime = lrcTimeArray.value[index]
-    audio.value.play()
+  audio.value.play()
 }
-
 </script>
 
 <style lang="scss" scoped>
 .musicPage-enter-active {
-    animation: fadeInUp 0.8s ease-in-out;
+  animation: fadeInUp 0.8s ease-in-out;
 }
+
 .musicPage-leave-active {
-    animation: fadeOutDown 0.8s ease-in-out;
+  animation: fadeOutDown 0.8s ease-in-out;
 }
+
 #drawer-target {
-    @apply top-0 left-0 absolute w-full h-full overflow-hidden rounded px-24 pt-24 pb-48 flex items-center;
+  @apply top-0 left-0 absolute w-full h-full overflow-hidden rounded px-24 pt-24 pb-48 flex items-center;
+  background-color: #333333;
+  animation-duration: 300ms;
+
+  .music-img {
+    @apply flex-1;
+
+    .img {
+      @apply rounded-xl;
+    }
+  }
+
+  .music-content {
+    @apply flex flex-col justify-center items-center;
+
+    &-name {
+      @apply font-bold text-3xl py-2;
+    }
+
+    &-singer {
+      @apply text-base py-2;
+    }
+  }
+
+  .music-lrc {
     background-color: #333333;
-    animation-duration: 300ms;
+    width: 800px;
-    .music-img {
+    height: 550px;
-        @apply flex-1;
+
-        .img {
+    &-text {
-            @apply rounded-xl;
+      @apply text-white text-lg flex justify-center items-center cursor-pointer;
-        }
+      height: 50px;
+      transition: all 0.2s ease-out;
+
+      &:hover {
+        @apply font-bold text-xl text-red-500;
+      }
     }
 
-    .music-content {
+    .now-text {
-        @apply flex flex-col justify-center items-center;
+      @apply font-bold text-xl text-red-500;
-        &-name {
-            @apply font-bold text-3xl py-2;
-        }
-        &-singer {
-            @apply text-base py-2;
-        }
-    }
-    .music-lrc {
-        background-color: #333333;
-        width: 800px;
-        height: 550px;
-        &-text {
-            @apply text-white text-lg flex justify-center items-center cursor-pointer;
-            height: 50px;
-            transition: all 0.2s ease-out;
-            &:hover {
-                @apply font-bold text-xl text-red-500;
-            }
-        }
-
-        .now-text {
-            @apply font-bold text-xl text-red-500;
-        }
     }
+  }
 }
+
 .text-ellipsis {
-    width: 100%;
+  width: 100%;
 }
 
 .music-play-bar {
-    @apply h-20 w-full absolute bottom-0 left-0 flex items-center rounded-t-2xl overflow-hidden box-border px-6 py-2;
+  @apply h-20 w-full absolute bottom-0 left-0 flex items-center rounded-t-2xl overflow-hidden box-border px-6 py-2;
-    background-color: #212121;
+  background-color: #212121;
 
-    .music-content {
+  .music-content {
-        width: 200px;
+    width: 200px;
-        @apply ml-4;
+    @apply ml-4;
-        &-title {
+
-            @apply text-base text-white;
+    &-title {
-        }
+      @apply text-base text-white;
-        &-name {
-            @apply text-xs mt-1;
-            @apply text-gray-400;
-        }
     }
+
+    &-name {
+      @apply text-xs mt-1;
+      @apply text-gray-400;
+    }
+  }
 }
 
 .play-bar-img {
-    @apply w-14 h-14 rounded-2xl;
+  @apply w-14 h-14 rounded-2xl;
 }
 
 .music-buttons {
-    @apply mx-6;
+  @apply mx-6;
-    .iconfont {
+
-        @apply text-2xl hover:text-green-500 transition;
+  .iconfont {
-    }
+    @apply text-2xl hover:text-green-500 transition;
-    .icon {
+  }
-        @apply text-xl hover:text-white;
+
-    }
+  .icon {
-    @apply flex items-center;
+    @apply text-xl hover:text-white;
-    > div {
+  }
-        @apply cursor-pointer;
+
-    }
+  @apply flex items-center;
-    &-play {
+
-        @apply flex justify-center items-center w-12 h-12 rounded-full mx-4 hover:bg-green-500 transition;
+  >div {
-        background: #383838;
+    @apply cursor-pointer;
-    }
+  }
+
+  &-play {
+    @apply flex justify-center items-center w-12 h-12 rounded-full mx-4 hover:bg-green-500 transition;
+    background: #383838;
+  }
 }
 
 .music-time {
-    @apply flex flex-1 items-center;
+  @apply flex flex-1 items-center;
-    .time {
+
-        @apply mx-4 mt-1;
+  .time {
-    }
+    @apply mx-4 mt-1;
+  }
 }
 
 .audio-volume {
-    width: 140px;
+  width: 140px;
-    @apply flex items-center mx-4;
+  @apply flex items-center mx-4;
-    .iconfont {
+
-        @apply text-2xl hover:text-green-500 transition cursor-pointer mr-4;
+  .iconfont {
-    }
+    @apply text-2xl hover:text-green-500 transition cursor-pointer mr-4;
+  }
 }
 
 .audio-button {
-    @apply flex items-center mx-4;
+  @apply flex items-center mx-4;
-    .iconfont {
+
-        @apply text-2xl hover:text-green-500 transition cursor-pointer m-4;
+  .iconfont {
-    }
+    @apply text-2xl hover:text-green-500 transition cursor-pointer m-4;
+  }
 }
-</style>
+</style>

src/store/index.ts

@@ -2,31 +2,58 @@ import { createStore } from "vuex";
 import { SongResult } from "@/type/music";
 import { getMusicUrl } from "@/api/music";
 import homeRouter from "@/router/home";
-let state = {
+
+interface State {
+  menus: any[]
+  play: boolean
+  isPlay: boolean
+  playMusic: SongResult
+  playMusicUrl: string
+  user: any
+  playList: SongResult[]
+  playListIndex: number
+}
+
+const state: State = {
   menus: homeRouter,
   play: false,
   isPlay: false,
   playMusic: {} as SongResult,
-  playMusicUrl: "",
+  playMusicUrl: '',
-  user: null as any,
+  user: null,
-};
+  playList: [],
+  playListIndex: 0,
+}
 
-let mutations = {
+const mutations = {
-  setMenus(state: any, menus: any[]) {
+  setMenus(state: State, menus: any[]) {
-    state.menus = menus;
+    state.menus = menus
   },
-  async setPlay(state: any, playMusic: SongResult) {
+  async setPlay(state: State, playMusic: SongResult) {
-    state.playMusic = playMusic;
+    state.playMusic = playMusic
-    state.playMusicUrl = await getSongUrl(playMusic.id);
+    state.playMusicUrl = await getSongUrl(playMusic.id)
-    state.play = true;
+    state.play = true
   },
-  setIsPlay(state: any, isPlay: boolean) {
+  setIsPlay(state: State, isPlay: boolean) {
-    state.isPlay = isPlay;
+    state.isPlay = isPlay
   },
-  setPlayMusic(state: any, play: boolean) {
+  setPlayMusic(state: State, play: boolean) {
-    state.play = play;
+    state.play = play
   },
-};
+  setPlayList(state: State, playList: SongResult[]) {
+    state.playListIndex = 0
+    state.playList = playList
+  },
+  async nextPlay(state: State) {
+    state.playListIndex = (state.playListIndex + 1) % state.playList.length
+    await updatePlayMusic(state)
+  },
+  async prevPlay(state: State) {
+    state.playListIndex =
+      (state.playListIndex - 1 + state.playList.length) % state.playList.length
+    await updatePlayMusic(state)
+  },
+}
 
 const getSongUrl = async (id: number) => {
   const { data } = await getMusicUrl(id);
@@ -35,6 +62,12 @@ const getSongUrl = async (id: number) => {
   return data.data[0].url;
 };
 
+const updatePlayMusic = async (state: State) => {
+  state.playMusic = state.playList[state.playListIndex]
+  state.playMusicUrl = await getSongUrl(state.playMusic.id)
+  state.play = true
+}
+
 const store = createStore({
   state: state,
   mutations: mutations,

src/views/list/index.vue

@@ -6,9 +6,10 @@ import type { IListDetail } from "@/type/listDetail";
 import { setAnimationClass, setAnimationDelay } from "@/utils";
 import SongItem from "@/components/common/SongItem.vue";
 import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
 
 
-
+const store = useStore();
 const recommendList = ref()
 const showMusic = ref(false)
 
@@ -91,6 +92,13 @@ const formatDetail = computed(() => (detail: any) => {
 })
 
 
+const handlePlay = (item: any) => {
+  const list = listDetail.value?.playlist.tracks || []
+  console.log('list',list)
+  console.log('item',item)
+  const musicIndex = (list.findIndex((music: any) => music.id == item.id) || 0)
+  store.commit('setPlayList', list.slice(musicIndex))
+}
 
 </script>
 
@@ -134,7 +142,7 @@ const formatDetail = computed(() => (detail: any) => {
             :class="setAnimationClass('animate__bounceInUp')"
             :style="setAnimationDelay(index, 50)"
           >
-            <SongItem :item="formatDetail(item)" />
+            <SongItem :item="formatDetail(item)" @play="handlePlay" />
           </div>
         </n-layout>
       </div>

src/views/user/index.vue

@@ -69,6 +69,12 @@ const musicFullClass = computed(() => {
   }
 })
 
+const handlePlay = (item: any) => {
+  const tracks = list.value?.tracks || []
+  const musicIndex = (tracks.findIndex((music: any) => music.id == item.id) || 0)
+  store.commit('setPlayList', tracks.slice(musicIndex))
+}
+
 
 </script>
 
@@ -145,7 +151,7 @@ const musicFullClass = computed(() => {
             :class="setAnimationClass('animate__bounceInUp')"
             :style="setAnimationDelay(index, 100)"
           >
-            <SongItem :item="formatDetail(item)" />
+            <SongItem :item="formatDetail(item)" @play="handlePlay"/>
           </div>
         </n-layout>
       </div>

vite.config.ts

@@ -8,28 +8,28 @@ export default defineConfig({
   plugins: [vue(), VueDevTools()],
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "src"),
+      '@': path.resolve(__dirname, 'src'),
     },
   },
   server: {
-    host: "0.0.0.0", //允许本机
+    host: '0.0.0.0', //允许本机
     proxy: {
       // string shorthand
-      "/mt": {
+      '/mt': {
-        target: "http://mt.myalger.top",
+        target: 'http://mt.myalger.top',
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/mt/, ""),
+        rewrite: (path) => path.replace(/^\/mt/, ''),
       },
       // with options
-      "/api": {
+      '/api': {
-        target: "http://123.56.226.179:3000",
+        target: 'http://110.42.251.190:9898',
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, ""),
+        rewrite: (path) => path.replace(/^\/api/, ''),
       },
-      "/music": {
+      '/music': {
-        target: "http://myalger.top:4000",
+        target: 'http://myalger.top:4000',
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/music/, ""),
+        rewrite: (path) => path.replace(/^\/music/, ''),
       },
     },
   },