前言

在AudioStation Web播放器上听歌有个非常麻烦的问题:无法利用系统快捷键控制网页播放器的进行诸如上一首、下一首、暂停/播放这些动作,只能切回播放器的页面手动点击来操作。为了解决Web应用在媒体控制方面的优化,Google提出了Media Session API的标准。

Media Session API标准在2017年W3C就完成了规范制定,目前在主流浏览器都得到了支持。我们只需要在AudioStation的Web页面上执行一段自定义JS,就能让网页播放器支持系统级别的媒体控制。

实现

将以下代码AudioStation在控制台执行,也可以使用我写的油猴插件:https://greasyfork.org/en/scripts/526802-audiostation-support-the-mediasession-api

setInterval(function() {
    if (!navigator.mediaSession) {
        return
    }
    var main = SYNO?.SDS?.AudioStation?.Window?.getPanelScope("SYNO.SDS.AudioStation.Main")
    if (!main) {
        return
    }
    navigator.mediaSession.metadata = new MediaMetadata({
        title: main.playerPanel.Ctrl.getCurrentTitle(),
        artist: main.playerPanel.Ctrl.getCurrentArtist(),
        album: main.playerPanel.Ctrl.getCurrentAlbum(),
        artwork: [{
            src: main.playerPanel.Ctrl.getCurrentCover(),
        }],
    });
    navigator.mediaSession.setActionHandler('play', function() {
        main.audioPlayer.doPlay();
    });
    navigator.mediaSession.setActionHandler('pause', function() {
        main.audioPlayer.doPlay();
    });
    navigator.mediaSession.setActionHandler('previoustrack', function() {
        main.audioPlayer.doPrevious();
    });
    navigator.mediaSession.setActionHandler('nexttrack', function() {
        main.audioPlayer.doNext();
    });
},
1000)

Why is setInterval?

尝试过重写AudioStation使用的SoundManager组件的play方法实现mediaSession元数据以及播放事件绑定,但是在macOS的chrome上总是有兼容性问题:有概率metadata设置不上去,故换实现思路。

没想到懒办法的setInterval效果拔群:)


The ACG Software Architect