Skip to content

Commit 9c983b0

Browse files
DIYgodDIYgod
committed
small fix and docs
1 parent 95ee708 commit 9c983b0

6 files changed

Lines changed: 115 additions & 77 deletions

File tree

‎demo/demo.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,12 +136,16 @@ const ap5 = new APlayer({
136136
}]
137137
});
138138
const colorThief = new ColorThief();
139-
ap5.on('switchaudio', (index) => {
140-
if (!ap5.options.audio[index].theme) {
141-
colorThief.getColorAsync(ap5.options.audio[index].cover, function (color) {
139+
const setTheme = (index) => {
140+
if (!ap5.list.audios[index].theme) {
141+
colorThief.getColorAsync(ap5.list.audios[index].cover, function (color) {
142142
ap5.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
143143
});
144144
}
145+
};
146+
setTheme(ap5.list.index);
147+
ap5.on('listswitch', (index) => {
148+
setTheme(index);
145149
});
146150

147151
const ap6 = new APlayer({

‎docs/README.md‎

Lines changed: 50 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ mutex | true | prevent to play multiple player at the same time, pause other pla
8787
lrcType | 0 | [see more details](https://aplayer.js.org/#/home?id=lrc)
8888
listFolded | false | indicate whether list should folded at first
8989
listMaxHeight | - | list max height
90+
storageName | 'aplayer-setting' | localStorage key that store player setting
9091

9192
For example:
9293

@@ -147,56 +148,64 @@ const ap = new APlayer({
147148

148149
+ `ap.on(event: string, handler: function)`: bind audio and player events, [see more details](https://aplayer.js.org/#/home?id=event-binding)
149150

150-
+ `ap.switchAudio(index: number)`: switch audio list
151+
+ `ap.volume(percentage: number, nostorage: boolean)`: set audio volume
151152

152153
```js
153-
ap.switchAudio(1);
154+
ap.volume(0.1, true);
154155
```
155156

156-
+ `ap.addAudio(audio)`: add new audios to the list
157+
+ `ap.theme(color: string, index: number)`: set player theme, the default of index is current audio index
157158

158159
```js
159-
ap.addAudio([
160-
{
161-
name: 'name',
162-
artist: 'artist',
163-
url: 'url.mp3',
164-
cover: 'cover.jpg',
165-
lrc: 'lrc.lrc',
166-
theme: '#ebd0c2'
167-
}
168-
]);
160+
ap.theme('#000', 0);
169161
```
170162

171-
+ `ap.removeAudio(index: number)`: remove audio from the list
163+
+ `ap.setMode(mode: string)`: set player mode, the value of mode should be 'mini' or 'normal'
172164

173-
```js
174-
ap.removeAudio(1);
175-
```
165+
+ `ap.mode`: return current player mode, 'mini' or 'normal'
176166

177-
+ `ap.volume(percentage: number, nostorage: boolean)`: set audio volume
167+
+ `ap.notice(text: string, time: number, opacity: number)`: show message, the unit of time is millisecond, the default of time is 2000, the default of opacity is 0.8, setting time to 0 can disable notice autohide.
178168

179169
```js
180-
ap.volume(0.1, true);
170+
ap.notice('Amazing player', 2000, 0.8);
181171
```
182172

183-
+ `ap.theme(color: string, index: number)`: set player theme, the default of index is current audio index
173+
+ `ap.destroy()`: destroy player
174+
175+
+ `ap.list`
176+
177+
+ `ap.list.show()`: show list
178+
179+
+ `ap.list.hide()`: hide list
180+
181+
+ `ap.list.toggle()`: toggle list between show and hide
182+
183+
+ `ap.list.add(audios: array | object)`: add new audios to the list
184184

185185
```js
186-
ap.theme('#000', 0);
186+
ap.list.add([{
187+
name: 'name',
188+
artist: 'artist',
189+
url: 'url.mp3',
190+
cover: 'cover.jpg',
191+
lrc: 'lrc.lrc',
192+
theme: '#ebd0c2'
193+
}]);
187194
```
188195

189-
+ `ap.setMode(mode: string)`: set player mode, the value of mode should be 'mini' or 'normal'
196+
+ `ap.list.remove(index: number)`: remove an audio from the list
190197

191-
+ `ap.mode`: return current player mode, 'mini' or 'normal'
198+
```js
199+
ap.list.remove(1);
200+
```
192201

193-
+ `ap.notice(text: string, time: number, opacity: number)`: show message, the unit of time is millisecond, the default of time is 2000, the default of opacity is 0.8, setting time to 0 can disable notice autohide.
202+
+ `ap.list.switch()`: switch to an audio in the list
194203

195204
```js
196-
ap.notice('Amazing player', 2000, 0.8);
205+
ap.list.switch(1);
197206
```
198207

199-
+ `ap.destroy()`: destroy player
208+
+ `ap.list.clear()`: remove all audios from the list
200209

201210
+ `ap.audio`: native audio
202211

@@ -246,12 +255,15 @@ Video events
246255

247256
Player events
248257

249-
- switchaudio
250-
- addaudio
251-
- removeaudio
258+
- listshow
259+
- listhide
260+
- listadd
261+
- listremove
262+
- listswitch
263+
- listclear
264+
- noticeshow
265+
- noticehide
252266
- destroy
253-
- notice_show
254-
- notice_hide
255267

256268
## LRC
257269

@@ -505,12 +517,16 @@ const ap = new APlayer({
505517
});
506518

507519
const colorThief = new ColorThief();
508-
ap.on('switchaudio', (index) => {
509-
if (!ap.options.audio[index].theme) {
510-
colorThief.getColorAsync(ap.options.audio[index].cover, (color) => {
520+
const setTheme = (index) => {
521+
if (!ap.list.audios[index].theme) {
522+
colorThief.getColorAsync(ap.list.audios[index].cover, function (color) {
511523
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
512524
});
513525
}
526+
};
527+
setTheme(ap.list.index);
528+
ap.on('listswitch', (index) => {
529+
setTheme(index);
514530
});
515531
```
516532

‎docs/zh-Hans/README.md‎

Lines changed: 51 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ mutex | true | 互斥，阻止多个播放器同时播放，当前播放器播
8888
lrcType | 0 | [详情](https://aplayer.js.org/#/home?id=lrc)
8989
listFolded | false | 列表默认折叠
9090
listMaxHeight | - | 列表最大高度
91+
storageName | 'aplayer-setting' | 存储播放器设置的 localStorage key
9192

9293
例如:
9394

@@ -147,33 +148,6 @@ const ap = new APlayer({
147148
+ `ap.toggle()`: 切换播放和暂停
148149

149150
+ `ap.on(event: string, handler: function)`: 绑定音频和播放器事件，[详情](https://aplayer.js.org/#/home?id=event-binding)
150-
151-
+ `ap.switchAudio(index: number)`: 切换音频列表
152-
153-
```js
154-
ap.switchAudio(1);
155-
```
156-
157-
+ `ap.addAudio(audio)`: 向列表添加新的音频
158-
159-
```js
160-
ap.addAudio([
161-
{
162-
name: 'name',
163-
artist: 'artist',
164-
url: 'url.mp3',
165-
cover: 'cover.jpg',
166-
lrc: 'lrc.lrc',
167-
theme: '#ebd0c2'
168-
}
169-
]);
170-
```
171-
172-
+ `ap.removeAudio(index: number)`: 从列表删除音频
173-
174-
```js
175-
ap.removeAudio(1);
176-
```
177151

178152
+ `ap.volume(percentage: number, nostorage: boolean)`: 设置音频音量
179153

@@ -199,6 +173,41 @@ const ap = new APlayer({
199173

200174
+ `ap.destroy()`: 销毁播放器
201175

176+
+ `ap.list`
177+
178+
+ `ap.list.show()`: 显示播放列表
179+
180+
+ `ap.list.hide()`: 隐藏播放列表
181+
182+
+ `ap.list.toggle()`: 显示/隐藏播放列表
183+
184+
+ `ap.list.add(audios: array | object)`: 添加一个或几个新音频到播放列表
185+
186+
```js
187+
ap.list.add([{
188+
name: 'name',
189+
artist: 'artist',
190+
url: 'url.mp3',
191+
cover: 'cover.jpg',
192+
lrc: 'lrc.lrc',
193+
theme: '#ebd0c2'
194+
}]);
195+
```
196+
197+
+ `ap.list.remove(index: number)`: 移除播放列表中的一个音频
198+
199+
```js
200+
ap.list.remove(1);
201+
```
202+
203+
+ `ap.list.switch()`: 切换到播放列表里的其他音频
204+
205+
```js
206+
ap.list.switch(1);
207+
```
208+
209+
+ `ap.list.clear()`: 清空播放列表
210+
202211
+ `ap.audio`: 原生 video
203212

204213
+ `ap.audio.currentTime`: 返回音频当前播放时间
@@ -247,12 +256,15 @@ ap.on('ended', function () {
247256

248257
播放器事件
249258

250-
- switchaudio
251-
- addaudio
252-
- removeaudio
259+
- listshow
260+
- listhide
261+
- listadd
262+
- listremove
263+
- listswitch
264+
- listclear
265+
- noticeshow
266+
- noticehide
253267
- destroy
254-
- notice_show
255-
- notice_hide
256268

257269
## 歌词
258270

@@ -506,12 +518,16 @@ const ap = new APlayer({
506518
});
507519

508520
const colorThief = new ColorThief();
509-
ap.on('switchaudio', (index) => {
510-
if (!ap.options.audio[index].theme) {
511-
colorThief.getColorAsync(ap.options.audio[index].cover, (color) => {
521+
const setTheme = (index) => {
522+
if (!ap.list.audios[index].theme) {
523+
colorThief.getColorAsync(ap.list.audios[index].cover, function (color) {
512524
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
513525
});
514526
}
527+
};
528+
setTheme(ap.list.index);
529+
ap.on('listswitch', (index) => {
530+
setTheme(index);
515531
});
516532
```
517533

‎src/js/events.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ class Events {
99
'timeupdate', 'volumechange', 'waiting'
1010
];
1111
this.playerEvents = [
12-
'destroy', 'switchaudio', 'addaudio', 'removeaudio', 'notice_show', 'notice_hide'
12+
'destroy', 'listshow', 'listhide', 'listadd', 'listremove', 'listswitch', 'listclear', 'noticeshow', 'noticehide'
1313
];
1414
}
1515

‎src/js/list.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ class List {
121121

122122
// set html
123123
this.player.template.pic.style.backgroundImage = audio.cover ? `url('${audio.cover}')` : '';
124-
this.player.theme(this.audios[this.index].theme || this.player.options.theme, this.index);
124+
this.player.theme(this.audios[this.index].theme || this.player.options.theme, this.index, false);
125125
this.player.template.title.innerHTML = audio.name;
126126
this.player.template.author.innerHTML = audio.artist ? ' - ' + audio.artist : '';
127127

@@ -152,7 +152,7 @@ class List {
152152
this.player.audio.src = '';
153153
this.player.template.listOl.innerHTML = '';
154154
this.player.template.pic.style.backgroundImage = '';
155-
this.player.theme(this.player.options.theme, this.index);
155+
this.player.theme(this.player.options.theme, this.index, false);
156156
this.player.template.title.innerHTML = 'No audio';
157157
this.player.template.author.innerHTML = '';
158158
this.player.bar.set('loaded', 0, 'width');

‎src/js/player.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -243,8 +243,10 @@ class APlayer {
243243
}
244244
}
245245

246-
theme (color = this.list.audios[this.list.index].theme || this.options.theme, index = this.list.index) {
247-
this.list.audios[index] && (this.list.audios[index].theme = color);
246+
theme (color = this.list.audios[this.list.index].theme || this.options.theme, index = this.list.index, isReset = true) {
247+
if (isReset) {
248+
this.list.audios[index] && (this.list.audios[index].theme = color);
249+
}
248250
this.template.listCurs[index] && (this.template.listCurs[index].style.backgroundColor = color);
249251
if (index === this.list.index) {
250252
this.template.pic.style.backgroundColor = color;

0 commit comments

Comments
 (0)