实现跨页面音乐连续播放功能

发布日期：2024-02-14

最近有一个需求：让音乐播放器在用户浏览不同页面时保持连续播放，而不是每次页面跳转都中断重新开始。

核心实现

实现逻辑非常简洁，主要包含以下几个部分：

1. 状态保存

监听音频的播放、暂停和进度事件，实时将状态保存到 sessionStorage：

// 监听播放事件
audioPlayer.addEventListener('play', () => {
    sessionStorage.setItem('isPlaying', 'true');
});

// 监听暂停事件
audioPlayer.addEventListener('pause', () => {
    sessionStorage.setItem('isPlaying', 'false');
});

// 监听播放进度
audioPlayer.addEventListener('timeupdate', () => {
    sessionStorage.setItem('audioCurrentTime', audioPlayer.currentTime);
});

// 页面卸载前保存最终状态
window.addEventListener('beforeunload', () => {
    sessionStorage.setItem('audioCurrentTime', audioPlayer.currentTime);
    sessionStorage.setItem('isPlaying', isPlaying);
});

2. 状态恢复

页面加载时，检查 sessionStorage 中是否有之前的播放记录，如果有则自动恢复：

// 恢复播放状态
if (sessionStorage.getItem('isPlaying') === 'true') {
    audioPlayer.play().catch(error => {
        console.warn('自动播放被阻止:', error);
    });
}

// 恢复播放位置
if (sessionStorage.getItem('audioCurrentTime')) {
    audioPlayer.currentTime = parseFloat(sessionStorage.getItem('audioCurrentTime'));
}

现代浏览器对自动播放有严格限制，通常需要用户交互才能播放音频。在这个实现中：

用户在第一个页面点击播放后，浏览器会认为该站点已获得授权
后续页面跳转时，由于是同站点的会话延续，大多数情况下可以自动播放
如果自动播放被阻止，用户只需点击页面任意位置即可继续播放