前置教程:
引用站外地址
Hexo Butterfly博客魔改的一点点基础
Ariasakaの小窝
最近心血来潮加了个aplayer,但是这个aplayer的体验特炸裂------每次刷新页面都得停止播放。对于我这种文章较短的站来说非常难受,于是我试了试pjax——————更炸裂了,说说、日历、轮播、弹幕等等一堆bug。
然后我采取了一种折中方案,使用js记录播放进度并且在每次刷新后都重新定位。(不过加载页面的过程是没歌的qwq)
js参考自:
引用站外地址
APlayer跳转页面保持音乐播放进度
l3yx's blog
因为原文章js的bug较多,且根据bf官方文档配置的Aplayer+Meetingjs的实现方式不太一样(因为1.2和2.0差别大),所以进行了修改。
此js需要配合官方文档的Meetingjs食用
引用站外地址
Butterfly添加全局吸底Aplayer教程
Butterfly
下面是代码,创建并在配置文件中引用即可完美食用
2022.12.2更新新版。
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 57 58
| function doStuff() { var flag=0; try{ ap=aplayers[0]; ap.list; flag=1; }catch{ setTimeout(doStuff, 50); 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(); } var g=true; ap.on("canplay",function(){ if(g){ ap.seek(window.musict); g=false; } }); }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()}); ap.on("play",function(){sessionStorage.setItem("musicPaused",0);ap.lrc.show()}); ap.audio.onvolumechange=function(){sessionStorage.setItem("musicVolume",ap.audio.volume);}; setInterval(function(){ musicIndex = ap.list.index; musicTime = ap.audio.currentTime; localStorage.setItem("musicIndex",musicIndex); sessionStorage.setItem("musicTime",musicTime); sessionStorage.setItem("musicMode",ap.mode); },200); } } doStuff();
|