JS实现APlayer切换页面续播
Aplayer
播放器实现切换页面不停止可以通过引入Pjax
或者使用iframe
来实现,但是我实在懒得去修改页面,所以这里采取用js
记录播放进度信息,切换页面后再取出恢复的办法实现续播功能。
实现代码:
<script>
//dom元素加载完执行
$(document).ready(function(){
//获取记录,如果有数据就续播
if (typeof (Storage) !== 'undefined' && sessionStorage.getItem('playStatus') !== null) {
//获取保存的播放记录
var index = sessionStorage.getItem('musicIndex');
var playStatus = sessionStorage.getItem('playStatus');
var currentTime = sessionStorage.getItem('currentTime');
var mode = sessionStorage.getItem('mode');
var list = sessionStorage.getItem('list');
var lrc = sessionStorage.getItem('lrc');
ap.list.switch(index); //跳转到指定下标歌曲
ap.setMode(mode);
lrc==='false' ? ap.lrc && ap.lrc.show() : (ap.template.lrcButton.classList.add("aplayer-icon-lrc-inactivity"), ap.lrc && ap.lrc.hide())
list==='false' ? ap.list.show() : ap.list.hide(); //显示播放列表
ap.audio.currentTime = currentTime; //设置播放进度
if(playStatus === 'false'){ //如果播放状态不是暂停,就播放
ap.play();
}
}
//不断循环记录播放进度
setInterval(function () {
//检测是否支持本地存储
if (typeof (Storage) !== 'undefined') {
//把播放进度等数据存入sessionStorage存储中
window.sessionStorage.setItem('playStatus', ap.audio.paused);
window.sessionStorage.setItem('currentTime', ap.audio.currentTime);
window.sessionStorage.setItem('musicIndex', ap.list.index);
window.sessionStorage.setItem('mode', ap.mode);
window.sessionStorage.setItem('list', ap.template.list.classList.contains("aplayer-list-hide"));
window.sessionStorage.setItem('lrc', ap.template.lrcButton.classList.contains("aplayer-icon-lrc-inactivity"));
}
}, 100);
})
</script>
虽然页面切换时会有那么一小会的中断,但是最终也算是续命成功啦,不想动手改页面就这样吧,哈哈。
正文到此结束