修复音乐播放媒体信息显示问题

components.d.ts

@@ -38,7 +38,6 @@ declare module '@vue/runtime-core' {
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTransfer: typeof import('element-plus/es')['ElTransfer']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElUpload: typeof import('element-plus/es')['ElUpload']

src/model/api/music.ts

@@ -28,8 +28,8 @@ export interface MusicLyricModel {
 export interface MusicPlayerItem {
   id: number
   title: string
-  artist: string | undefined
+  artist?: string
-  album?: string | undefined
+  album?: string
   src: string
   pic: string
   lrc?: string

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="currentMusic" @play="musicPlay"/>
+    <a-player v-if="musicPlaying" ref="player" autoplay showLrc :list="musicList" v-model:music="currentMusic" @play="musicPlay"/>
   </el-drawer>
 </div>
 </template>
@@ -221,6 +221,7 @@ export default class Music extends BaseList<MusicPage> {
           id: index,
           title: item.title || item.name,
           artist: item.artist,
+          album: item.album,
           src: `/api/v2/common/music/load/${item._id}`,
           pic: `/api/v2/common/music/album/${item._id}`,
         }
@@ -310,33 +311,31 @@ export default class Music extends BaseList<MusicPage> {
   musicPlay() {
     if(!('mediaSession' in window.navigator) || !this.currentMusic) return;
     const player = <any>this.$refs.player
-    const mediaSession: any = navigator.mediaSession
     const currentId = this.currentMusic.id
-    mediaSession.metadata = new MediaMetadata({
+    navigator.mediaSession.metadata = new MediaMetadata({
       title: this.currentMusic.title,
       artist: this.currentMusic.artist,
       album: this.currentMusic.album,
-      artwork: [{src: this.currentMusic.pic}]
+      artwork: [{src: location.origin + this.currentMusic.pic}]
     })
-    const currentIndex = this.musicList.findIndex(item => item.id === currentId)
+    navigator.mediaSession.setActionHandler('play', () => { // 播放
-    mediaSession.setActionHandler('play', () => { // 播放
       player.play()
     })
-    mediaSession.setActionHandler('pause', () => { // 暂停
+    navigator.mediaSession.setActionHandler('pause', () => { // 暂停
       player.pause()
     })
-    mediaSession.setActionHandler('previoustrack', () => { // 上一首
+    navigator.mediaSession.setActionHandler('previoustrack', () => { // 上一首
-      if (currentIndex === 0) { // 已经是第一首
+      if (currentId === 0) { // 已经是第一首
         player.switch(this.musicList.length - 1)
       } else {
-        player.switch(currentIndex - 1)
+        player.switch(currentId - 1)
       }
     })
-    mediaSession.setActionHandler('nexttrack', () => { // 下一首
+    navigator.mediaSession.setActionHandler('nexttrack', () => { // 下一首
-      if (currentIndex === this.musicList.length - 1) { // 已经是最后一首
+      if (currentId === this.musicList.length - 1) { // 已经是最后一首
         player.switch(0)
       } else {
-        player.switch(currentIndex + 1)
+        player.switch(currentId + 1)
       }
     })
   }

src/views/api/aplayer/utils.ts

@@ -1,6 +1,6 @@
 /**
  * Parse lrc, suppose multiple time tag
- * @param {string} lrc_s - Format:
+ * @param {string} lrcRaw - Format:
  * [mm:ss]lyric
  * [mm:ss.xx]lyric
  * [mm:ss.xxx]lyric
@@ -9,10 +9,10 @@
  *
  * @return {Array} [[time, text], [time, text], [time, text], ...]
  */
-export function parseLrc (lrc_s: string): Array<[number, string]> {
+export function parseLrc (lrcRaw: string): Array<[number, string]> {
-  if (!lrc_s) return []
+  if (!lrcRaw) return []
-  lrc_s = lrc_s.replace(/([^\]^\n])\[/g, (match, p1) => p1 + '\n[')
+  lrcRaw = lrcRaw.replace(/([^\]^\n])\[/g, (match, p1) => p1 + '\n[')
-  const lyric = lrc_s.split('\n')
+  const lyric = lrcRaw.split('\n')
   const lrc: Array<[number, string]> = []
   const lyricLen = lyric.length
   for (let i = 0; i < lyricLen; i++) {
@@ -36,8 +36,7 @@ export function parseLrc (lrc_s: string): Array<[number, string]> {
     }
   }
   // sort by time
-  lrc.sort((item1, item2) => item1[0] - item2[0])
+  return lrc.sort((item1, item2) => item1[0] - item2[0])
-  return lrc
 }
 
 export function warn (message: string) {

src/views/api/aplayer/vue-aplayer.vue

@@ -190,7 +190,7 @@
        */
       volume: {
         type: Number,
-        default: 0.8,
+        default: 0.5,
         validator (value) {
           return value >= 0 && value <= 1
         },