Skip to content

Commit b1aa4b6

Browse files
DIYgodDIYgod
committed
release v1.10.0
1 parent 5bfde99 commit b1aa4b6

10 files changed

Lines changed: 152 additions & 11 deletions

File tree

‎dist/APlayer.min.css‎

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/APlayer.min.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/APlayer.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/APlayer.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/README.md‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ const ap = new APlayer(options);
6767
Name | Default | Description
6868
----|-------|----
6969
container | document.querySelector('.aplayer') | player container
70+
fixed | false | enable fixed mode, [see more details](https://aplayer.js.org/#/home?id=fixed-mode)
7071
mini | false | enable mini mode, [see more details](https://aplayer.js.org/#/home?id=mini-mode)
7172
autoplay | false | audio autoplay
7273
theme | '#b7daff' | main color
@@ -170,8 +171,20 @@ const ap = new APlayer({
170171
ap.notice('Amazing player', 2000, 0.8);
171172
```
172173

174+
+ `ap.skipBack()`: skip to previous audio
175+
176+
+ `ap.skipForward()`: skip to next audio
177+
173178
+ `ap.destroy()`: destroy player
174179

180+
+ `ap.lrc`
181+
182+
+ `ap.lrc.show()`: show lrc
183+
184+
+ `ap.lrc.hide()`: hide lrc
185+
186+
+ `ap.lrc.toggle()`: toggle lrc between show and hide
187+
175188
+ `ap.list`
176189

177190
+ `ap.list.show()`: show list
@@ -264,6 +277,8 @@ Player events
264277
- noticeshow
265278
- noticehide
266279
- destroy
280+
- lrcshow
281+
- lrchide
267282

268283
## LRC
269284

@@ -404,10 +419,33 @@ const ap = new APlayer({
404419
});
405420
```
406421

422+
## Fixed mode
423+
424+
APlayer can be fixed to page bottom via fixed mode, fixed mode is a very different mode, enjoy it!
425+
426+
<div class="aplayer-wrap">
427+
<div id="aplayer9"><button class="docute-button load">Click to load player</div>
428+
</div>
429+
430+
```js
431+
const ap = new APlayer({
432+
container: document.getElementById('player'),
433+
fixed: true,
434+
audio: [{
435+
name: 'name',
436+
artist: 'artist',
437+
url: 'url.mp3',
438+
cover: 'cover.jpg',
439+
}]
440+
});
441+
```
442+
407443
## Mini mode
408444

409445
If you don't have enough space for normal player, mini mode might be your choice.
410446

447+
Please note that mini mode is conflicted with fixed mode.
448+
411449
<div class="aplayer-wrap">
412450
<div id="aplayer6"><button class="docute-button load">Click to load player</div>
413451
</div>
@@ -525,8 +563,8 @@ const setTheme = (index) => {
525563
}
526564
};
527565
setTheme(ap.list.index);
528-
ap.on('listswitch', (index) => {
529-
setTheme(index);
566+
ap.on('listswitch', (data) => {
567+
setTheme(data.index);
530568
});
531569
```
532570

‎docs/config.js‎

Lines changed: 63 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ function player () {
5656
context.event.on('landing:updated', function () {
5757
console.log('landing:updated');
5858
clearPlayer();
59+
aplayer0();
5960
aplayer1();
6061
});
6162
context.event.on('content:updated', function () {
@@ -72,8 +73,8 @@ function player () {
7273

7374
function clearPlayer () {
7475
for (let i = 0; i < 10; i++) {
75-
if (window['ap' + (i + 1)]) {
76-
window['ap' + (i + 1)].destroy();
76+
if (window['ap' + i]) {
77+
window['ap' + i].destroy();
7778
}
7879
}
7980
}
@@ -108,6 +109,36 @@ function aplayer1 () {
108109
});
109110
}
110111

112+
function aplayer0 () {
113+
window.ap0 = new APlayer({
114+
container: document.getElementById('aplayer0'),
115+
fixed: true,
116+
lrcType: 3,
117+
audio: [{
118+
name: '前前前世',
119+
artist: 'RADWIMPS',
120+
url: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
121+
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
122+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc',
123+
theme: '#505d6b'
124+
}, {
125+
name: 'トリカゴ',
126+
artist: 'XX:me',
127+
url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
128+
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
129+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc',
130+
theme: '#46718b'
131+
}, {
132+
name: '光るなら',
133+
artist: 'Goose house',
134+
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
135+
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
136+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
137+
theme: '#ebd0c2'
138+
}]
139+
});
140+
}
141+
111142
function aplayer2 () {
112143
window.ap2 = new APlayer({
113144
container: document.getElementById('aplayer2'),
@@ -279,4 +310,34 @@ function aplayer8 () {
279310
});
280311
}
281312
});
313+
}
314+
315+
function aplayer9 () {
316+
window.ap9 = new APlayer({
317+
container: document.getElementById('aplayer9'),
318+
fixed: true,
319+
lrcType: 3,
320+
audio: [{
321+
name: '光るなら',
322+
artist: 'Goose house',
323+
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
324+
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
325+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
326+
theme: '#ebd0c2'
327+
}, {
328+
name: 'トリカゴ',
329+
artist: 'XX:me',
330+
url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
331+
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
332+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc',
333+
theme: '#46718b'
334+
}, {
335+
name: '前前前世',
336+
artist: 'RADWIMPS',
337+
url: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
338+
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
339+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc',
340+
theme: '#505d6b'
341+
}]
342+
});
282343
}

‎docs/index.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@
1616

1717
gtag('config', 'UA-48084758-8');
1818
</script>
19-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.9.1/dist/APlayer.min.css">
19+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
2020
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
21-
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.9.1/dist/APlayer.min.js"></script>
21+
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
2222
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/color-thief.js"></script>
2323
<style>
2424
body {
@@ -31,6 +31,9 @@
3131
max-width: 700px;
3232
margin: 20px 0;
3333
}
34+
.sidebar-toggle {
35+
z-index: 90;
36+
}
3437
</style>
3538
</head>
3639
<body>

‎docs/landing.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ <h3>🍭 Wow, such a beautiful HTML5 music player.</h3>
55
<div class="aplayer-wrap">
66
<div id="aplayer1"></div>
77
</div>
8+
<div id="aplayer0"></div>
89

910
<div class="landing-buttons">
1011
<a class="landing-button" target="_blank" href="https://github.com/MoePlayer/APlayer">

‎docs/zh-Hans/README.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ const ap = new APlayer(options);
6868
名称 | 默认值 | 描述
6969
----|-------|----
7070
container | document.querySelector('.aplayer') | 播放器容器元素
71+
fixed | false | 开启吸底模式, [详情](https://aplayer.js.org/#/home?id=fixed-mode)
7172
mini | false | 开启迷你模式, [详情](https://aplayer.js.org/#/home?id=mini-mode)
7273
autoplay | false | 音频自动播放
7374
theme | '#b7daff' | 主题色
@@ -171,8 +172,20 @@ const ap = new APlayer({
171172
ap.notice('Amazing player', 2000, 0.8);
172173
```
173174

175+
+ `ap.skipBack()`: 切换到下一首音频
176+
177+
+ `ap.skipForward()`: 切换到上一首音频
178+
174179
+ `ap.destroy()`: 销毁播放器
175180

181+
+ `ap.lrc`
182+
183+
+ `ap.lrc.show()`: 显示歌词
184+
185+
+ `ap.lrc.hide()`: 隐藏歌词
186+
187+
+ `ap.lrc.toggle()`: 显示/隐藏歌词
188+
176189
+ `ap.list`
177190

178191
+ `ap.list.show()`: 显示播放列表
@@ -265,6 +278,8 @@ ap.on('ended', function () {
265278
- noticeshow
266279
- noticehide
267280
- destroy
281+
- lrcshow
282+
- lrchide
268283

269284
## 歌词
270285

@@ -404,11 +419,33 @@ const ap = new APlayer({
404419
]
405420
});
406421
```
422+
## 吸底模式
423+
424+
APlayer 可以通过吸底模式固定在页面底部，这种模式跟普通模式有很大不同。
425+
426+
<div class="aplayer-wrap">
427+
<div id="aplayer9"><button class="docute-button load">点击加载播放器</div>
428+
</div>
429+
430+
```js
431+
const ap = new APlayer({
432+
container: document.getElementById('player'),
433+
fixed: true,
434+
audio: [{
435+
name: 'name',
436+
artist: 'artist',
437+
url: 'url.mp3',
438+
cover: 'cover.jpg',
439+
}]
440+
});
441+
```
407442

408443
## 迷你模式
409444

410445
如果你没有足够空间来放置正常模式的播放器，那么你可以考虑使用迷你模式。
411446

447+
请注意迷你模式与吸底模式冲突。
448+
412449
<div class="aplayer-wrap">
413450
<div id="aplayer6"><button class="docute-button load">点击加载播放器</div>
414451
</div>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "aplayer",
3-
"version": "1.9.1",
3+
"version": "1.10.0",
44
"description": "Wow, such a beautiful html5 music player",
55
"main": "dist/APlayer.min.js",
66
"style": "dist/APlayer.min.css",

0 commit comments

Comments
 (0)