为Hexo博客添加音乐播放器并保持跳转时不中断播放状态

最近用hexo弄了个我的博客，网站两翼的位置比较空，因此我在右边摆了一只看板娘做为平衡，就算左边不摆东西，其实已经比较和谐了。可是看到网上有一些我的博客炫酷的音乐播放器，正好置于左下固定位置，就想本身也弄一个也不错。

 音乐播放器的初步实现

其实若是单纯的只是插入一个音乐播放器是很简单的，只需从网易云或其余有相应功能的音乐网站找到外链播放器的代码，在合适的地方插入iframe元素便可

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=29751583&auto=1&height=66"></iframe>

插入sidebar的最终效果还不错

 发现的问题

如今播放音乐没有问题了，可是在跳转站内页面的时候音乐会自动中断很影响体验，而且外链播放器放在sidebar里进入文章详情页sidebar会消失

针对以上问题，使用aplayer + meting.js生成固定在底部的外链播放器，使用pjax进行页面路由切换的管理

 插一句：关于pjax

pjax主要是利用pushState来改变浏览器URL，利用ajax来请求页面，以实现不刷新浏览器更新页面，这样就能保证正在播放音乐中的播放器不受影响

 解决问题

播放器配置，具体能够参考Aplayer官方文档、MetingJS官方文档

<!-- 引用Aplayer和metingjs -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">

<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>

<div id="my-aplayer"

 class="aplayer" 

 data-id="5010430092" 

 data-server="netease" 

 data-type="playlist" 

 data-fixed="true" // 吸底模式能够固定播放器于页面底部

 data-autoplay="false" 

 data-order="list" 

 data-volume="0.55" 

 data-theme="#cc543a" 

 data-preload="auto" 

></div>

pjax配置，若是使用next主题应用pjax很简单，只需下载相应npm包而后在_config.xml里配置pjax:true，可是个人博客是本身找的主题，因此得手动引入而后配置，参考文档jquery-pjax文档

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

<script>

 // 对全部连接跳转事件绑定pjax容器container

 $(document).pjax('a[target!=_blank]', '#container', {fragment:'#container', timeout:8000})

</script>

至此就实现了一个位于浏览器底部的播放器，且在网站内切换页面音乐也不会中断

 后续

使用pjax托管页面后产生了一些问题，由于页面不刷新，因此切换页面后有一些原来会执行的javascript代码不会再执行，另一些监听事件也出了问题，解决方法也比较容易，把这些事件归入pjax管理，在pjax执行完后添加相应的回调函数便可

$(document).on('pjax:complete', function() {

 // 须要作的操做

})