Skip to content

Commit c3f74dd

Browse files
DIYgodDIYgod
committed
docs: self-adapting theme according to cover
1 parent ba76929 commit c3f74dd

6 files changed

Lines changed: 133 additions & 4 deletions

File tree

‎demo/demo.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ const ap5 = new APlayer({
105105
autoplay: false,
106106
lrc: 3,
107107
mutex: true,
108-
theme: '#ad7a86',
108+
theme: '#e9e9e9',
109109
listFolded: false,
110110
listMaxHeight: '80px',
111111
audio: [{
@@ -114,20 +114,25 @@ const ap5 = new APlayer({
114114
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
115115
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
116116
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
117-
theme: '#ebd0c2'
118117
}, {
119118
name: 'トリカゴ',
120119
artist: 'XX:me',
121120
url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
122121
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
123122
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc',
124-
theme: '#46718b'
125123
}, {
126124
name: '前前前世',
127125
artist: 'RADWIMPS',
128126
url: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
129127
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
130128
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc',
131-
theme: '#505d6b'
132129
}]
130+
});
131+
const colorThief = new ColorThief();
132+
ap5.on('switchaudio', (index) => {
133+
if (!ap5.options.audio[index].theme) {
134+
colorThief.getColorAsync(ap5.options.audio[index].cover, function (color) {
135+
ap5.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
136+
});
137+
}
133138
});

‎demo/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
}
4545
</style>
4646
<script src="APlayer.js"></script>
47+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/color-thief.js"></script>
4748
</head>
4849
<body>
4950
<div class="container">

‎docs/README.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,12 @@ const ap = new APlayer({
178178
ap.volume(0.1, true);
179179
```
180180

181+
+ `ap.theme(color: string, index: number)`: set player theme, the default of index is current audio index.
182+
183+
```js
184+
ap.theme('#000', 0);
185+
```
186+
181187
+ `ap.destroy()`: destroy player
182188

183189
+ `ap.audio`: native audio
@@ -393,6 +399,48 @@ const ap = new APlayer({
393399
});
394400
```
395401

402+
## Self-adapting theme according to cover
403+
404+
It requires the library [color-thief](https://github.com/lokesh/color-thief/blob/master/src/color-thief.js).
405+
406+
<div class="aplayer-wrap">
407+
<div id="aplayer7"><button class="docute-button load">Click to load player</div>
408+
</div>
409+
410+
```html
411+
<link rel="stylesheet" href="APlayer.min.css">
412+
<div id="aplayer"></div>
413+
<script src="APlayer.min.js"></script>
414+
<script src="color-thief.js"></script>
415+
```
416+
417+
```js
418+
const ap = new APlayer({
419+
container: document.getElementById('aplayer'),
420+
theme: '#e9e9e9',
421+
audio: [{
422+
name: 'name1',
423+
artist: 'artist1',
424+
url: 'url1.mp3',
425+
cover: 'cover1.jpg'
426+
}, {
427+
name: 'name2',
428+
artist: 'artist2',
429+
url: 'url2.mp3',
430+
cover: 'cover2.jpg'
431+
}]
432+
});
433+
434+
const colorThief = new ColorThief();
435+
ap.on('switchaudio', (index) => {
436+
if (!ap.options.audio[index].theme) {
437+
colorThief.getColorAsync(ap.options.audio[index].cover, (color) => {
438+
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
439+
});
440+
}
441+
});
442+
```
443+
396444
## CDN
397445

398446
- [jsDelivr](https://www.jsdelivr.com/package/npm/aplayer)

‎docs/config.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,4 +215,36 @@ function aplayer6 () {
215215
theme: '#ebd0c2'
216216
}]
217217
});
218+
}
219+
220+
function aplayer7 () {
221+
window.ap7 = new APlayer({
222+
container: document.getElementById('aplayer7'),
223+
theme: '#e9e9e9',
224+
audio: [{
225+
name: '光るなら',
226+
artist: 'Goose house',
227+
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
228+
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
229+
}, {
230+
name: 'トリカゴ',
231+
artist: 'XX:me',
232+
url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
233+
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
234+
}, {
235+
name: '前前前世',
236+
artist: 'RADWIMPS',
237+
url: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
238+
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
239+
}]
240+
});
241+
242+
const colorThief = new ColorThief();
243+
window.ap7.on('switchaudio', function (index) {
244+
if (!window.ap7.options.audio[index].theme) {
245+
colorThief.getColorAsync(window.ap7.options.audio[index].cover, function (color) {
246+
window.ap7.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
247+
});
248+
}
249+
});
218250
}

‎docs/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
</script>
1919
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
2020
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
21+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/color-thief.js"></script>
2122
<style>
2223
body {
2324
text-rendering: auto;

‎docs/zh-Hans/README.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -394,6 +394,48 @@ const ap = new APlayer({
394394
});
395395
```
396396

397+
## 根据封面自适应主题色
398+
399+
需要额外加载 [color-thief.js](https://github.com/lokesh/color-thief/blob/master/src/color-thief.js)
400+
401+
<div class="aplayer-wrap">
402+
<div id="aplayer7"><button class="docute-button load">点击加载播放器</div>
403+
</div>
404+
405+
```html
406+
<link rel="stylesheet" href="APlayer.min.css">
407+
<div id="aplayer"></div>
408+
<script src="APlayer.min.js"></script>
409+
<script src="color-thief.js"></script>
410+
```
411+
412+
```js
413+
const ap = new APlayer({
414+
container: document.getElementById('aplayer'),
415+
theme: '#e9e9e9',
416+
audio: [{
417+
name: 'name1',
418+
artist: 'artist1',
419+
url: 'url1.mp3',
420+
cover: 'cover1.jpg'
421+
}, {
422+
name: 'name2',
423+
artist: 'artist2',
424+
url: 'url2.mp3',
425+
cover: 'cover2.jpg'
426+
}]
427+
});
428+
429+
const colorThief = new ColorThief();
430+
ap.on('switchaudio', (index) => {
431+
if (!ap.options.audio[index].theme) {
432+
colorThief.getColorAsync(ap.options.audio[index].cover, (color) => {
433+
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
434+
});
435+
}
436+
});
437+
```
438+
397439
## CDN
398440

399441
- [jsDelivr](https://www.jsdelivr.com/package/npm/aplayer)

0 commit comments

Comments
 (0)