diff --git a/demo/demo.js b/demo/demo.js index a869c78..87596d1 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -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); + }); + } }); \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index 5862fea..a9c7368 100644 --- a/demo/index.html +++ b/demo/index.html @@ -44,6 +44,7 @@ } +
diff --git a/docs/README.md b/docs/README.md index 72fd01a..ad600f3 100644 --- a/docs/README.md +++ b/docs/README.md @@ -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). + +
+
+
+ +```html + +
+ + +``` + +```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) diff --git a/docs/config.js b/docs/config.js index 5953025..f031baf 100644 --- a/docs/config.js +++ b/docs/config.js @@ -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); + }); + } + }); } \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 490c195..2cd6c66 100644 --- a/docs/index.html +++ b/docs/index.html @@ -18,6 +18,7 @@ +