一、前言
当我们自制播放器时，和其它大型播放器网站对比就会发现，他们的播放器，可以用操作系统级的控件来操控上下首，而我们做的只能让用户在网页中点击上下首按钮来切歌，如下：
操作系统媒体控件： 笔记本电脑的键盘上自带声音控件按钮，点击键盘上的按钮将会在屏幕上显示声音控件。有耳机的还可以用耳机上的触控按钮来切换上下首、手机版的浏览器下拉通知栏也能看到浏览器的音乐控件。这是操作系统级别的操作。下方以戴尔笔记本的声音操作控件为例，对比查看大型播放器和我们的区别。大家也可以用手机浏览器或者耳机尝试。
在网易云音乐官网中，可以看到上一首和下一首按钮都是亮着的，并且有当前播放歌曲的信息。
而我们自制的播放器，不会显示音乐信息，这些按钮也不可以点击，就算你的耳机有上下首按钮，点了也是没反应的：
二、如何实现
网易云官网也是用js写的，他们能做到这一点，那么我们也一样能做到。我知道这个肯定是有对应的浏览器监听事件的，但是我找了许久，都没有找到对应的浏览器API，感谢群里的一位大哥告诉我，这个API的名字叫做 Media Session API ， 官网文档：Media Session API | MDN
接入很简单，你先把上一首下一首等函数写好（用js写，通过切换src来实现切歌），然后 Media Session API 提供了几个事件监听，你一个个绑定就行，代码片段如下。
//设置操作系统音乐信息。下面的这个代码，每次切换歌曲都重新设置一下，信息就可以及时更新了。
const change = ()=>{
navigator.mediaSession.metadata = new MediaMetadata({
title: '这里写当前音乐标题',
artist: '作者名称',
album: '专辑名称',
artwork: [{ src: '当前音乐图片路径' }]
});
}
//下面这些代码，整个生命周期执行一次即可，避免造成重复绑定事件！！！
const init = ()=>{
navigator.mediaSession.setActionHandler('play', 自己写的播放函数);
navigator.mediaSession.setActionHandler('pause', 自己写的暂停函数);
// navigator.mediaSession.setActionHandler('seekbackward',()=>{} );//后退
// navigator.mediaSession.setActionHandler('seekforward', ()=>{});//前进
navigator.mediaSession.setActionHandler('previoustrack', 自己写的上一首函数);//上一首
navigator.mediaSession.setActionHandler('nexttrack', 自己写的下一首函数);//下一首
}
（注：代码中的navigator是一个浏览器提供的预定义变量，直接使用就行，不需要定义，也不需要创建实例。如果你用的是Nuxt、Next这种SSR渲染框架，请确保在组件挂载之后才调用这些代码。）
三、实现效果
可以看到这些按钮都能点击了，而且歌曲信息和自己播放器的歌曲信息同步。点击按钮也会自动调用我们写的函数来进行切歌。
更多需求可以查阅官网文档 ：Media Session API | MDN
