- 在 aplayer 上面增加了页面跳转、刷新会接着上一句继续播放、页面关闭其它页面继续播放功能
- 正在播放音乐的页面关闭后,下次打开浏览器也会接着上一句继续播放
- 发布了 npm 包 aplayer2
准备
- 获取音乐列表ID
- 打开
QQ音乐PC客户端
并登录,依次点击【音乐馆】【排行】【新歌榜】【批量操作】【全选】【添加到】【添加到新歌单】【输入歌单名并保存】 - 在左侧创建的歌单找到【歌单名】并单击,点击【分享】【复制链接https://c.y.qq.com/base/fcgi-bin/u?__=f346JO4t】
- 打开浏览器粘贴到地址栏https://y.qq.com/n/yqq/playlist/8037641642.html,音乐列表ID就是
8037641642
- 打开
配置
\_config.butterfly.yml
或者\themes\butterfly\_config.yml
yml
1 | # Inject the css and script (aplayer/meting)(******此处修改******) |
在\_config.yml
最下面添加
yml
1 | # 音乐 |
在任意(.md)文档中加入
yml
1 | # 配置参考文档:https://github.com/MoePlayer/hexo-tag-aplayer#meingjs-support-new-in-30 |
如何在整站配置?
修改文件themes\butterfly\layout\includes\layout.pug
plaintext
1 | if !page.meting // !page.meting 加上后,可以单独页面关闭音乐;改为 page.meting ,可在页面中单独开启 |
yml
1 | --- |
还有一种整站配置方法
yml
1 | inject: |
其它网站如何使用aplayer?
- 页面打开有弹窗
- 点击空白遮罩处默认取消播放,下次刷新会继续弹出
- 点击取消播放,下次刷新也不会弹出
- 点击播放,下次打开无弹框自动播放html
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236<script src="https://cdn.jsdelivr.net/npm/aplayer2@latest/dist/APlayer.min.js"></script>
<style>
@-webkit-keyframes showSweetAlert {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}
1% {
-webkit-transform: scale(.5);
transform: scale(.5)
}
45% {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
80% {
-webkit-transform: scale(.95);
transform: scale(.95)
}
to {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes showSweetAlert {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}
1% {
-webkit-transform: scale(.5);
transform: scale(.5)
}
45% {
-webkit-transform: scale(1.05);
transform: scale(1.05)
}
80% {
-webkit-transform: scale(.95);
transform: scale(.95)
}
to {
-webkit-transform: scale(1);
transform: scale(1)
}
}
.btn-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-size: 0;
overflow-y: auto;
background-color: rgba(0,0,0,.4);
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity .3s;
overflow: hidden;
}
.btn-overlay-show{
opacity: 1;
pointer-events: auto;
}
.btn-overlay .bg{
position: absolute;
width: 100%;
height: 100%;
}
.btn-overlay .modal {
-webkit-overflow-scrolling: touch;
outline: 0;
max-width: 478px;
opacity: 0;
width: 90%;
pointer-events: none;
background-color: #fff;
text-align: center;
border-radius: 5px;
display: inline-block;
vertical-align: middle;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
z-index: 10001;
transition: opacity .2s,-webkit-transform .3s;
transition: transform .3s,opacity .2s;
transition: transform .3s,opacity .2s,-webkit-transform .3s;
height: auto;
top: auto;
right: 0;
bottom: 44%;
left: 0;
display: block;
margin: auto;
}
.btn-overlay-show .modal{
opacity: 1;
pointer-events: auto;
box-sizing: border-box;
-webkit-animation: showSweetAlert .3s;
animation: showSweetAlert .3s;
will-change: transform;
}
.btn-overlay .text{
font-size: 16px;
position: relative;
float: none;
line-height: normal;
vertical-align: top;
text-align: left;
display: inline-block;
margin: 0;
padding: 0 10px;
font-weight: 400;
color: rgba(0,0,0,.64);
max-width: calc(100% - 20px);
overflow-wrap: break-word;
box-sizing: border-box;
}
.btn-overlay .text:first-child{
margin-top: 45px;
}
.btn-overlay .footer{
text-align: right;
padding-top: 13px;
margin-top: 13px;
padding: 13px 16px;
border-radius: inherit;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.btn-overlay .footer .btn{
background-color: #7cd1f9;
color: #fff;
border: none;
box-shadow: none;
border-radius: 5px;
font-weight: 600;
font-size: 14px;
padding: 10px 24px;
margin: 0;
cursor: pointer;
}
.btn-overlay .footer .btn-no{
color: #555;
background-color: #efefef;
}
.btn-overlay .footer .btn-yes{
margin-left: 10px;
}
.aplayer{
color: #626368;
}
.aplayer-body{max-width:400px;}
.aplayer .aplayer-icon{
line-height: 1;
}
</style>
<div class="btn-overlay">
<div class="bg" id="modalBg"></div>
<div class="modal">
<div class="text">是否需要播放我们精选的乐曲来欣赏一言呢?</div>
<div class="footer">
<div class="btn btn-no" id="btnNo">拒绝</div>
<div class="btn btn-yes" id="btnYes">好的</div>
</div>
</div>
</div>
<div class="aplayer"
data-id="8037641642"
data-server="tencent"
data-type="playlist"
data-mode="circulation"
data-autoplay="true"
data-mutex="true"
data-listmaxheight="340px"
data-preload="auto"
data-theme="#f7630c"
data-storagename="QQ新歌排行榜"
data-fixed="true"></div>
<script>
function meting(){
var aplayers=[],loadMeting=function(){function a(a,t){var e={container:a,audio:t,mini:null,fixed:null,autoplay:!1,mutex:!0,lrcType:3,listFolded:!1,preload:"auto",theme:"#2980b9",loop:"all",order:"list",volume:null,listMaxHeight:null,customAudioType:null,storageName:"metingjs"};if(t.length){t[0].lrc||(e.lrcType=0);var r={};for(var s in e){var n=s.toLowerCase();(a.dataset.hasOwnProperty(n)||a.dataset.hasOwnProperty(s)||null!==e[s])&&(r[s]=a.dataset[n]||a.dataset[s]||e[s],"true"!==r[s]&&"false"!==r[s]||(r[s]="true"==r[s]))}aplayers.push(new APlayer(r))}}var t="https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r";"undefined"!=typeof meting_api&&(t=meting_api);for(var e=0;e<aplayers.length;e++)if(!aplayers[e].container.classList.contains("no-destroy"))try{aplayers[e].destroy()}catch(a){console.log(a)}aplayers=[];for(var r=document.querySelectorAll(".aplayer"),s=0;s<r.length;s++){(function(){var e=r[s];if(e.classList.contains("no-reload"))return"continue";if(e.classList.contains("no-destroy")&&e.classList.add("no-reload"),e.dataset.id){var n=e.dataset.api||t;n=n.replace(":server",e.dataset.server),n=n.replace(":type",e.dataset.type),n=n.replace(":id",e.dataset.id),n=n.replace(":auth",e.dataset.auth),n=n.replace(":r",Math.random());var o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===o.readyState&&(o.status>=200&&o.status<300||304===o.status)){var t=JSON.parse(o.responseText);a(e,t)}},o.open("get",n,!0),o.send(null)}else if(e.dataset.url){var l=[{name:e.dataset.name||e.dataset.title||"Audio name",artist:e.dataset.artist||e.dataset.author||"Audio artist",url:e.dataset.url,cover:e.dataset.cover||e.dataset.pic,lrc:e.dataset.lrc,type:e.dataset.type||"auto"}];a(e,l)}})()}};document.addEventListener("DOMContentLoaded",loadMeting,!1);
}
function showBtnBox(){
return new Promise(function(resolve, reject){
$('#modalBg').on('click',function(){
resolve('1')
})
$('#btnNo').on('click',function(){
resolve('0')
})
$('#btnYes').on('click',function(){
resolve('2')
})
})
}
async function initAplayer(){
try{
let isShowMusic=localStorage.getItem('showmusic')||"1"
if(isShowMusic==='0'){
return
}
if(isShowMusic!=="2"){
$('.btn-overlay').addClass('btn-overlay-show');
isShowMusic=await showBtnBox()
$('.btn-overlay').removeClass('.btn-overlay-show')
setTimeout(function(){
$('#modalBg','#btnNo','#btnYes').unbind()
$('.btn-overlay').remove()
},360)
localStorage.setItem('showmusic',isShowMusic)
}
if(isShowMusic==='1'){
return
}
if(isShowMusic==='2'){
meting();
}
}catch(e){
console.error({e})
}
}
initAplayer()
</script>
文章作者: Baran
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 BARAN的小站🔥🔥🔥!
公告
想升级win11可以使用鲁大师检测下电脑是否支持,如果支持可以参考`鲁大师`中的教程进行安装,步骤非常简单,下载完`win11.iso`镜像,打开或解压后直接运行`setup.exe`即可开始安装。

2025-05-18 SUN | ![]() | 20.09*C | ![]() | 57% |
16:37:25 | ||||
18.221.236.28 | Columbus | PM |
那年今日
A.D.1986中国地质学家、古生物学家赵金科逝世
A.D.1765加拿大蒙特利尔发生大火灾
A.D.1804拿破仑·波拿巴称帝,建立法兰西第一帝国
A.D.1812英国刺客约翰·贝林罕逝世
A.D.1869虾夷共和国被日本所灭
A.D.1872英国著名哲学家、数理学家伯特兰·罗素出生
A.D.1883德国建筑师瓦尔特·格罗皮乌斯出生
A.D.1895中国通俗小说家张恨水出生
A.D.1911奥地利作曲家古斯塔夫·马勒逝世
A.D.1916辛亥革命党人陈其美逝世
A.D.1919英国著名首席芭蕾舞者玛格·芳登出生
A.D.1920美国圣海伦斯火山大爆发
A.D.1927好莱坞中国戏院开业
A.D.1966中国社会科学家邓拓逝世
A.D.1974印度试爆核弹
A.D.1986中国地质学家、古生物学家赵金科逝世
A.D.1765加拿大蒙特利尔发生大火灾