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

音乐播放器的初步实现

 <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会消失

关于pjax

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

解决问题


<!-- 引用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() {

 // 需要做的操作

})

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Automan之鸿鹄

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值