diff --git a/demo/demo.js b/demo/demo.js
index fb1b654..487f4b9 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -6,7 +6,6 @@ const ap1 = new APlayer({
mutex: true,
theme: '#e6d0b2',
preload: 'metadata',
- mode: 'circulation',
music: {
title: 'Preparation',
author: 'Hans Zimmer/Richard Harvey',
@@ -43,7 +42,6 @@ const ap2 = new APlayer({
showlrc: false,
mutex: true,
theme: '#e6d0b2',
- mode: 'circulation',
music: {
title: 'Preparation',
author: 'Hans Zimmer/Richard Harvey',
@@ -59,7 +57,6 @@ const ap3 = new APlayer({
showlrc: 3,
mutex: true,
theme: '#615754',
- mode: 'circulation',
music: {
title: '回レ！雪月花',
author: '小倉唯',
@@ -76,7 +73,6 @@ const ap4 = new APlayer({
showlrc: false,
mutex: true,
theme: '#ad7a86',
- mode: 'random',
music: [
{
title: 'あっちゅ～ま青春!',
@@ -106,7 +102,6 @@ const ap5 = new APlayer({
showlrc: 3,
mutex: true,
theme: '#ad7a86',
- mode: 'random',
listmaxheight: '80px',
music: [
{
diff --git a/demo/index.html b/demo/index.html
index ec7128d..18bc76b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -55,7 +55,7 @@
-
+
diff --git a/src/assets/circulation.svg b/src/assets/circulation.svg
deleted file mode 100644
index 936e5dd..0000000
--- a/src/assets/circulation.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
\ No newline at end of file
diff --git a/src/assets/loop-all.svg b/src/assets/loop-all.svg
new file mode 100644
index 0000000..f4ce101
--- /dev/null
+++ b/src/assets/loop-all.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/assets/loop-none.svg b/src/assets/loop-none.svg
new file mode 100644
index 0000000..61746a5
--- /dev/null
+++ b/src/assets/loop-none.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/assets/loop-one.svg b/src/assets/loop-one.svg
new file mode 100644
index 0000000..9444916
--- /dev/null
+++ b/src/assets/loop-one.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/assets/order.svg b/src/assets/order-list.svg
similarity index 100%
rename from src/assets/order.svg
rename to src/assets/order-list.svg
diff --git a/src/assets/order-random.svg b/src/assets/order-random.svg
new file mode 100644
index 0000000..37eb42e
--- /dev/null
+++ b/src/assets/order-random.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/assets/random.svg b/src/assets/random.svg
deleted file mode 100644
index fb2873e..0000000
--- a/src/assets/random.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
\ No newline at end of file
diff --git a/src/assets/single.svg b/src/assets/single.svg
deleted file mode 100644
index 208bab8..0000000
--- a/src/assets/single.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
\ No newline at end of file
diff --git a/src/css/index.scss b/src/css/index.scss
index f1b786f..5ead657 100644
--- a/src/css/index.scss
+++ b/src/css/index.scss
@@ -80,7 +80,8 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
}
&.aplayer-arrow {
- .aplayer-icon-mode {
+ .aplayer-icon-order,
+ .aplayer-icon-loop {
display: none;
}
}
@@ -266,8 +267,8 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
fill: #666;
}
- &.aplayer-icon-mode {
- margin-right: 4px;
+ &.aplayer-icon-loop {
+ margin-right: 2px;
}
&:hover {
diff --git a/src/js/controller.js b/src/js/controller.js
index 22e03be..6bd02f7 100644
--- a/src/js/controller.js
+++ b/src/js/controller.js
@@ -8,7 +8,10 @@ class Controller {
this.initPlayButton();
this.initList();
this.initPlayBar();
- this.initModeButton();
+ if (this.player.isMultiple()) {
+ this.initOrderButton();
+ }
+ this.initLoopButton();
this.initMenuButton();
if (!utils.isMobile) {
this.initVolumeButton();
@@ -115,32 +118,45 @@ class Controller {
});
}
- initModeButton () {
- this.player.template.mode.addEventListener('click', () => {
+ initOrderButton () {
+ this.player.template.order.addEventListener('click', () => {
+ if (this.player.options.order === 'list') {
+ this.player.options.order = 'random';
+ this.player.template.order.innerHTML = Icons.orderRandom;
+ }
+ else if (this.player.options.order === 'random') {
+ this.player.options.order = 'list';
+ this.player.template.order.innerHTML = Icons.orderList;
+ }
+ });
+ }
+
+ initLoopButton () {
+ this.player.template.loop.addEventListener('click', () => {
if (this.player.isMultiple()) {
- if (this.player.mode === 'random') {
- this.player.mode = 'single';
+ if (this.player.options.loop === 'one') {
+ this.player.options.loop = 'none';
+ this.player.template.loop.innerHTML = Icons.loopNone;
}
- else if (this.player.mode === 'single') {
- this.player.mode = 'order';
+ else if (this.player.options.loop === 'none') {
+ this.player.options.loop = 'all';
+ this.player.template.loop.innerHTML = Icons.loopAll;
}
- else if (this.player.mode === 'order') {
- this.player.mode = 'circulation';
- }
- else if (this.player.mode === 'circulation') {
- this.player.mode = 'random';
+ else if (this.player.options.loop === 'all') {
+ this.player.options.loop = 'one';
+ this.player.template.loop.innerHTML = Icons.loopOne;
}
}
else {
- if (this.player.mode === 'circulation') {
- this.player.mode = 'order';
+ if (this.player.options.loop === 'one') {
+ this.player.options.loop = 'none';
+ this.player.template.loop.innerHTML = Icons.loopNone;
}
- else {
- this.player.mode = 'circulation';
+ else if (this.player.options.loop === 'none') {
+ this.player.options.loop = 'one';
+ this.player.template.loop.innerHTML = Icons.loopOne;
}
}
- this.player.template.mode.innerHTML = Icons[this.player.mode];
- this.player.audio.loop = !(this.player.isMultiple() || this.player.mode === 'order');
});
}
diff --git a/src/js/icons.js b/src/js/icons.js
index 49e92ce..32fb03f 100644
--- a/src/js/icons.js
+++ b/src/js/icons.js
@@ -3,11 +3,12 @@ import pause from '../assets/pause.svg';
import volumeUp from '../assets/volume-up.svg';
import volumeDown from '../assets/volume-down.svg';
import volumeOff from '../assets/volume-off.svg';
-import circulation from '../assets/circulation.svg';
-import random from '../assets/random.svg';
-import order from '../assets/order.svg';
-import single from '../assets/single.svg';
+import orderRandom from '../assets/order-random.svg';
+import orderList from '../assets/order-list.svg';
import menu from '../assets/menu.svg';
+import loopAll from '../assets/loop-all.svg';
+import loopOne from '../assets/loop-one.svg';
+import loopNone from '../assets/loop-none.svg';
const Icons = {
play: play,
@@ -15,11 +16,12 @@ const Icons = {
volumeUp: volumeUp,
volumeDown: volumeDown,
volumeOff: volumeOff,
- circulation: circulation,
- random: random,
- order: order,
- single: single,
+ orderRandom: orderRandom,
+ orderList: orderList,
menu: menu,
+ loopAll: loopAll,
+ loopOne: loopOne,
+ loopNone: loopNone,
};
export default Icons;
diff --git a/src/js/options.js b/src/js/options.js
index 2bc36de..35b4663 100644
--- a/src/js/options.js
+++ b/src/js/options.js
@@ -8,7 +8,8 @@ export default (options) => {
mutex: true,
showlrc: 0,
theme: '#b7daff',
- mode: 'circulation'
+ loop: 'all',
+ order: 'list',
};
for (const defaultKey in defaultOption) {
if (defaultOption.hasOwnProperty(defaultKey) && !options.hasOwnProperty(defaultKey)) {
diff --git a/src/js/player.js b/src/js/player.js
index c2e3564..1d5c9f6 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -26,13 +26,8 @@ class APlayer {
this.container = this.options.container;
this.audios = [];
this.playIndex = 0;
- this.mode = this.options.mode;
this.paused = true;
- // Assume "circulation" mode if single music is loaded and mode isn't already "circulation" or "order".
- if (!this.isMultiple() && this.mode !== 'circulation' && this.mode !== 'order') {
- this.mode = 'circulation';
- }
this.randomOrder = utils.randomOrder(this.options.music.length);
if (this.options.showlrc) {
@@ -66,7 +61,6 @@ class APlayer {
this.template = new Template({
container: this.container,
options: this.options,
- mode: this.mode
});
if (this.template.info.offsetWidth < 200) {
@@ -88,7 +82,7 @@ class APlayer {
this.timer = new Timer(this);
this.initAudio();
- if (this.mode === 'random') {
+ if (this.options.order === 'random') {
this.setAudio(this.randomOrder[0]);
}
else {
@@ -127,7 +121,6 @@ class APlayer {
// show audio time: the metadata has loaded or changed
this.on('durationchange', () => {
- console.log('durationchange');
if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first
this.template.dtime.innerHTML = utils.secondToTime(this.audio.duration);
}
@@ -146,36 +139,40 @@ class APlayer {
// multiple music play
this.on('ended', () => {
- if (this.isMultiple()) {
- if (this.audio.currentTime !== 0) {
- if (this.mode === 'random') {
+ if (this.options.loop === 'none') {
+ if (this.options.order === 'list') {
+ if (this.playIndex < this.options.music.length - 1) {
+ this.setAudio((this.playIndex + 1) % this.options.music.length);
+ this.play();
+ }
+ else {
+ this.setAudio((this.playIndex + 1) % this.options.music.length);
+ this.pause();
+ }
+ }
+ else if (this.options.order === 'random') {
+ if (this.randomOrder.indexOf(this.playIndex) < this.randomOrder.length - 1) {
this.setAudio(this.nextRandomNum());
this.play();
}
- else if (this.mode === 'single') {
- this.setAudio(this.playIndex);
- this.play();
- }
- else if (this.mode === 'order') {
- if (this.playIndex < this.options.music.length - 1) {
- this.setAudio(++this.playIndex);
- this.play();
- }
- else {
- this.pause();
- }
- }
- else if (this.mode === 'circulation') {
- this.playIndex = (this.playIndex + 1) % this.options.music.length;
- this.setAudio(this.playIndex);
- this.play();
+ else {
+ this.setAudio(this.nextRandomNum());
+ this.pause();
}
}
}
- else {
- if (this.mode === 'order') {
- this.pause();
+ else if (this.options.loop === 'one') {
+ this.setAudio(this.playIndex);
+ this.play();
+ }
+ else if (this.options.loop === 'all') {
+ if (this.options.order === 'list') {
+ this.setAudio((this.playIndex + 1) % this.options.music.length);
}
+ else if (this.options.order === 'random') {
+ this.setAudio(this.nextRandomNum());
+ }
+ this.play();
}
});
diff --git a/src/js/template.js b/src/js/template.js
index 5039650..228c933 100644
--- a/src/js/template.js
+++ b/src/js/template.js
@@ -5,7 +5,6 @@ class Template {
constructor (options) {
this.container = options.container;
this.options = options.options;
- this.mode = options.mode;
this.init();
}
@@ -13,7 +12,6 @@ class Template {
this.container.innerHTML = tplPlayer({
options: this.options,
icons: Icons,
- mode: this.mode
});
this.lrc = this.container.querySelector('.aplayer-lrc-contents');
@@ -31,7 +29,8 @@ class Template {
this.volumeBar = this.container.querySelector('.aplayer-volume-bar');
this.volumeButton = this.container.querySelector('.aplayer-time button');
this.volumeBarWrap = this.container.querySelector('.aplayer-volume-bar-wrap');
- this.mode = this.container.querySelector('.aplayer-icon-mode');
+ this.loop = this.container.querySelector('.aplayer-icon-loop');
+ this.order = this.container.querySelector('.aplayer-icon-order');
this.menu = this.container.querySelector('.aplayer-icon-menu');
this.pic = this.container.querySelector('.aplayer-pic');
this.title = this.container.querySelector('.aplayer-title');
diff --git a/src/template/player.art b/src/template/player.art
index edea03d..a02a805 100644
--- a/src/template/player.art
+++ b/src/template/player.art
@@ -32,8 +32,13 @@
-