JS实现页面切换播放器不停止

最近博客增加了页面悬浮的音乐播放器，使用了一段时间后觉得问题不少，主要是页面切换后音乐也会停止。于是百度了一番，找到一个更适合我的使用JS来解决问题的方法，主要实现思路是把音乐播放的进度存在浏览器中，在页面切换后再取出存储的数据set进播放器。

这里有个写好的页面参考：demo参考

demo中使用的存储方式是localStorage，考虑到localStorage缓存默认永久保存，并且标签全部共享，这就造成了关闭浏览器缓存依然存在，开启多个标签访问博客时可能多个标签页同时播放音乐，所以我这里改用sessionStorage，sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除，示例：

//不断循环记录播放进度
window.setInterval(function () {
    //检测是否支持本地存储
    if (typeof (Storage) !== 'undefined') {
        //进度数据获取方法这里就不贴了，播放器不同方式不同
        //将播放进度数据存入本地存储中
        window.sessionStorage.setItem('musicSrc', audio.musicSrc);
        window.sessionStorage.setItem('currentTime', currentTime);
    }
}, 500);

页面切换后如果发现有本地存储，按存储信息进行播放

    //从本地存储中获取存放的音乐信息并set进播放器
    if (sessionStorage.getItem('musicSrc') !== null) {
        var musicSrc = sessionStorage.getItem('musicIndex');//歌曲下标
        var currentTime = sessionStorage.getItem('currentTime');//播放时间
        audio.src = musicSrc;
        audio.currentTime = currentTime;
        audio.play();
    }

文章参考：JS实现html页面切换背景音乐不间断网页跳转背景音乐不停止播放