引言

这个aplayer的体验特炸裂——每次刷新页面都得停止播放。对于我这种文章较短的站来说非常难受,于是我试了试pjax——————更炸裂了,说说、日历、轮播、弹幕等等一堆bug。

然后我采取了一种折中方案,使用js记录播放进度并且在每次刷新后都重新定位。(不过加载页面的过程是没歌的)

解决方案

js代码参考自:APlayer跳转页面保持音乐播放进度

因为原文章js代码的bug较多,且根据Butterfly官方文档配置的Aplayer+Meetingjs的实现方式不太一样(因为1.2和2.0差别大),所以进行了修改。

此js需要配合官方文档的Meetingjs使用:Butterfly添加全局吸底Aplayer教程

下面是代码,创建并在配置文件中引用即可完美使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function doStuff() {
var flag=0;
try{
ap=aplayers[0]; //aplayer对象的存放位置挺离谱的
ap.list;
flag=1;
}catch{
setTimeout(doStuff, 50);//等待aplayer对象被创建(没找到初始化实例的地方只能这样了,这个判断代码是StackOverflow上面扒的(因为自己是个蒟蒻
return;
}
if(flag){
ap.lrc.hide();//自带播放暂停时显隐歌词,可以删
document.getElementsByClassName("aplayer-icon-menu")[0].click()
if(localStorage.getItem("musicIndex")!=null){
musicIndex = localStorage.getItem("musicIndex");
ap.list.switch(musicIndex);
//歌曲可以本地储存下次访问体验更好
}
if(sessionStorage.getItem("musicTime") != null){
window.musict = sessionStorage.getItem("musicTime");
ap.setMode(sessionStorage.getItem("musicMode"));
if(sessionStorage.getItem("musicPaused")!='1'){
ap.play();
}
// setTimeout(function(){
// ap.seek(window.musict); //seek炸了我很久,最后决定加个延时(本来要用canplay但是莫名鬼畜了)
// },500);
var g=true; //加个变量以防鬼畜但是不知道怎么节流qwq
ap.on("canplay",function(){
if(g){
ap.seek(window.musict);
g=false;//如果不加oncanplay的话会seek失败就这原因炸很久
}
});
}else{
sessionStorage.setItem("musicPaused",1);
ap.setMode("mini"); //新版添加了保存展开状态功能
}
if(sessionStorage.getItem("musicVolume") != null){
ap.audio.volume=Number(sessionStorage.getItem("musicVolume"));
}
ap.on("pause",function(){sessionStorage.setItem("musicPaused",1);ap.lrc.hide()});//原基础上加了个检测暂停免得切换页面后爆零(bushi)(指社死)
ap.on("play",function(){sessionStorage.setItem("musicPaused",0);ap.lrc.show()});//自带播放暂停时显隐歌词,后面那句可以删,上同
ap.audio.onvolumechange=function(){sessionStorage.setItem("musicVolume",ap.audio.volume);};//新版增加保存音量免得切换页面爆零(doge
setInterval(function(){
musicIndex = ap.list.index;
musicTime = ap.audio.currentTime;
localStorage.setItem("musicIndex",musicIndex);
//保存播放进度
sessionStorage.setItem("musicTime",musicTime);
sessionStorage.setItem("musicMode",ap.mode);
//保存展开状态
},200);//节流,200ms精度感知不大qwq
}
}
doStuff();

参考链接: https://yisous.xyz/posts/614f1131/