diff --git a/src/assets/lrc.svg b/src/assets/lrc.svg
new file mode 100644
index 0000000..57fac17
--- /dev/null
+++ b/src/assets/lrc.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/css/index.scss b/src/css/index.scss
index 4b13a19..0d3f0bd 100644
--- a/src/css/index.scss
+++ b/src/css/index.scss
@@ -150,7 +150,8 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
.aplayer-icon-back,
.aplayer-icon-play,
- .aplayer-icon-forward {
+ .aplayer-icon-forward,
+ .aplayer-icon-lrc {
display: inline-block;
}
@@ -230,10 +231,17 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
.aplayer-icon-order,
.aplayer-icon-back,
.aplayer-icon-play,
- .aplayer-icon-forward {
+ .aplayer-icon-forward,
+ .aplayer-icon-lrc {
display: none;
}
+ .aplayer-icon-lrc-inactivity {
+ svg {
+ opacity: 0.4;
+ }
+ }
+
.aplayer-icon-forward {
transform: rotate(180deg);
}
@@ -547,6 +555,10 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
}
}
+ &.aplayer-lrc-hide {
+ display: none;
+ }
+
.aplayer-lrc-contents {
width: 100%;
transition: all 0.5s ease-out;
diff --git a/src/js/controller.js b/src/js/controller.js
index fe68c67..b66ad03 100644
--- a/src/js/controller.js
+++ b/src/js/controller.js
@@ -15,6 +15,7 @@ class Controller {
}
this.initMiniSwitcher();
this.initSkipButton();
+ this.initLrcButton();
}
initPlayButton () {
@@ -154,6 +155,19 @@ class Controller {
this.player.toggle();
});
}
+
+ initLrcButton () {
+ this.player.template.lrcButton.addEventListener('click', () => {
+ if (this.player.template.lrcButton.classList.contains('aplayer-icon-lrc-inactivity')) {
+ this.player.template.lrcButton.classList.remove('aplayer-icon-lrc-inactivity');
+ this.player.lrc && this.player.lrc.show();
+ }
+ else {
+ this.player.template.lrcButton.classList.add('aplayer-icon-lrc-inactivity');
+ this.player.lrc && this.player.lrc.hide();
+ }
+ });
+ }
}
export default Controller;
\ No newline at end of file
diff --git a/src/js/events.js b/src/js/events.js
index d8f96c2..e06a31a 100644
--- a/src/js/events.js
+++ b/src/js/events.js
@@ -9,7 +9,10 @@ class Events {
'timeupdate', 'volumechange', 'waiting'
];
this.playerEvents = [
- 'destroy', 'listshow', 'listhide', 'listadd', 'listremove', 'listswitch', 'listclear', 'noticeshow', 'noticehide'
+ 'destroy',
+ 'listshow', 'listhide', 'listadd', 'listremove', 'listswitch', 'listclear',
+ 'noticeshow', 'noticehide',
+ 'lrcshow', 'lrchide',
];
}
diff --git a/src/js/icons.js b/src/js/icons.js
index f06091a..9f6d552 100644
--- a/src/js/icons.js
+++ b/src/js/icons.js
@@ -12,6 +12,7 @@ import loopNone from '../assets/loop-none.svg';
import loading from '../assets/loading.svg';
import right from '../assets/right.svg';
import skip from '../assets/skip.svg';
+import lrc from '../assets/lrc.svg';
const Icons = {
play: play,
@@ -28,6 +29,7 @@ const Icons = {
loading: loading,
right: right,
skip: skip,
+ lrc: lrc,
};
export default Icons;
diff --git a/src/js/list.js b/src/js/list.js
index f97473c..1d54fe4 100644
--- a/src/js/list.js
+++ b/src/js/list.js
@@ -52,7 +52,9 @@ class List {
}
add (audios) {
- this.player.events.trigger('listadd', audios);
+ this.player.events.trigger('listadd', {
+ audios: audios,
+ });
const wasSingle = !(this.audios.length > 1);
const wasEmpty = this.audios.length === 0;
@@ -84,7 +86,9 @@ class List {
}
remove (index) {
- this.player.events.trigger('listremove', index);
+ this.player.events.trigger('listremove', {
+ index: index,
+ });
if (this.audios[index]) {
if (this.audios.length > 1) {
const list = this.player.container.querySelectorAll('.aplayer-list li');
@@ -120,7 +124,9 @@ class List {
}
switch (index) {
- this.player.events.trigger('listswitch', index);
+ this.player.events.trigger('listswitch', {
+ index: index,
+ });
if (typeof index !== 'undefined' && this.audios[index]) {
this.index = index;
diff --git a/src/js/lrc.js b/src/js/lrc.js
index b3e69b0..2cb4420 100644
--- a/src/js/lrc.js
+++ b/src/js/lrc.js
@@ -11,6 +11,25 @@ class Lrc {
this.current = [];
}
+ show () {
+ this.player.events.trigger('lrcshow');
+ this.player.template.lrcWrap.classList.remove('aplayer-lrc-hide');
+ }
+
+ hide () {
+ this.player.events.trigger('lrchide');
+ this.player.template.lrcWrap.classList.add('aplayer-lrc-hide');
+ }
+
+ toggle () {
+ if (this.player.template.lrcWrap.classList.contains('aplayer-lrc-hide')) {
+ this.show();
+ }
+ else {
+ this.hide();
+ }
+ }
+
update (currentTime = this.player.audio.currentTime) {
if (this.index > this.current.length - 1 || currentTime < this.current[this.index][0] || (!this.current[this.index + 1] || currentTime >= this.current[this.index + 1][0])) {
for (let i = 0; i < this.current.length; i++) {
diff --git a/src/js/player.js b/src/js/player.js
index b4e85b3..94faf06 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -91,6 +91,7 @@ class APlayer {
this.list = new List(this);
this.initAudio();
+ this.bindEvents();
if (this.options.order === 'random') {
this.list.switch(this.randomOrder[0]);
}
@@ -116,6 +117,10 @@ class APlayer {
});
}
+ this.volume(this.storage.get('volume'), true);
+ }
+
+ bindEvents () {
this.on('play', () => {
if (this.paused) {
this.setUIPlaying();
@@ -153,10 +158,11 @@ class APlayer {
});
// audio download error: an error occurs
+ let skipTime;
this.on('error', () => {
if (this.list.audios.length) {
this.notice('An audio error has occurred, player will skip forward in 2 seconds.');
- setTimeout(() => {
+ skipTime = setTimeout(() => {
this.skipForward();
if (!this.paused) {
this.play();
@@ -167,6 +173,9 @@ class APlayer {
this.notice('An audio error has occurred.');
}
});
+ this.events.on('listswitch', () => {
+ skipTime && clearTimeout(skipTime);
+ });
// multiple audio play
this.on('ended', () => {
@@ -201,8 +210,6 @@ class APlayer {
this.play();
}
});
-
- this.volume(this.storage.get('volume'), true);
}
setAudio (audio) {
@@ -434,7 +441,9 @@ class APlayer {
if (this.noticeTime) {
clearTimeout(this.noticeTime);
}
- this.events.trigger('noticeshow', text);
+ this.events.trigger('noticeshow', {
+ text: text,
+ });
if (time) {
this.noticeTime = setTimeout(() => {
this.template.notice.style.opacity = 0;
diff --git a/src/js/template.js b/src/js/template.js
index 070bbec..81f3667 100644
--- a/src/js/template.js
+++ b/src/js/template.js
@@ -28,6 +28,7 @@ class Template {
});
this.lrc = this.container.querySelector('.aplayer-lrc-contents');
+ this.lrcWrap = this.container.querySelector('.aplayer-lrc');
this.ptime = this.container.querySelector('.aplayer-ptime');
this.info = this.container.querySelector('.aplayer-info');
this.time = this.container.querySelector('.aplayer-time');
@@ -56,6 +57,7 @@ class Template {
this.skipBackButton = this.container.querySelector('.aplayer-icon-back');
this.skipForwardButton = this.container.querySelector('.aplayer-icon-forward');
this.skipPlayButton = this.container.querySelector('.aplayer-icon-play');
+ this.lrcButton = this.container.querySelector('.aplayer-icon-lrc');
}
}
diff --git a/src/template/player.art b/src/template/player.art
index fcae1c3..d115794 100644
--- a/src/template/player.art
+++ b/src/template/player.art
@@ -54,6 +54,9 @@
+
@@ -131,6 +134,9 @@
+