如何将HTMLMediaElement与Android播放控件关联，实现上/下一曲功能

你需要使用Media Session API来实现系统通知栏媒体控件与自定义播放器的交互，audioTracks属性是用来切换音频轨道（如多语言音轨）的，和播放列表的上/下一曲完全无关，找错API了。

具体实现步骤：

• 检测浏览器是否支持Media Session API（Bromite基于Chromium，完全支持）
• 绑定系统控件的previoustrack、nexttrack等事件到你的播放器方法
• 同步播放状态与系统控件，可选设置媒体元数据优化通知栏显示

代码示例 #

假设你的播放器已经实现了prevTrack()和nextTrack()方法，音频元素ID为player-audio：

const audio = document.getElementById('player-audio');

if ('mediaSession' in navigator) {
    // 可选：更新媒体元数据，让通知栏显示当前歌曲信息
    function updateMediaMeta(title, artist, album, coverSrc) {
        navigator.mediaSession.metadata = new MediaMetadata({
            title: title,
            artist: artist,
            album: album,
            artwork: [{ src: coverSrc, sizes: '128x128', type: 'image/jpeg' }]
        });
    }

    // 绑定系统控件事件到自定义播放器方法
    navigator.mediaSession.setActionHandler('play', () => audio.play());
    navigator.mediaSession.setActionHandler('pause', () => audio.pause());
    navigator.mediaSession.setActionHandler('previoustrack', () => prevTrack());
    navigator.mediaSession.setActionHandler('nexttrack', () => nextTrack());

    // 同步播放状态到系统控件
    audio.addEventListener('play', () => {
        navigator.mediaSession.playbackState = 'playing';
    });

    audio.addEventListener('pause', () => {
        navigator.mediaSession.playbackState = 'paused';
    });

    // 切换歌曲时，在你的prevTrack/nextTrack方法里调用updateMediaMeta更新通知栏信息
}

关键注意事项 #

• 必须在用户主动交互（比如点击播放按钮）后初始化Media Session，避免浏览器自动播放限制
• 每次切换歌曲都要更新mediaSession.metadata，否则通知栏会一直显示旧歌曲信息
• playbackState必须和音频实际播放状态同步，系统控件才能正确显示播放/暂停状态

内容的提问来源于stack exchange，提问作者Aurélien Pierre