根据ID判断当前正在播放的

src/model/api/music.ts

@@ -26,7 +26,7 @@ export interface MusicLyricModel {
 }
 
 export interface MusicPlayerItem {
-  id?: number
+  id: number
   title: string
   artist: string | undefined
   album?: string | undefined

src/views/api/Music.vue

@@ -142,7 +142,7 @@
     </template>
   </el-dialog>
   <el-drawer v-model="musicPlaying" :close-on-click-modal="false" size="40%" title="播放音乐">
-    <a-player v-if="musicPlaying" ref="player" autoplay showLrc :list="musicList" :music="musicList[0]" @play="musicPlay"/>
+    <a-player v-if="musicPlaying" ref="player" autoplay showLrc :list="musicList" :music="currentMusic" @play="musicPlay"/>
   </el-drawer>
 </div>
 </template>
@@ -187,6 +187,7 @@ export default class Music extends BaseList<MusicPage> {
   // 是否正在播放音乐
   musicPlaying: boolean = false
   musicList: MusicPlayerItem[] = []
+  currentMusic?: MusicPlayerItem
   created() {
     this.$http.get<never, any>('/api/v1/music/listLibs').then(data => {
       this.musicLibs = data
@@ -215,8 +216,9 @@ export default class Music extends BaseList<MusicPage> {
   async playMusic() {
     try {
       const data = await this.$http.get<any, any>('/api/v1/music/list/all', {params: selectedIds.length ? {ids: selectedIds} : this.search})
-      this.musicList = data.map((item: MusicModel) => {
+      this.musicList = data.map((item: MusicModel, index: number) => {
         const musicItem: MusicPlayerItem = {
+          id: index,
           title: item.title || item.name,
           artist: item.artist,
           src: `/api/v2/common/music/load/${item._id}`,
@@ -227,7 +229,7 @@ export default class Music extends BaseList<MusicPage> {
         }
         return musicItem
       })
-      // 删除原本可能存在的播放器配置(包含播放地址 时间进度等信息)
+      this.currentMusic = this.musicList[0]
       this.musicPlaying = true
     } catch (err) {
       console.error(err)
@@ -307,23 +309,23 @@ export default class Music extends BaseList<MusicPage> {
    * 创建媒体信息
    */
   musicPlay() {
-    if(!('mediaSession' in window.navigator)) return;
+    if(!('mediaSession' in window.navigator) || !this.currentMusic) return;
     const player = <any>this.$refs.player
-    const currentMusic = player.currentMusic
     const mediaSession: any = navigator.mediaSession
+    const currentId = this.currentMusic.id
     mediaSession.metadata = new MediaMetadata({
-      title: currentMusic.title,
-      artist: currentMusic.artist,
-      album: currentMusic.album,
-      artwork: [{src: currentMusic.pic}]
-    });
+      title: this.currentMusic.title,
+      artist: this.currentMusic.artist,
+      album: this.currentMusic.album,
+      artwork: [{src: this.currentMusic.pic}]
+    })
+    const currentIndex = this.musicList.findIndex(item => item.id === currentId)
     mediaSession.setActionHandler('play', () => { // 播放
       player.play()
     })
     mediaSession.setActionHandler('pause', () => { // 暂停
       player.pause()
     })
-    const currentIndex = this.musicList.findIndex(item => item.src === currentMusic.src)
     mediaSession.setActionHandler('previoustrack', () => { // 上一首
       if (currentIndex === 0) { // 已经是第一首
         player.switch(this.musicList.length - 1)