Skip to content

Commit b5e8cd0

Browse files
DIYgodDIYgod
committed
audio.theme
1 parent de78858 commit b5e8cd0

7 files changed

Lines changed: 73 additions & 39 deletions

File tree

‎demo/demo.js‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ const ap1 = new APlayer({
44
autoplay: false,
55
lrc: false,
66
mutex: true,
7-
theme: '#e6d0b2',
87
preload: 'metadata',
98
audio: [{
109
name: '光るなら',
1110
artist: 'Goose house',
1211
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
1312
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
13+
theme: '#ebd0c2'
1414
}]
1515
});
1616
ap1.on('play', function () {
@@ -41,13 +41,13 @@ const ap2 = new APlayer({
4141
autoplay: false,
4242
lrc: false,
4343
mutex: true,
44-
theme: '#e6d0b2',
4544
audio: [{
4645
name: '光るなら',
4746
artist: 'Goose house',
4847
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
4948
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
50-
lrc: "https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc"
49+
lrc: "https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc",
50+
theme: '#ebd0c2'
5151
}]
5252
});
5353

@@ -57,13 +57,13 @@ const ap3 = new APlayer({
5757
autoplay: false,
5858
lrc: 3,
5959
mutex: true,
60-
theme: '#615754',
6160
audio: [{
6261
name: '光るなら',
6362
artist: 'Goose house',
6463
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
6564
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
66-
lrc: "https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc"
65+
lrc: "https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc",
66+
theme: '#ebd0c2'
6767
}]
6868
});
6969

@@ -80,19 +80,22 @@ const ap4 = new APlayer({
8080
artist: 'Goose house',
8181
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
8282
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
83-
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc'
83+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
84+
theme: '#ebd0c2'
8485
}, {
8586
name: 'トリカゴ',
8687
artist: 'XX:me',
8788
url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
8889
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
89-
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc'
90+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc',
91+
theme: '#46718b'
9092
}, {
9193
name: '前前前世',
9294
artist: 'RADWIMPS',
9395
url: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
9496
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
95-
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc'
97+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc',
98+
theme: '#505d6b'
9699
}]
97100
});
98101

@@ -109,18 +112,21 @@ const ap5 = new APlayer({
109112
artist: 'Goose house',
110113
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
111114
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
112-
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc'
115+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
116+
theme: '#ebd0c2'
113117
}, {
114118
name: 'トリカゴ',
115119
artist: 'XX:me',
116120
url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
117121
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
118-
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc'
122+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc',
123+
theme: '#46718b'
119124
}, {
120125
name: '前前前世',
121126
artist: 'RADWIMPS',
122127
url: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
123128
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
124-
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc'
129+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc',
130+
theme: '#505d6b'
125131
}]
126132
});

‎docs/README.md‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const ap = new APlayer({
4848
name: 'name',
4949
artist: 'artist',
5050
url: 'url.mp3',
51-
cover: 'cover.jpg',
51+
cover: 'cover.jpg'
5252
}]
5353
});
5454
```
@@ -80,6 +80,7 @@ audio.artist | - | audio artist
8080
audio.url | - | audio url
8181
audio.cover | - | audio cover
8282
audio.lrc | - | [see more details](https://aplayer.js.org/#/home?id=lrc)
83+
audio.theme | - | main color when switching to this audio, it has priority over the above theme
8384
mutex | true | prevent to play multiple player at the same time, pause other players when this player start play
8485
lrc | false | [see more details](https://aplayer.js.org/#/home?id=lrc)
8586
listFolded | false | indicate whether list should folded at first
@@ -111,14 +112,16 @@ const ap = new APlayer({
111112
artist: 'artist1',
112113
url: 'url1.mp3',
113114
cover: 'cover1.jpg',
114-
lrc: 'lrc1.lrc'
115+
lrc: 'lrc1.lrc',
116+
theme: '#ebd0c2'
115117
},
116118
{
117119
name: 'name2',
118120
artist: 'artist2',
119121
url: 'url2.mp3',
120122
cover: 'cover2.jpg',
121-
lrc: 'lrc2.lrc'
123+
lrc: 'lrc2.lrc',
124+
theme: '#46718b'
122125
}
123126
]
124127
});
@@ -157,7 +160,8 @@ const ap = new APlayer({
157160
artist: 'artist',
158161
url: 'url.mp3',
159162
cover: 'cover.jpg',
160-
lrc: 'lrc.lrc'
163+
lrc: 'lrc.lrc',
164+
theme: '#ebd0c2'
161165
}
162166
]);
163167
```
@@ -353,14 +357,16 @@ const ap = new APlayer({
353357
artist: 'artist1',
354358
url: 'url1.mp3',
355359
cover: 'cover1.jpg',
356-
lrc: 'lrc1.lrc'
360+
lrc: 'lrc1.lrc',
361+
theme: '#ebd0c2'
357362
},
358363
{
359364
name: 'name2',
360365
artist: 'artist2',
361366
url: 'url2.mp3',
362367
cover: 'cover2.jpg',
363-
lrc: 'lrc2.lrc'
368+
lrc: 'lrc2.lrc',
369+
theme: '#46718b'
364370
}
365371
]
366372
});

‎docs/config.js‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -88,32 +88,35 @@ function aplayer1 () {
8888
artist: 'Goose house',
8989
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
9090
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
91-
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc'
91+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
92+
theme: '#ebd0c2'
9293
}, {
9394
name: 'トリカゴ',
9495
artist: 'XX:me',
9596
url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
9697
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
97-
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc'
98+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc',
99+
theme: '#46718b'
98100
}, {
99101
name: '前前前世',
100102
artist: 'RADWIMPS',
101103
url: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
102104
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
103-
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc'
105+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc',
106+
theme: '#505d6b'
104107
}]
105108
});
106109
}
107110

108111
function aplayer2 () {
109112
window.ap2 = new APlayer({
110113
container: document.getElementById('aplayer2'),
111-
theme: '#e6d0b2',
112114
audio: [{
113115
name: '光るなら',
114116
artist: 'Goose house',
115117
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
116118
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
119+
theme: '#ebd0c2'
117120
}]
118121
});
119122
}
@@ -123,7 +126,6 @@ function aplayer3 () {
123126
container: document.getElementById('aplayer3'),
124127
mini: false,
125128
autoplay: false,
126-
theme: '#FADFA3',
127129
loop: 'all',
128130
order: 'random',
129131
preload: 'auto',
@@ -137,19 +139,22 @@ function aplayer3 () {
137139
artist: 'Goose house',
138140
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
139141
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
140-
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc'
142+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
143+
theme: '#ebd0c2'
141144
}, {
142145
name: 'トリカゴ',
143146
artist: 'XX:me',
144147
url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
145148
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
146-
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc'
149+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc',
150+
theme: '#46718b'
147151
}, {
148152
name: '前前前世',
149153
artist: 'RADWIMPS',
150154
url: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
151155
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
152-
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc'
156+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc',
157+
theme: '#505d6b'
153158
}]
154159
});
155160
}
@@ -163,7 +168,8 @@ function aplayer4 () {
163168
artist: 'Goose house',
164169
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
165170
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
166-
lrc: "https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc"
171+
lrc: "https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc",
172+
theme: '#ebd0c2'
167173
}]
168174
});
169175
}
@@ -177,19 +183,22 @@ function aplayer5 () {
177183
artist: 'Goose house',
178184
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
179185
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
180-
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc'
186+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
187+
theme: '#ebd0c2'
181188
}, {
182189
name: 'トリカゴ',
183190
artist: 'XX:me',
184191
url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
185192
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
186-
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc'
193+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc',
194+
theme: '#46718b'
187195
}, {
188196
name: '前前前世',
189197
artist: 'RADWIMPS',
190198
url: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
191199
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
192-
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc'
200+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc',
201+
theme: '#505d6b'
193202
}]
194203
});
195204
}
@@ -203,6 +212,7 @@ function aplayer6 () {
203212
artist: 'Goose house',
204213
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
205214
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
215+
theme: '#ebd0c2'
206216
}]
207217
});
208218
}

‎docs/zh-Hans/README.md‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const ap = new APlayer({
4949
name: 'name',
5050
artist: 'artist',
5151
url: 'url.mp3',
52-
cover: 'cover.jpg',
52+
cover: 'cover.jpg'
5353
}]
5454
});
5555
```
@@ -81,6 +81,7 @@ audio.artist | - | 音频艺术家
8181
audio.url | - | 音频链接
8282
audio.cover | - | 音频封面
8383
audio.lrc | - | [详情](https://aplayer.js.org/#/home?id=lrc)
84+
audio.theme | - | 切换到此音频时的主题色，比上面的 theme 优先级高
8485
mutex | true | 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
8586
lrc | false | [详情](https://aplayer.js.org/#/home?id=lrc)
8687
listFolded | false | 列表默认折叠
@@ -112,14 +113,16 @@ const ap = new APlayer({
112113
artist: 'artist1',
113114
url: 'url1.mp3',
114115
cover: 'cover1.jpg',
115-
lrc: 'lrc1.lrc'
116+
lrc: 'lrc1.lrc',
117+
theme: '#ebd0c2'
116118
},
117119
{
118120
name: 'name2',
119121
artist: 'artist2',
120122
url: 'url2.mp3',
121123
cover: 'cover2.jpg',
122-
lrc: 'lrc2.lrc'
124+
lrc: 'lrc2.lrc',
125+
theme: '#46718b'
123126
}
124127
]
125128
});
@@ -158,7 +161,8 @@ const ap = new APlayer({
158161
artist: 'artist',
159162
url: 'url.mp3',
160163
cover: 'cover.jpg',
161-
lrc: 'lrc.lrc'
164+
lrc: 'lrc.lrc',
165+
theme: '#ebd0c2'
162166
}
163167
]);
164168
```
@@ -354,14 +358,16 @@ const ap = new APlayer({
354358
artist: 'artist1',
355359
url: 'url1.mp3',
356360
cover: 'cover1.jpg',
357-
lrc: 'lrc1.lrc'
361+
lrc: 'lrc1.lrc',
362+
theme: '#ebd0c2'
358363
},
359364
{
360365
name: 'name2',
361366
artist: 'artist2',
362367
url: 'url2.mp3',
363368
cover: 'cover2.jpg',
364-
lrc: 'lrc2.lrc'
369+
lrc: 'lrc2.lrc',
370+
theme: '#46718b'
365371
}
366372
]
367373
});

‎src/css/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,8 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
119119
float: left;
120120
height: $aplayer-height;
121121
width: $aplayer-height;
122-
background-image: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAeAAD/4QMfaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzA2NyA3OS4xNTc3NDcsIDIwMTUvMDMvMzAtMjM6NDA6NDIgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2NjQ3NUZBM0Y4RDExRTY4NzJCRDdCNkZCQTQ0MjNBIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2NjQ3NUY5M0Y4RDExRTY4NzJCRDdCNkZCQTQ0MjNBIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSI5OENEMEFFRjM0NTI1NjE0NEREQkU4RjkxRjAwNjM3NiIgc3RSZWY6ZG9jdW1lbnRJRD0iOThDRDBBRUYzNDUyNTYxNDREREJFOEY5MUYwMDYzNzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAQCwsLDAsQDAwQFw8NDxcbFBAQFBsfFxcXFxcfHhcaGhoaFx4eIyUnJSMeLy8zMy8vQEBAQEBAQEBAQEBAQEBAAREPDxETERUSEhUUERQRFBoUFhYUGiYaGhwaGiYwIx4eHh4jMCsuJycnLis1NTAwNTVAQD9AQEBAQEBAQEBAQED/wAARCABkAGQDASIAAhEBAxEB/8QAgwAAAgIDAQAAAAAAAAAAAAAAAAYBBQIDBAcBAQEBAAAAAAAAAAAAAAAAAAABAhAAAQIEBAEJBgMHBQAAAAAAAQIDABEEBSExEgZBUWFxgaGxIhMUkTJCUmIVI0MWwdHh8XKSsvCCojNzEQEBAQEBAQEBAAAAAAAAAAAAAREhMVFBYf/aAAwDAQACEQMRAD8AaJ8vCJEYTjIZxtlIicc40VFZS0idVS6lpP1HE9Aind3dSrWWbdTPVruXgSQn98Awd0SBC+mp3fVYtUjFGk5F5U1S6Me6Mvtu6ncXbo01zNtzl2CJovwZxML/ANl3DwvZn/5fxiPt+72sWbkw/Lg4jTP/AImGhhiYWlXXdlD4q23IqWh7zlOZ/wCGrujpt+7bTWKDTijSvEy0O4CfJqy9sNMXmWMTECRExjzxMUEEEEBxLcbbQXHVBCEialKMgBFBU7jqax/0dmbU64fzJYy+aZwSOcxT7kvdPXVJpU6jTU5IC0HBauKucDhF7tS3ejolVJK51UlJQrCSRkeuJqppdspcV593dNU8cS0kkNjpPvKi8ZaZp2w3TtpabGSUAJHZEgzjXUVdPStebUOBpE5AnieQDieiKjeYyELVVva3ML0IZddI44IHaZxtod52upcDbqV0ylGSVLkUTP1JyibDDBOJxzjTUF8UzqqdIVUBtRZByK9J09seb1lzuKawuIqngRLSorUDMZ6k8DPMSwhaSPTwSDFbd7Bb7s2rzkBupl4KlIksH6vmHTE2GucuNqp6p3/tIKXCOKknST1xYgZDlihPsNxrLTXItFevXTuLU02omZadQZFP9Jw9ohxjz2tfF03GhFKdQXV6kqHINCJ/2tTj0KYJiQow6oIJY5QRR5hYLM5cK9KHkFNO1JbxIImOCeuPREyAAAkAJARyW63s26n8hlSnATqUtZmonnlKOucokhQtxDTa3XTpbbSVrVyJSNRhFq6usvNyap0K0v1JA5mG1YhtPJJOKzxOENG5HS3Yq1ScyhKSOZS0pPZCts8+ZfQtWK/LcUOk/wA4X3FhwoLJbKBgMtMIWZeN1xKVqWecqB9kJm7aKlo7wpulQGm3G0OKbT7qVKmDIcAZTh/LiW0KW4oJQgFS1HAAJEyTHnb6ndxX5XlAgVCwlH0MoEpnoSJwpD5ZFrXZ6JThOtTKJk9GHZCxvZmn9YHkJSh1KGw6QAC4p0uEauUhKIcmW0NNIaQJIbSEp5kpEhHntyqV3q7hlkzFQ/4T9ODSPYhM+uFI7rbZ9zU1EzXWuoGl5Ic9Pq0nH6XPAZ9MY1+6r2hh+3VjKGKojQtwApWlKhjhMjEcYZrzcW7JavMaA1pAZpUn5pSB6EgThT2xaTeLi5U1ZLjLJ8x4qzccUZhJ7zE/g6dlrtNO+t+pfSisUNDKF+EJScyFHCZh5BEpgzB4xR3TaVqr0lTKBR1BEw42JIJ+tvL2ShaZuN62xWejqZuMiRLKjqQtB+JpXD/U4vh69BxnKCK/73Qfa/uus+m0z+rVl5cvmnhBFRsHLyxIkrolGIMhKJSchAcl4pzVWmsYAmtbSijnUjxp7UwibdrEUd4pnlnS2olCycgFjTjHo4VHm9/paeku1QxTKCmtWrSPyyrFTf8AtiX6sW+5dwmtV9st5K2SoJdWnEuqnghP0z9sXe2rCLXTl18A1rwGvj5afkH7YoNov2aneW7WLCK2cmVOYISn6Tlq6Yaau+2mkaLjlU2ogYNtkLWo8JBMJ9GndFzFBanEpMqipmy1ygKHjV1J74odkW4u1blwWPw6ceW0eVxYx9ie+K+oeuG57sA0iXwtozSy1P3lHvh+t1AzbqNqkY9xsYq4qUcVKPSYe0/C9vxp9VPRvAEstqWlZGSVLCdM+mRjn2Xd6KkS9R1K0sqcUFtuKwSrCRSTDg42262pp1CXGljStChqSoHlBigqdk2h5RUyt2mn8CSFo6tePbDO6Ll67W1hOtyrZSn+sHsGMJW6r3S3Z9hukQS3T6gHSJFZXLBIzlhFs3sO3pV+JVPLHIEoR2+KLm32C024hdMwPNGTrh1r6irLqh2pwvfp+4fpPydJ9T5vqfT/ABaJadMvmljKCHLjxnBDDXDPGXGJmTkcogETMshjyxlPhFGqqfVT0b9QMSy2twDnSkkdsJtoomK7cC2KoB1plKtSVfmKT4ST0qUVQ7KbQ62th3xNuJUhY46VDSewwhvqrdvXsPrTqUMZ/C82fCVJP1dhiVYvKjY9vcVqpqhxgH8tQDgHQZpMRT7EokkF+qccHyISlufX4oubddKG5shymWCvNbRwWk84jtBMgeSGRNaKOgo7eyWaNoNIPvEYqUfqUcTHVOMRIxOKscooyBxg5eSIM5T48IkY/vgJOPVBOXOIBM80aKqspaNvzap1LaRlM4noGZgOjVBC5+sqX1ejyj6aUp6vxf6tGUuac4ImwxbAkKlEzBywjHGUgermiRPLhFGYJ48Y01tDSXBg09Y2HG5+E5KSZZoUMo2AgZRkDiBLDiIBQq9n3ClcL9pf80JxSkny3k9fuqjBvcu4bYfLuDBWBh+MgoV/eMDDoMyZ4RIM0kETT8pxETPi6WmN9UKhJ+ncQTnpIUP2R1p3jZCMVOJ5igxYu2q1vmbtGwvn0JB7JRznbthOJoW8eQqHcqHU40K3nZAMFOKllJB/bHI9vuiTMU9M44o/MQkdk4tUbdsaDMUTXXNXeY6maChp5eTTNI5ClCQe6HThWN+3Rc/Bb6UtIV8SUH/NeEZ02zrhWOefdqognNKT5izzajgIbpz7gIkfzhhqs/TFk9J6b0w05+ZM+ZPl1wRay9kEUV4y+qXZGachyc8EEBKeMAnLCf8ACCCAzE5d8ZHMS64IIA7oy+HDqgggIEpYdUZJnpE84IICeScSJYwQQE8IIIID/9k=);
123122
background-size: cover;
123+
background-position: center;
124124
transition: all 0.3s ease;
125125
cursor: pointer;
126126

‎src/js/player.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,12 @@ class APlayer {
195195
else {
196196
this.template.pic.style.backgroundImage = '';
197197
}
198+
if (this.options.audio[this.playIndex].theme) {
199+
this.template.pic.style.backgroundColor = this.options.audio[this.playIndex].theme;
200+
this.template.played.style.background = this.options.audio[this.playIndex].theme;
201+
this.template.thumb.style.background = this.options.audio[this.playIndex].theme;
202+
this.template.volume.style.background = this.options.audio[this.playIndex].theme;
203+
}
198204
this.template.title.innerHTML = this.options.audio[this.playIndex].name;
199205
this.template.author.innerHTML = this.options.audio[this.playIndex].artist ? ' - ' + this.options.audio[this.playIndex].artist : '';
200206
const light = this.container.getElementsByClassName('aplayer-list-light')[0];
@@ -391,7 +397,7 @@ class APlayer {
391397
for (let i = 0; i < newMusic.length; i++) {
392398
newItemHTML += `
393399
<li>
394-
<span class="aplayer-list-cur" style="background: ${this.options.theme};"></span>
400+
<span class="aplayer-list-cur" style="background: ${newMusic[i].theme || this.options.theme};"></span>
395401
<span class="aplayer-list-index">${this.options.audio.length - newMusic.length + i + 1}</span>
396402
<span class="aplayer-list-title">${newMusic[i].name}</span>
397403
<span class="aplayer-list-author">${newMusic[i].artist}</span>

‎src/template/player.art‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="aplayer-pic"{{ if cover }} style="background-image: url("{{ cover }}");"{{ /if }}>
1+
<div class="aplayer-pic" style="{{ if cover }}background-image: url(&quot;{{ cover }}&quot;);{{ /if }}background-color: {{ options.theme }};">
22
<div class="aplayer-button aplayer-play">{{@ icons.play }}</div>
33
</div>
44
<div class="aplayer-info">
@@ -52,7 +52,7 @@
5252
<ol>
5353
{{each options.audio}}
5454
<li>
55-
<span class="aplayer-list-cur" style="background: {{ options.theme }};"></span>
55+
<span class="aplayer-list-cur" style="background: {{ $value.theme || options.theme }};"></span>
5656
<span class="aplayer-list-index">{{ $index + 1 }}</span>
5757
<span class="aplayer-list-title">{{ $value.name }}</span>
5858
<span class="aplayer-list-author">{{ $value.artist }}</span>

0 commit comments

Comments
 (0)