原创

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


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

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

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

//不断循环记录播放进度
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页面切换背景音乐不间断网页跳转背景音乐不停止播放

正文到此结束
本文目录