small fix and docs
This commit is contained in:
DIYgod
parent
95ee708ab1
commit
9c983b0833
10
demo/demo.js
10
demo/demo.js
|
|
@ -136,12 +136,16 @@ const ap5 = new APlayer({
|
|||
}]
|
||||
});
|
||||
const colorThief = new ColorThief();
|
||||
ap5.on('switchaudio', (index) => {
|
||||
if (!ap5.options.audio[index].theme) {
|
||||
colorThief.getColorAsync(ap5.options.audio[index].cover, function (color) {
|
||||
const setTheme = (index) => {
|
||||
if (!ap5.list.audios[index].theme) {
|
||||
colorThief.getColorAsync(ap5.list.audios[index].cover, function (color) {
|
||||
ap5.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
|
||||
});
|
||||
}
|
||||
};
|
||||
setTheme(ap5.list.index);
|
||||
ap5.on('listswitch', (index) => {
|
||||
setTheme(index);
|
||||
});
|
||||
|
||||
const ap6 = new APlayer({
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@ mutex | true | prevent to play multiple player at the same time, pause other pla
|
|||
lrcType | 0 | [see more details](https://aplayer.js.org/#/home?id=lrc)
|
||||
listFolded | false | indicate whether list should folded at first
|
||||
listMaxHeight | - | list max height
|
||||
storageName | 'aplayer-setting' | localStorage key that store player setting
|
||||
|
||||
For example:
|
||||
|
||||
|
|
@ -147,33 +148,6 @@ const ap = new APlayer({
|
|||
|
||||
+ `ap.on(event: string, handler: function)`: bind audio and player events, [see more details](https://aplayer.js.org/#/home?id=event-binding)
|
||||
|
||||
+ `ap.switchAudio(index: number)`: switch audio list
|
||||
|
||||
```js
|
||||
ap.switchAudio(1);
|
||||
```
|
||||
|
||||
+ `ap.addAudio(audio)`: add new audios to the list
|
||||
|
||||
```js
|
||||
ap.addAudio([
|
||||
{
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'url.mp3',
|
||||
cover: 'cover.jpg',
|
||||
lrc: 'lrc.lrc',
|
||||
theme: '#ebd0c2'
|
||||
}
|
||||
]);
|
||||
```
|
||||
|
||||
+ `ap.removeAudio(index: number)`: remove audio from the list
|
||||
|
||||
```js
|
||||
ap.removeAudio(1);
|
||||
```
|
||||
|
||||
+ `ap.volume(percentage: number, nostorage: boolean)`: set audio volume
|
||||
|
||||
```js
|
||||
|
|
@ -198,6 +172,41 @@ const ap = new APlayer({
|
|||
|
||||
+ `ap.destroy()`: destroy player
|
||||
|
||||
+ `ap.list`
|
||||
|
||||
+ `ap.list.show()`: show list
|
||||
|
||||
+ `ap.list.hide()`: hide list
|
||||
|
||||
+ `ap.list.toggle()`: toggle list between show and hide
|
||||
|
||||
+ `ap.list.add(audios: array | object)`: add new audios to the list
|
||||
|
||||
```js
|
||||
ap.list.add([{
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'url.mp3',
|
||||
cover: 'cover.jpg',
|
||||
lrc: 'lrc.lrc',
|
||||
theme: '#ebd0c2'
|
||||
}]);
|
||||
```
|
||||
|
||||
+ `ap.list.remove(index: number)`: remove an audio from the list
|
||||
|
||||
```js
|
||||
ap.list.remove(1);
|
||||
```
|
||||
|
||||
+ `ap.list.switch()`: switch to an audio in the list
|
||||
|
||||
```js
|
||||
ap.list.switch(1);
|
||||
```
|
||||
|
||||
+ `ap.list.clear()`: remove all audios from the list
|
||||
|
||||
+ `ap.audio`: native audio
|
||||
|
||||
+ `ap.audio.currentTime`: returns the current playback position
|
||||
|
|
@ -246,12 +255,15 @@ Video events
|
|||
|
||||
Player events
|
||||
|
||||
- switchaudio
|
||||
- addaudio
|
||||
- removeaudio
|
||||
- listshow
|
||||
- listhide
|
||||
- listadd
|
||||
- listremove
|
||||
- listswitch
|
||||
- listclear
|
||||
- noticeshow
|
||||
- noticehide
|
||||
- destroy
|
||||
- notice_show
|
||||
- notice_hide
|
||||
|
||||
## LRC
|
||||
|
||||
|
|
@ -505,12 +517,16 @@ const ap = new APlayer({
|
|||
});
|
||||
|
||||
const colorThief = new ColorThief();
|
||||
ap.on('switchaudio', (index) => {
|
||||
if (!ap.options.audio[index].theme) {
|
||||
colorThief.getColorAsync(ap.options.audio[index].cover, (color) => {
|
||||
const setTheme = (index) => {
|
||||
if (!ap.list.audios[index].theme) {
|
||||
colorThief.getColorAsync(ap.list.audios[index].cover, function (color) {
|
||||
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
|
||||
});
|
||||
}
|
||||
};
|
||||
setTheme(ap.list.index);
|
||||
ap.on('listswitch', (index) => {
|
||||
setTheme(index);
|
||||
});
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -88,6 +88,7 @@ mutex | true | 互斥，阻止多个播放器同时播放，当前播放器播
|
|||
lrcType | 0 | [详情](https://aplayer.js.org/#/home?id=lrc)
|
||||
listFolded | false | 列表默认折叠
|
||||
listMaxHeight | - | 列表最大高度
|
||||
storageName | 'aplayer-setting' | 存储播放器设置的 localStorage key
|
||||
|
||||
例如:
|
||||
|
||||
|
|
@ -147,33 +148,6 @@ const ap = new APlayer({
|
|||
+ `ap.toggle()`: 切换播放和暂停
|
||||
|
||||
+ `ap.on(event: string, handler: function)`: 绑定音频和播放器事件，[详情](https://aplayer.js.org/#/home?id=event-binding)
|
||||
|
||||
+ `ap.switchAudio(index: number)`: 切换音频列表
|
||||
|
||||
```js
|
||||
ap.switchAudio(1);
|
||||
```
|
||||
|
||||
+ `ap.addAudio(audio)`: 向列表添加新的音频
|
||||
|
||||
```js
|
||||
ap.addAudio([
|
||||
{
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'url.mp3',
|
||||
cover: 'cover.jpg',
|
||||
lrc: 'lrc.lrc',
|
||||
theme: '#ebd0c2'
|
||||
}
|
||||
]);
|
||||
```
|
||||
|
||||
+ `ap.removeAudio(index: number)`: 从列表删除音频
|
||||
|
||||
```js
|
||||
ap.removeAudio(1);
|
||||
```
|
||||
|
||||
+ `ap.volume(percentage: number, nostorage: boolean)`: 设置音频音量
|
||||
|
||||
|
|
@ -199,6 +173,41 @@ const ap = new APlayer({
|
|||
|
||||
+ `ap.destroy()`: 销毁播放器
|
||||
|
||||
+ `ap.list`
|
||||
|
||||
+ `ap.list.show()`: 显示播放列表
|
||||
|
||||
+ `ap.list.hide()`: 隐藏播放列表
|
||||
|
||||
+ `ap.list.toggle()`: 显示/隐藏播放列表
|
||||
|
||||
+ `ap.list.add(audios: array | object)`: 添加一个或几个新音频到播放列表
|
||||
|
||||
```js
|
||||
ap.list.add([{
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'url.mp3',
|
||||
cover: 'cover.jpg',
|
||||
lrc: 'lrc.lrc',
|
||||
theme: '#ebd0c2'
|
||||
}]);
|
||||
```
|
||||
|
||||
+ `ap.list.remove(index: number)`: 移除播放列表中的一个音频
|
||||
|
||||
```js
|
||||
ap.list.remove(1);
|
||||
```
|
||||
|
||||
+ `ap.list.switch()`: 切换到播放列表里的其他音频
|
||||
|
||||
```js
|
||||
ap.list.switch(1);
|
||||
```
|
||||
|
||||
+ `ap.list.clear()`: 清空播放列表
|
||||
|
||||
+ `ap.audio`: 原生 video
|
||||
|
||||
+ `ap.audio.currentTime`: 返回音频当前播放时间
|
||||
|
|
@ -247,12 +256,15 @@ ap.on('ended', function () {
|
|||
|
||||
播放器事件
|
||||
|
||||
- switchaudio
|
||||
- addaudio
|
||||
- removeaudio
|
||||
- listshow
|
||||
- listhide
|
||||
- listadd
|
||||
- listremove
|
||||
- listswitch
|
||||
- listclear
|
||||
- noticeshow
|
||||
- noticehide
|
||||
- destroy
|
||||
- notice_show
|
||||
- notice_hide
|
||||
|
||||
## 歌词
|
||||
|
||||
|
|
@ -506,12 +518,16 @@ const ap = new APlayer({
|
|||
});
|
||||
|
||||
const colorThief = new ColorThief();
|
||||
ap.on('switchaudio', (index) => {
|
||||
if (!ap.options.audio[index].theme) {
|
||||
colorThief.getColorAsync(ap.options.audio[index].cover, (color) => {
|
||||
const setTheme = (index) => {
|
||||
if (!ap.list.audios[index].theme) {
|
||||
colorThief.getColorAsync(ap.list.audios[index].cover, function (color) {
|
||||
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
|
||||
});
|
||||
}
|
||||
};
|
||||
setTheme(ap.list.index);
|
||||
ap.on('listswitch', (index) => {
|
||||
setTheme(index);
|
||||
});
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ class Events {
|
|||
'timeupdate', 'volumechange', 'waiting'
|
||||
];
|
||||
this.playerEvents = [
|
||||
'destroy', 'switchaudio', 'addaudio', 'removeaudio', 'notice_show', 'notice_hide'
|
||||
'destroy', 'listshow', 'listhide', 'listadd', 'listremove', 'listswitch', 'listclear', 'noticeshow', 'noticehide'
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ class List {
|
|||
|
||||
// set html
|
||||
this.player.template.pic.style.backgroundImage = audio.cover ? `url('${audio.cover}')` : '';
|
||||
this.player.theme(this.audios[this.index].theme || this.player.options.theme, this.index);
|
||||
this.player.theme(this.audios[this.index].theme || this.player.options.theme, this.index, false);
|
||||
this.player.template.title.innerHTML = audio.name;
|
||||
this.player.template.author.innerHTML = audio.artist ? ' - ' + audio.artist : '';
|
||||
|
||||
|
|
@ -152,7 +152,7 @@ class List {
|
|||
this.player.audio.src = '';
|
||||
this.player.template.listOl.innerHTML = '';
|
||||
this.player.template.pic.style.backgroundImage = '';
|
||||
this.player.theme(this.player.options.theme, this.index);
|
||||
this.player.theme(this.player.options.theme, this.index, false);
|
||||
this.player.template.title.innerHTML = 'No audio';
|
||||
this.player.template.author.innerHTML = '';
|
||||
this.player.bar.set('loaded', 0, 'width');
|
||||
|
|
|
|||
|
|
@ -243,8 +243,10 @@ class APlayer {
|
|||
}
|
||||
}
|
||||
|
||||
theme (color = this.list.audios[this.list.index].theme || this.options.theme, index = this.list.index) {
|
||||
this.list.audios[index] && (this.list.audios[index].theme = color);
|
||||
theme (color = this.list.audios[this.list.index].theme || this.options.theme, index = this.list.index, isReset = true) {
|
||||
if (isReset) {
|
||||
this.list.audios[index] && (this.list.audios[index].theme = color);
|
||||
}
|
||||
this.template.listCurs[index] && (this.template.listCurs[index].style.backgroundColor = color);
|
||||
if (index === this.list.index) {
|
||||
this.template.pic.style.backgroundColor = color;
|
||||
|
|
|
|||
Loading…
Reference in New Issue