diff --git a/demo/demo.js b/demo/demo.js index f382ee8..a3c9fd8 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -4,13 +4,13 @@ const ap1 = new APlayer({ autoplay: false, lrc: false, mutex: true, - theme: '#e6d0b2', preload: 'metadata', audio: [{ name: '光るなら', artist: 'Goose house', url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3', cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg', + theme: '#ebd0c2' }] }); ap1.on('play', function () { @@ -41,13 +41,13 @@ const ap2 = new APlayer({ autoplay: false, lrc: false, mutex: true, - theme: '#e6d0b2', audio: [{ name: '光るなら', artist: 'Goose house', 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" + lrc: "https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc", + theme: '#ebd0c2' }] }); @@ -57,13 +57,13 @@ const ap3 = new APlayer({ autoplay: false, lrc: 3, mutex: true, - theme: '#615754', audio: [{ name: '光るなら', artist: 'Goose house', 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" + lrc: "https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc", + theme: '#ebd0c2' }] }); @@ -80,19 +80,22 @@ const ap4 = new APlayer({ artist: 'Goose house', 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' + 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' + 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' + lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc', + theme: '#505d6b' }] }); @@ -109,18 +112,21 @@ const ap5 = new APlayer({ artist: 'Goose house', 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' + 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' + 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' + lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc', + theme: '#505d6b' }] }); \ No newline at end of file diff --git a/docs/README.md b/docs/README.md index ed91bdf..72fd01a 100644 --- a/docs/README.md +++ b/docs/README.md @@ -48,7 +48,7 @@ const ap = new APlayer({ name: 'name', artist: 'artist', url: 'url.mp3', - cover: 'cover.jpg', + cover: 'cover.jpg' }] }); ``` @@ -80,6 +80,7 @@ audio.artist | - | audio artist audio.url | - | audio url audio.cover | - | audio cover audio.lrc | - | [see more details](https://aplayer.js.org/#/home?id=lrc) +audio.theme | - | main color when switching to this audio, it has priority over the above theme mutex | true | prevent to play multiple player at the same time, pause other players when this player start play lrc | false | [see more details](https://aplayer.js.org/#/home?id=lrc) listFolded | false | indicate whether list should folded at first @@ -111,14 +112,16 @@ const ap = new APlayer({ artist: 'artist1', url: 'url1.mp3', cover: 'cover1.jpg', - lrc: 'lrc1.lrc' + lrc: 'lrc1.lrc', + theme: '#ebd0c2' }, { name: 'name2', artist: 'artist2', url: 'url2.mp3', cover: 'cover2.jpg', - lrc: 'lrc2.lrc' + lrc: 'lrc2.lrc', + theme: '#46718b' } ] }); @@ -157,7 +160,8 @@ const ap = new APlayer({ artist: 'artist', url: 'url.mp3', cover: 'cover.jpg', - lrc: 'lrc.lrc' + lrc: 'lrc.lrc', + theme: '#ebd0c2' } ]); ``` @@ -353,14 +357,16 @@ const ap = new APlayer({ artist: 'artist1', url: 'url1.mp3', cover: 'cover1.jpg', - lrc: 'lrc1.lrc' + lrc: 'lrc1.lrc', + theme: '#ebd0c2' }, { name: 'name2', artist: 'artist2', url: 'url2.mp3', cover: 'cover2.jpg', - lrc: 'lrc2.lrc' + lrc: 'lrc2.lrc', + theme: '#46718b' } ] }); diff --git a/docs/config.js b/docs/config.js index d6d41ff..5953025 100644 --- a/docs/config.js +++ b/docs/config.js @@ -88,19 +88,22 @@ function aplayer1 () { artist: 'Goose house', 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' + 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' + 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' + lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc', + theme: '#505d6b' }] }); } @@ -108,12 +111,12 @@ function aplayer1 () { function aplayer2 () { window.ap2 = new APlayer({ container: document.getElementById('aplayer2'), - theme: '#e6d0b2', audio: [{ name: '光るなら', artist: 'Goose house', url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3', cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg', + theme: '#ebd0c2' }] }); } @@ -123,7 +126,6 @@ function aplayer3 () { container: document.getElementById('aplayer3'), mini: false, autoplay: false, - theme: '#FADFA3', loop: 'all', order: 'random', preload: 'auto', @@ -137,19 +139,22 @@ function aplayer3 () { artist: 'Goose house', 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' + 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' + 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' + lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc', + theme: '#505d6b' }] }); } @@ -163,7 +168,8 @@ function aplayer4 () { artist: 'Goose house', 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" + lrc: "https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc", + theme: '#ebd0c2' }] }); } @@ -177,19 +183,22 @@ function aplayer5 () { artist: 'Goose house', 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' + 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' + 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' + lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc', + theme: '#505d6b' }] }); } @@ -203,6 +212,7 @@ function aplayer6 () { artist: 'Goose house', url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3', cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg', + theme: '#ebd0c2' }] }); } \ No newline at end of file diff --git a/docs/zh-Hans/README.md b/docs/zh-Hans/README.md index c4abfd4..3ab6f4a 100644 --- a/docs/zh-Hans/README.md +++ b/docs/zh-Hans/README.md @@ -49,7 +49,7 @@ const ap = new APlayer({ name: 'name', artist: 'artist', url: 'url.mp3', - cover: 'cover.jpg', + cover: 'cover.jpg' }] }); ``` @@ -81,6 +81,7 @@ audio.artist | - | 音频艺术家 audio.url | - | 音频链接 audio.cover | - | 音频封面 audio.lrc | - | [详情](https://aplayer.js.org/#/home?id=lrc) +audio.theme | - | 切换到此音频时的主题色，比上面的 theme 优先级高 mutex | true | 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器 lrc | false | [详情](https://aplayer.js.org/#/home?id=lrc) listFolded | false | 列表默认折叠 @@ -112,14 +113,16 @@ const ap = new APlayer({ artist: 'artist1', url: 'url1.mp3', cover: 'cover1.jpg', - lrc: 'lrc1.lrc' + lrc: 'lrc1.lrc', + theme: '#ebd0c2' }, { name: 'name2', artist: 'artist2', url: 'url2.mp3', cover: 'cover2.jpg', - lrc: 'lrc2.lrc' + lrc: 'lrc2.lrc', + theme: '#46718b' } ] }); @@ -158,7 +161,8 @@ const ap = new APlayer({ artist: 'artist', url: 'url.mp3', cover: 'cover.jpg', - lrc: 'lrc.lrc' + lrc: 'lrc.lrc', + theme: '#ebd0c2' } ]); ``` @@ -354,14 +358,16 @@ const ap = new APlayer({ artist: 'artist1', url: 'url1.mp3', cover: 'cover1.jpg', - lrc: 'lrc1.lrc' + lrc: 'lrc1.lrc', + theme: '#ebd0c2' }, { name: 'name2', artist: 'artist2', url: 'url2.mp3', cover: 'cover2.jpg', - lrc: 'lrc2.lrc' + lrc: 'lrc2.lrc', + theme: '#46718b' } ] }); diff --git a/src/css/index.scss b/src/css/index.scss index 1ee004a..d5ff127 100644 --- a/src/css/index.scss +++ b/src/css/index.scss @@ -119,8 +119,8 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6; float: left; height: $aplayer-height; width: $aplayer-height; - background-image: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAeAAD/4QMfaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzA2NyA3OS4xNTc3NDcsIDIwMTUvMDMvMzAtMjM6NDA6NDIgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2NjQ3NUZBM0Y4RDExRTY4NzJCRDdCNkZCQTQ0MjNBIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2NjQ3NUY5M0Y4RDExRTY4NzJCRDdCNkZCQTQ0MjNBIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSI5OENEMEFFRjM0NTI1NjE0NEREQkU4RjkxRjAwNjM3NiIgc3RSZWY6ZG9jdW1lbnRJRD0iOThDRDBBRUYzNDUyNTYxNDREREJFOEY5MUYwMDYzNzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAQCwsLDAsQDAwQFw8NDxcbFBAQFBsfFxcXFxcfHhca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); background-size: cover; + background-position: center; transition: all 0.3s ease; cursor: pointer; diff --git a/src/js/player.js b/src/js/player.js index a6ea4bd..f13ad8e 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -195,6 +195,12 @@ class APlayer { else { this.template.pic.style.backgroundImage = ''; } + if (this.options.audio[this.playIndex].theme) { + this.template.pic.style.backgroundColor = this.options.audio[this.playIndex].theme; + this.template.played.style.background = this.options.audio[this.playIndex].theme; + this.template.thumb.style.background = this.options.audio[this.playIndex].theme; + this.template.volume.style.background = this.options.audio[this.playIndex].theme; + } this.template.title.innerHTML = this.options.audio[this.playIndex].name; this.template.author.innerHTML = this.options.audio[this.playIndex].artist ? ' - ' + this.options.audio[this.playIndex].artist : ''; const light = this.container.getElementsByClassName('aplayer-list-light')[0]; @@ -391,7 +397,7 @@ class APlayer { for (let i = 0; i < newMusic.length; i++) { newItemHTML += `
  • - + ${this.options.audio.length - newMusic.length + i + 1} ${newMusic[i].name} ${newMusic[i].artist} diff --git a/src/template/player.art b/src/template/player.art index ada9713..3e8f6c1 100644 --- a/src/template/player.art +++ b/src/template/player.art @@ -1,4 +1,4 @@ -
    +
    {{@ icons.play }}
    @@ -52,7 +52,7 @@
      {{each options.audio}}
    1. - + {{ $index + 1 }} {{ $value.name }} {{ $value.artist }}