为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() {
    // 需要做的操作
})

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/17261.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注