xiaoxue_admin
/
APlayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: self-adapting theme according to cover

This commit is contained in:
DIYgod 2018-03-13 17:01:31 +08:00
parent ba7692984a
commit c3f74ddfe8
No known key found for this signature in database
GPG Key ID: EC0B76A252D3EF67
6 changed files with 133 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
demo/demo.js
View File

@ -105,7 +105,7 @@ const ap5 = new APlayer({
autoplay: false,
lrc: 3,
mutex: true,
theme: '#ad7a86',
theme: '#e9e9e9',
listFolded: false,
listMaxHeight: '80px',
audio: [{
@ -114,20 +114,25 @@ const ap5 = new APlayer({
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
theme: '#ebd0c2'
}, {
name: 'トリカゴ',
artist: 'XX:me',
url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc',
theme: '#46718b'
}, {
name: '前前前世',
artist: 'RADWIMPS',
url: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc',
theme: '#505d6b'
}]
});
const colorThief = new ColorThief();
ap5.on('switchaudio', (index) => {
if (!ap5.options.audio[index].theme) {
colorThief.getColorAsync(ap5.options.audio[index].cover, function (color) {
ap5.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
});
}
});

1
demo/index.html
View File

@ -44,6 +44,7 @@
}
</style>
<script src="APlayer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>
</head>
<body>
<div class="container">

48
docs/README.md
View File

@ -178,6 +178,12 @@ const ap = new APlayer({
ap.volume(0.1, true);
```
+ `ap.theme(color: string, index: number)`: set player theme, the default of index is current audio index.
```js
ap.theme('#000', 0);
```
+ `ap.destroy()`: destroy player
+ `ap.audio`: native audio
@ -393,6 +399,48 @@ const ap = new APlayer({
});
```
## Self-adapting theme according to cover
It requires the library [color-thief](https://github.com/lokesh/color-thief/blob/master/src/color-thief.js).
<div class="aplayer-wrap">
<div id="aplayer7"><button class="docute-button load">Click to load player</div>
</div>
```html
<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
<script src="color-thief.js"></script>
```
```js
const ap = new APlayer({
container: document.getElementById('aplayer'),
theme: '#e9e9e9',
audio: [{
name: 'name1',
artist: 'artist1',
url: 'url1.mp3',
cover: 'cover1.jpg'
}, {
name: 'name2',
artist: 'artist2',
url: 'url2.mp3',
cover: 'cover2.jpg'
}]
});
const colorThief = new ColorThief();
ap.on('switchaudio', (index) => {
if (!ap.options.audio[index].theme) {
colorThief.getColorAsync(ap.options.audio[index].cover, (color) => {
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
});
}
});
```
## CDN
- [jsDelivr](https://www.jsdelivr.com/package/npm/aplayer)

32
docs/config.js
View File

@ -215,4 +215,36 @@ function aplayer6 () {
theme: '#ebd0c2'
}]
});
}
function aplayer7 () {
window.ap7 = new APlayer({
container: document.getElementById('aplayer7'),
theme: '#e9e9e9',
audio: [{
name: '光るなら',
artist: 'Goose house',
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
}, {
name: 'トリカゴ',
artist: 'XX:me',
url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
}, {
name: '前前前世',
artist: 'RADWIMPS',
url: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
}]
});
const colorThief = new ColorThief();
window.ap7.on('switchaudio', function (index) {
if (!window.ap7.options.audio[index].theme) {
colorThief.getColorAsync(window.ap7.options.audio[index].cover, function (color) {
window.ap7.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
});
}
});
}

1
docs/index.html
View File

@ -18,6 +18,7 @@
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.8.0/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.8.0/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>
<style>
body {
text-rendering: auto;

42
docs/zh-Hans/README.md
View File

@ -394,6 +394,48 @@ const ap = new APlayer({
});
```
## 根据封面自适应主题色
需要额外加载 [color-thief.js](https://github.com/lokesh/color-thief/blob/master/src/color-thief.js)
<div class="aplayer-wrap">
<div id="aplayer7"><button class="docute-button load">点击加载播放器</div>
</div>
```html
<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
<script src="color-thief.js"></script>
```
```js
const ap = new APlayer({
container: document.getElementById('aplayer'),
theme: '#e9e9e9',
audio: [{
name: 'name1',
artist: 'artist1',
url: 'url1.mp3',
cover: 'cover1.jpg'
}, {
name: 'name2',
artist: 'artist2',
url: 'url2.mp3',
cover: 'cover2.jpg'
}]
});
const colorThief = new ColorThief();
ap.on('switchaudio', (index) => {
if (!ap.options.audio[index].theme) {
colorThief.getColorAsync(ap.options.audio[index].cover, (color) => {
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
});
}
});
```
## CDN
- [jsDelivr](https://www.jsdelivr.com/package/npm/aplayer)