I. Introduction
When we make our own player, compared with other large player websites, we will find that their players can use operating system-level controls to control the up and down buttons , while what we can do is only allow users to click the up and down buttons on the web page. Let’s cut the song, as follows:
Operating system media controls: The laptop keyboard has built-in sound control buttons. Clicking the button on the keyboard will display the sound controls on the screen. If you have headphones, you can also use the touch buttons on the headphones to switch up and down. In the mobile version of the browser, you can also see the browser's music controls by pulling down the notification bar. This is an operating system level operation. Below, we take the sound operation control of a Dell notebook as an example to compare and contrast the differences between large players and ours. You can also try it using a mobile browser or headphones.
On the official website of NetEase Cloud Music, you can see that the previous and next buttons are both lit, and there is information about the currently playing song.
Our self-made player does not display music information, and these buttons cannot be clicked. Even if your headphones have up and down buttons, there will be no response when clicked:
2. How to implement
NetEase Cloud's official website is also written in js. If they can do this, then we can do the same. I know that this must have a corresponding browser listening event , but I have been searching for a long time and have not found the corresponding browser API. Thanks to a big brother in the group for telling me that the name of this API is Media Session API, official website document : Media Session API | MDN
Access is very simple. You first write the functions such as the previous song and the next song (written in js, and switch the src to switch songs). Then the Media Session API provides several event listeners, and you just bind them one by one. The code snippet is as follows.
//设置操作系统音乐信息。下面的这个代码，每次切换歌曲都重新设置一下，信息就可以及时更新了。
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', 自己写的下一首函数);//下一首
}(Note: The navigator in the code is a predefined variable provided by the browser . You can use it directly. There is no need to define or create an instance. If you are using an SSR rendering framework such as Nuxt or Next , please make sure to hang it in the component. These codes are called only after loading.)
3. Realize the effect
You can see that these buttons can all be clicked, and the song information is synchronized with the song information of your own player. Clicking the button will also automatically call the function we wrote to switch songs.
For more requirements, please refer to the official website documentation: Media Session API | MDN
