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();
}
正文到此结束