适配chrome浏览器媒体信息显示

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 autoplay showLrc :list="musicList" :music="musicList[0]"/>
+    <a-player ref="player" autoplay showLrc :list="musicList" :music="musicList[0]" @play="musicPlay"/>
   </el-drawer>
 </div>
 </template>
@@ -306,38 +306,39 @@ export default class Music extends BaseList<MusicPage> {
   /**
    * 创建媒体信息
    */
-  // musicPlay() {
-  //   if(!('mediaSession' in window.navigator)) return;
-  //   const currentMusic = this.player.currentMusic
-  //   const mediaSession: any = navigator.mediaSession
-  //   mediaSession.metadata = new MediaMetadata({
-  //     title: currentMusic.name,
-  //     artist: currentMusic.artist,
-  //     album: currentMusic.album,
-  //     artwork: [{src: currentMusic.cover}]
-  //   });
-  //   mediaSession.setActionHandler('play', () => { // 播放
-  //     this.player.play()
-  //   })
-  //   mediaSession.setActionHandler('pause', () => { // 暂停
-  //     this.player.pause()
-  //   })
-  //   const currentIndex = this.musicList.findIndex(item => item.id === currentMusic.id)
-  //   mediaSession.setActionHandler('previoustrack', () => { // 上一首
-  //     if (currentIndex === 0) { // 已经是第一首
-  //       this.player.switch(this.musicList.length - 1)
-  //     } else {
-  //       this.player.switch(currentIndex - 1)
-  //     }
-  //   })
-  //   mediaSession.setActionHandler('nexttrack', () => { // 下一首
-  //     if (currentIndex === this.musicList.length - 1) { // 已经是最后一首
-  //       this.player.switch(0)
-  //     } else {
-  //       this.player.switch(currentIndex + 1)
-  //     }
-  //   })
-  // }
+  musicPlay() {
+    if(!('mediaSession' in window.navigator)) return;
+    const player = <any>this.$refs.player
+    const currentMusic = player.currentMusic
+    const mediaSession: any = navigator.mediaSession
+    mediaSession.metadata = new MediaMetadata({
+      title: currentMusic.name,
+      artist: currentMusic.artist,
+      album: currentMusic.album,
+      artwork: [{src: currentMusic.pic}]
+    });
+    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)
+      } else {
+        player.switch(currentIndex - 1)
+      }
+    })
+    mediaSession.setActionHandler('nexttrack', () => { // 下一首
+      if (currentIndex === this.musicList.length - 1) { // 已经是最后一首
+        player.switch(0)
+      } else {
+        player.switch(currentIndex + 1)
+      }
+    })
+  }
 }
 
 

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

@@ -539,7 +539,10 @@
           this.rejectPlayPromise = null
         }
       },
-
+      switch(index) {
+        this.playIndex = index
+        this.thenPlay()
+      },
       // progress bar
 
       onProgressDragBegin (val) {