はじめに

AudioStation の Web プレイヤーで音楽を聴く際に、とても面倒な問題があります。それは、システムのショートカットキーを使って、前の曲・次の曲・再生/一時停止 などの操作ができないことです。そのため、いちいちプレイヤーのページに戻って手動でクリックする必要があります。

このような Web アプリの メディアコントロールの問題を改善するため、Google は Media Session API という標準を提案しました。

Media Session API の仕様は 2017年に W3C によって策定 され、現在では主要なブラウザでサポートされています。AudioStation の Web ページ上でカスタム JavaScript を実行するだけで、Web プレイヤーがシステムレベルのメディアコントロールをサポートできるようになります。

実装方法

以下のコードを AudioStation の コンソールで実行 すれば、Media Session API に対応させることができます。また、より簡単に適用できるように Tampermonkey（油猴）スクリプト も作成しました： 🔗 Tampermonkey スクリプト

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)

なぜ setInterval を使うのか？

最初は、AudioStation で使用されている SoundManager コンポーネントの play メソッドを上書き し、Media Session API のメタデータや再生イベントのハンドリングを組み込もうとしました。

しかし、macOS の Chrome では互換性の問題 があり、メタデータが適用されないことがある という不具合が発生しました。そのため、別の方法を試すことにしました。

すると、意外にも setInterval を使うシンプルな方法が一番安定 していました！
手抜きな方法が意外と最強だった、というオチですね（笑）

赏

Software Architect