共计 1764 个字符，预计需要花费 5 分钟才能阅读完成。
最近用 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() {// 需要做的操作})