原创

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>

虽然页面切换时会有那么一小会的中断,但是最终也算是续命成功啦,不想动手改页面就这样吧,哈哈。

正文到此结束