From ecb42b2c72e38466e3fad204756eec0dcda3cb08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=81=8C=E7=B3=96=E5=8C=85=E5=AD=90?=
 <colorfulsweet@icloud.com>
Date: Mon, 16 Jan 2023 00:33:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B9=E6=8D=AEID=E5=88=A4=E6=96=AD=E5=BD=93?=
 =?UTF-8?q?=E5=89=8D=E6=AD=A3=E5=9C=A8=E6=92=AD=E6=94=BE=E7=9A=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/model/api/music.ts  |  2 +-
 src/views/api/Music.vue | 24 +++++++++++++-----------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/model/api/music.ts b/src/model/api/music.ts
index d3ffb32..c9066cf 100644
--- a/src/model/api/music.ts
+++ b/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
diff --git a/src/views/api/Music.vue b/src/views/api/Music.vue
index 5ac5c0d..9840606 100644
--- a/src/views/api/Music.vue
+++ b/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)