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

audio.theme

This commit is contained in:
DIYgod 2018-03-12 17:23:41 +08:00
parent de788582f0
commit b5e8cd0bea
No known key found for this signature in database
GPG Key ID: EC0B76A252D3EF67
7 changed files with 73 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
demo/demo.js
View File

@ -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'
}]
});

18
docs/README.md
View File

@ -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'
}
]
});

34
docs/config.js
View File

@ -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'
}]
});
}

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

@ -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'
}
]
});

2
src/css/index.scss
View File

@ -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;

8
src/js/player.js
View File

@ -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 += `
<li>
<span class="aplayer-list-cur" style="background: ${this.options.theme};"></span>
<span class="aplayer-list-cur" style="background: ${newMusic[i].theme || this.options.theme};"></span>
<span class="aplayer-list-index">${this.options.audio.length - newMusic.length + i + 1}</span>
<span class="aplayer-list-title">${newMusic[i].name}</span>
<span class="aplayer-list-author">${newMusic[i].artist}</span>

4
src/template/player.art
View File

@ -1,4 +1,4 @@
<div class="aplayer-pic"{{ if cover }} style="background-image: url("{{ cover }}");"{{ /if }}>
<div class="aplayer-pic" style="{{ if cover }}background-image: url(&quot;{{ cover }}&quot;);{{ /if }}background-color: {{ options.theme }};">
<div class="aplayer-button aplayer-play">{{@ icons.play }}</div>
</div>
<div class="aplayer-info">
@ -52,7 +52,7 @@
<ol>
{{each options.audio}}
<li>
<span class="aplayer-list-cur" style="background: {{ options.theme }};"></span>
<span class="aplayer-list-cur" style="background: {{ $value.theme || options.theme }};"></span>
<span class="aplayer-list-index">{{ $index + 1 }}</span>
<span class="aplayer-list-title">{{ $value.name }}</span>
<span class="aplayer-list-author">{{ $value.artist }}</span>