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

mode -> loop and order

This commit is contained in:
DIYgod 2018-03-08 00:02:07 +08:00
parent e2e8884a45
commit 6029ce980c
No known key found for this signature in database
GPG Key ID: EC0B76A252D3EF67
17 changed files with 100 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
demo/demo.js
View File

@ -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: [
{

2
demo/index.html
View File

@ -55,7 +55,7 @@
<div id="player1" class="aplayer"></div>
<p></p>
<button onclick="ap1.play()">ap.play()</button>
<button onclick="ap1.play(100)">ap.play(100)</button>
<button onclick="ap1.seek(100)">ap.seek(100)</button>
<button onclick="ap1.pause()">ap.pause()</button>
<button onclick="ap1.toggle()">ap.toggle()</button>
<button onclick="ap1.volume(0.1)">ap.volume(0.1)</button>

3
src/assets/circulation.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 29 32">
<path d="M25.6 9.92q1.344 0 2.272 0.928t0.928 2.272v9.28q0 1.28-0.928 2.24t-2.272 0.96h-22.4q-1.28 0-2.24-0.96t-0.96-2.24v-9.28q0-1.344 0.96-2.272t2.24-0.928h8v-3.52l6.4 5.76-6.4 5.76v-3.52h-6.72v6.72h19.84v-6.72h-4.8v-4.48h6.080z"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 325 B

3
src/assets/loop-all.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 29 32">
<path d="M9.333 9.333h13.333v4l5.333-5.333-5.333-5.333v4h-16v8h2.667v-5.333zM22.667 22.667h-13.333v-4l-5.333 5.333 5.333 5.333v-4h16v-8h-2.667v5.333z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 244 B

3
src/assets/loop-none.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 29 32">
<path d="M2.667 7.027l1.707-1.693 22.293 22.293-1.693 1.707-4-4h-11.64v4l-5.333-5.333 5.333-5.333v4h8.973l-8.973-8.973v0.973h-2.667v-3.64l-4-4zM22.667 17.333h2.667v5.573l-2.667-2.667v-2.907zM22.667 6.667v-4l5.333 5.333-5.333 5.333v-4h-10.907l-2.667-2.667h13.573z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 357 B

3
src/assets/loop-one.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 33 32">
<path d="M9.333 9.333h13.333v4l5.333-5.333-5.333-5.333v4h-16v8h2.667v-5.333zM22.667 22.667h-13.333v-4l-5.333 5.333 5.333 5.333v-4h16v-8h-2.667v5.333zM17.333 20v-8h-1.333l-2.667 1.333v1.333h2v5.333h2z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 294 B

0
src/assets/order.svg → src/assets/order-list.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 174 B

After

Width:  |  Height:  |  Size: 174 B

3
src/assets/order-random.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<path d="M22.667 4l7 6-7 6 7 6-7 6v-4h-3.653l-3.76-3.76 2.827-2.827 2.587 2.587h2v-8h-2l-12 12h-6v-4h4.347l12-12h3.653v-4zM2.667 8h6l3.76 3.76-2.827 2.827-2.587-2.587h-4.347v-4z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 272 B

3
src/assets/random.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 33 31">
<path d="M29.867 9.356l-5.003 5.003c-0.094 0.094-0.235 0.141-0.36 0.141-0.266 0-0.5-0.219-0.5-0.5v-3.002h-4.002c-2.079 0-3.064 1.423-3.94 3.111-0.453 0.875-0.844 1.782-1.219 2.673-1.735 4.033-3.768 8.223-8.849 8.223h-3.502c-0.281 0-0.5-0.219-0.5-0.5v-3.002c0-0.281 0.219-0.5 0.5-0.5h3.502c2.079 0 3.064-1.423 3.94-3.111 0.453-0.875 0.844-1.782 1.219-2.673 1.735-4.033 3.768-8.223 8.849-8.223h4.002v-3.002c0-0.281 0.219-0.5 0.5-0.5 0.141 0 0.266 0.063 0.375 0.156l4.987 4.987c0.094 0.094 0.141 0.235 0.141 0.36s-0.047 0.266-0.141 0.36zM10.262 14.781c-0.907-1.892-1.907-3.783-4.268-3.783h-3.502c-0.281 0-0.5-0.219-0.5-0.5v-3.002c0-0.281 0.219-0.5 0.5-0.5h3.502c2.783 0 4.831 1.298 6.41 3.518-0.876 1.344-1.517 2.798-2.142 4.268zM29.867 23.363l-5.003 5.003c-0.094 0.094-0.235 0.141-0.36 0.141-0.266 0-0.5-0.235-0.5-0.5v-3.002c-4.643 0-7.504 0.547-10.396-3.518 0.86-1.344 1.501-2.798 2.126-4.268 0.907 1.892 1.907 3.783 4.268 3.783h4.002v-3.002c0-0.281 0.219-0.5 0.5-0.5 0.141 0 0.266 0.063 0.375 0.156l4.987 4.987c0.094 0.094 0.141 0.235 0.141 0.36s-0.047 0.266-0.141 0.36z"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

3
src/assets/single.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 38 32">
<path d="M2.072 21.577c0.71-0.197 1.125-0.932 0.928-1.641-0.221-0.796-0.333-1.622-0.333-2.457 0-5.049 4.108-9.158 9.158-9.158h5.428c0.056-0.922 0.221-1.816 0.482-2.667h-5.911c-3.158 0-6.128 1.23-8.361 3.463s-3.463 5.203-3.463 8.361c0 1.076 0.145 2.143 0.431 3.171 0.164 0.59 0.7 0.976 1.284 0.976 0.117 0 0.238-0.016 0.357-0.049zM21.394 25.613h-12.409v-2.362c0-0.758-0.528-1.052-1.172-0.652l-5.685 3.522c-0.644 0.4-0.651 1.063-0.014 1.474l5.712 3.69c0.637 0.411 1.158 0.127 1.158-0.63v-2.374h12.409c3.158 0 6.128-1.23 8.361-3.463 1.424-1.424 2.44-3.148 2.99-5.029-0.985 0.368-2.033 0.606-3.125 0.691-1.492 3.038-4.619 5.135-8.226 5.135zM28.718 0c-4.985 0-9.026 4.041-9.026 9.026s4.041 9.026 9.026 9.026 9.026-4.041 9.026-9.026-4.041-9.026-9.026-9.026zM30.392 13.827h-1.728v-6.822c-0.635 0.576-1.433 1.004-2.407 1.285v-1.713c0.473-0.118 0.975-0.325 1.506-0.62 0.532-0.325 0.975-0.665 1.329-1.034h1.3v8.904z"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1000 B

7
src/css/index.scss
View File

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

52
src/js/controller.js
View File

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

18
src/js/icons.js
View File

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

3
src/js/options.js
View File

@ -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)) {

59
src/js/player.js
View File

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

5
src/js/template.js
View File

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

9
src/template/player.art
View File

@ -32,8 +32,13 @@
</div>
</div>
</div>
<button type="button" class="aplayer-icon aplayer-icon-mode">
{{@ icons[mode] }}
{{ if options.music.length > 1 }}
<button type="button" class="aplayer-icon aplayer-icon-order">
{{ if options.order === 'list' }}{{@ icons.orderList }}{{ else if options.order === 'random' }}{{@ icons.orderRandom }}{{ /if }}
</button>
{{ /if }}
<button type="button" class="aplayer-icon aplayer-icon-loop">
{{ if options.loop === 'one' }}{{@ icons.loopOne }}{{ else if options.loop === 'all' }}{{@ icons.loopAll }}{{ else if options.loop === 'none' }}{{@ icons.loopNone }}{{ /if }}
</button>
<button type="button" class="aplayer-icon aplayer-icon-menu">
{{@ icons.menu }}