使用APlayer和MetingJS解决博客页面跳转音乐暂停的问题

之前使用APlayer播放器时会出现点击文章或链接音乐播放器就暂停了，我找了许多方法尝试都不行，终于发现使用MetingJS插件搭配APlayer可以完美解决这个问题，方法也很简单。可以参考MetingJS文档

1.打开路径 themes/yilia/layout/_partial/left-col.ejs，在最后一个</nav>上面添加以下代码

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<div style="opacity:0.7;text-align:left">
    <meting-js
        server="netease"
        type="playlist"
        id="7638842540"
        fixed="true"
        volume="0.3"
        order="list"
        >
    </meting-js>
</div>

<script>
    ap = null
    Object.defineProperty(document.querySelector('meting-js'),"aplayer",{
        set: function(aplayer) {
            ap=aplayer
            ready();
        }
    });
    
    isRecover = false;
    function ready(){
        ap.on('canplay', function () {
            if(!isRecover){
                if(localStorage.getItem("musicIndex") != null){
                    musicIndex = localStorage.getItem("musicIndex");
                    musicTime = localStorage.getItem("musicTime");
                    if(ap.list.index != musicIndex){
                        ap.list.switch(musicIndex);
                    }else{
                        ap.seek(musicTime);
                        ap.play();
                        localStorage.clear();
                        isRecover = true;
                    }
                }else{
                    isRecover = true;
                }
            }
        });
    }

    window.onbeforeunload = function(event) {
        if(!ap.audio.paused){
            musicIndex = ap.list.index;
            musicTime = ap.audio.currentTime;
            localStorage.setItem("musicIndex",musicIndex);
            localStorage.setItem("musicTime",musicTime);
        }
    };
</script>

注：meting-js中的id对应的是网易云的歌单id

赏

感谢支持

支付宝

微信