Skip to content

Commit cbc0f99

Browse files
DIYgodDIYgod
committed
new api: destroy, addMusic
1 parent c3d98f3 commit cbc0f99

5 files changed

Lines changed: 153 additions & 101 deletions

File tree

‎dist/APlayer.min.js‎

Lines changed: 7 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/APlayer.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "aplayer",
3-
"version": "1.5.9",
3+
"version": "1.6.0",
44
"description": "Wow, such a beautiful html5 music player",
55
"main": "dist/APlayer.min.js",
66
"scripts": {

‎src/APlayer.js‎

Lines changed: 128 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
console.log("\n %c APlayer 1.5.9 %c http://aplayer.js.org \n\n","color: #fadfa3; background: #030307; padding:5px 0;","background: #fadfa3; padding:5px 0;");
1+
console.log("\n %c APlayer 1.6.0 %c http://aplayer.js.org \n\n","color: #fadfa3; background: #030307; padding:5px 0;","background: #fadfa3; padding:5px 0;");
22

33
require('./APlayer.scss');
44

@@ -55,9 +55,6 @@ class APlayer {
5555
}
5656
}
5757

58-
// multiple music
59-
this.playIndex = Object.prototype.toString.call(option.music) === '[object Array]' ? 0 : -1;
60-
6158
this.option = option;
6259
this.audios = [];
6360
this.mode = option.mode;
@@ -136,15 +133,20 @@ class APlayer {
136133
}
137134
};
138135

139-
this.multiple = this.playIndex > -1;
140-
this.music = this.multiple ? this.option.music[this.playIndex] : this.option.music;
136+
// multiple music
137+
this.playIndex = 0;
138+
this.multiple = Object.prototype.toString.call(option.music) === '[object Array]';
139+
if (!this.multiple) {
140+
this.option.music = [this.option.music];
141+
}
142+
this.music = this.option.music[this.playIndex];
141143

142144
// add class aplayer-withlrc
143145
if (this.option.showlrc) {
144146
this.element.classList.add('aplayer-withlrc');
145147
}
146148
if (this.option.music.length > 1) {
147-
this.element.classList.add('aplayer-list');
149+
this.element.classList.add('aplayer-withlist');
148150
}
149151

150152
if (!this.multiple && this.mode !== 'circulation' && this.mode !== 'order') {
@@ -195,14 +197,12 @@ class APlayer {
195197
<button type="button" class="aplayer-icon aplayer-icon-mode">`
196198
+ this.getSVG(this.mode)
197199
+ ` </button>
198-
${(this.multiple ? `<button type="button" class="aplayer-icon aplayer-icon-menu">`
200+
<button type="button" class="aplayer-icon aplayer-icon-menu">`
199201
+ this.getSVG('menu')
200-
+ ` </button>` : ``)}
202+
+ ` </button>
201203
</div>
202204
</div>
203-
</div>`;
204-
if (this.multiple) {
205-
eleHTML += `
205+
</div>
206206
<div class="aplayer-list" ${this.option.listmaxheight ? `style="max-height: ${this.option.listmaxheight}` : ``}">
207207
<ol>`;
208208
for (let i = 0; i < this.option.music.length; i++) {
@@ -217,7 +217,6 @@ class APlayer {
217217
eleHTML += `
218218
</ol>
219219
</div>`
220-
}
221220
this.element.innerHTML = eleHTML;
222221

223222
// hide mode button in arrow container
@@ -246,21 +245,24 @@ class APlayer {
246245
});
247246

248247
// click music list: change music
249-
if (this.multiple) {
250-
const listItem = this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li');
251-
for (let i = 0; i < this.option.music.length; i++) {
252-
listItem[i].addEventListener('click', () => {
253-
const musicIndex = parseInt(listItem[i].getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1;
254-
if (musicIndex !== this.playIndex) {
255-
this.setMusic(musicIndex);
256-
this.play();
257-
}
258-
else {
259-
this.toggle();
260-
}
261-
});
248+
const list = this.element.getElementsByClassName('aplayer-list')[0];
249+
list.addEventListener('click', (e) => {
250+
let target;
251+
if (e.target.tagName.toUpperCase() === 'LI') {
252+
target = e.target;
262253
}
263-
}
254+
else {
255+
target = e.target.parentElement;
256+
}
257+
const musicIndex = parseInt(target.getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1;
258+
if (musicIndex !== this.playIndex) {
259+
this.setMusic(musicIndex);
260+
this.play();
261+
}
262+
else {
263+
this.toggle();
264+
}
265+
});
264266

265267
// control play progress
266268
bar.playedBar = this.element.getElementsByClassName('aplayer-played')[0];
@@ -415,18 +417,15 @@ class APlayer {
415417
});
416418

417419
// toggle menu control
418-
if (this.multiple) {
419-
const list = this.element.getElementsByClassName('aplayer-list')[0];
420-
list.style.height = list.offsetHeight + 'px';
421-
this.element.getElementsByClassName('aplayer-icon-menu')[0].addEventListener('click', () => {
422-
if (!list.classList.contains('aplayer-list-hide')) {
423-
list.classList.add('aplayer-list-hide');
424-
}
425-
else {
426-
list.classList.remove('aplayer-list-hide');
427-
}
428-
});
429-
}
420+
list.style.height = list.offsetHeight + 'px';
421+
this.element.getElementsByClassName('aplayer-icon-menu')[0].addEventListener('click', () => {
422+
if (!list.classList.contains('aplayer-list-hide')) {
423+
list.classList.add('aplayer-list-hide');
424+
}
425+
else {
426+
list.classList.remove('aplayer-list-hide');
427+
}
428+
});
430429

431430
if (this.mode === 'random') {
432431
this.setMusic(this.randomOrder[0]);
@@ -443,37 +442,33 @@ class APlayer {
443442
*/
444443
setMusic(index) {
445444
// get this.music
446-
if (this.multiple && typeof(index) !== 'undefined') {
445+
if (typeof(index) !== 'undefined') {
447446
this.playIndex = index;
448447
}
449448
const indexMusic = this.playIndex;
450-
this.music = this.multiple ? this.option.music[indexMusic] : this.option.music;
449+
this.music = this.option.music[indexMusic];
451450

452451
// set html
453452
if (this.music.pic) {
454453
this.element.getElementsByClassName('aplayer-pic')[0].style.backgroundImage = `url('${this.music.pic}')`;
455454
}
456455
this.element.getElementsByClassName('aplayer-title')[0].innerHTML = this.music.title;
457456
this.element.getElementsByClassName('aplayer-author')[0].innerHTML = ` - ${this.music.author}`;
458-
if (this.multiple) {
459-
if (this.element.getElementsByClassName('aplayer-list-light')[0]) {
460-
this.element.getElementsByClassName('aplayer-list-light')[0].classList.remove('aplayer-list-light');
461-
}
462-
this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[indexMusic].classList.add('aplayer-list-light');
457+
if (this.element.getElementsByClassName('aplayer-list-light')[0]) {
458+
this.element.getElementsByClassName('aplayer-list-light')[0].classList.remove('aplayer-list-light');
463459
}
460+
this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[indexMusic].classList.add('aplayer-list-light');
464461

465462
// set the previous audio object
466463
if (this.audio) {
467464
this.pause();
468465
this.audio.currentTime = 0;
469466
}
470467

471-
if (this.multiple) {
472-
this.element.getElementsByClassName('aplayer-list')[0].scrollTop = indexMusic * 33;
473-
}
468+
this.element.getElementsByClassName('aplayer-list')[0].scrollTop = indexMusic * 33;
474469

475470
// get this audio object
476-
if ((this.multiple && !this.audios[indexMusic]) || this.playIndex === -1) {
471+
if (!this.audios[indexMusic]) {
477472
this.audio = document.createElement("audio");
478473
this.audio.src = this.music.url;
479474
this.audio.preload = this.option.preload ? this.option.preload : 'auto';
@@ -514,7 +509,7 @@ class APlayer {
514509
});
515510

516511
this.audio.addEventListener('pause', () => {
517-
if (this.button.classList.contains('aplayer-pause') || this.ended) {
512+
if (this.button && (this.button.classList.contains('aplayer-pause') || this.ended)) {
518513
this.ended = false;
519514
this.button.classList.remove('aplayer-pause');
520515
this.button.classList.add('aplayer-play');
@@ -556,8 +551,8 @@ class APlayer {
556551

557552
// multiple music play
558553
this.ended = false;
559-
if (this.multiple) {
560-
this.audio.addEventListener('ended', () => {
554+
this.audio.addEventListener('ended', () => {
555+
if (this.multiple) {
561556
if (this.isMobile) {
562557
this.ended = true;
563558
this.pause();
@@ -589,27 +584,23 @@ class APlayer {
589584
}
590585
}
591586
}
592-
});
593-
}
594-
else {
595-
this.audio.addEventListener('ended', () => {
587+
}
588+
else {
596589
if (this.mode === 'order') {
597590
this.ended = true;
598591
this.pause();
599592
this.trigger('ended');
600593
}
601-
});
602-
}
594+
}
595+
});
603596

604597
// control volume
605598
this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;
606599

607600
// loop
608601
this.audio.loop = !(this.multiple || this.mode === 'order');
609602

610-
if (this.multiple) {
611-
this.audios[indexMusic] = this.audio;
612-
}
603+
this.audios[indexMusic] = this.audio;
613604
}
614605
else {
615606
this.audio = this.audios[indexMusic];
@@ -654,17 +645,12 @@ class APlayer {
654645

655646
// fill in lrc
656647
if (this.option.showlrc) {
657-
const index = this.multiple ? indexMusic : 0;
648+
const index = indexMusic;
658649

659650
if (!this.lrcs[index]) {
660651
let lrcs = '';
661652
if (this.option.showlrc === 1) {
662-
if (this.multiple) {
663-
lrcs = this.option.music[index].lrc;
664-
}
665-
else {
666-
lrcs = this.option.music.lrc;
667-
}
653+
lrcs = this.option.music[index].lrc;
668654
}
669655
else if (this.option.showlrc === 2 || this.option.showlrc === true) {
670656
lrcs = this.savelrc[index];
@@ -676,40 +662,41 @@ class APlayer {
676662
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
677663
lrcs = xhr.responseText;
678664
this.lrcs[index] = parseLrc(lrcs);
679-
this.lrc = this.lrcs[index];
680-
let lrcHTML = '';
681-
this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0];
682-
for (let i = 0; i < this.lrc.length; i++) {
683-
lrcHTML += `<p>${this.lrc[i][1]}</p>`;
684-
}
685-
this.lrcContents.innerHTML = lrcHTML;
686-
if (!this.lrcIndex) {
687-
this.lrcIndex = 0;
688-
}
689-
this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current');
690-
this.lrcContents.style.transform = 'translateY(0px)';
691-
this.lrcContents.style.webkitTransform = 'translateY(0px)';
692665
}
693666
else {
694667
console.log('Request was unsuccessful: ' + xhr.status);
668+
this.lrcs[index] = [['00:00', 'Not available']];
695669
}
670+
this.lrc = this.lrcs[index];
671+
let lrcHTML = '';
672+
this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0];
673+
for (let i = 0; i < this.lrc.length; i++) {
674+
lrcHTML += `<p>${this.lrc[i][1]}</p>`;
675+
}
676+
this.lrcContents.innerHTML = lrcHTML;
677+
if (!this.lrcIndex) {
678+
this.lrcIndex = 0;
679+
}
680+
this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current');
681+
this.lrcContents.style.transform = 'translateY(0px)';
682+
this.lrcContents.style.webkitTransform = 'translateY(0px)';
696683
}
697684
};
698685
let apiurl;
699-
if (this.multiple) {
700-
apiurl = this.option.music[index].lrc;
701-
}
702-
else {
703-
apiurl = this.option.music.lrc;
704-
}
686+
apiurl = this.option.music[index].lrc;
705687
xhr.open('get', apiurl, true);
706688
xhr.send(null);
707689
}
708690
if (lrcs) {
709691
this.lrcs[index] = parseLrc(lrcs);
710692
}
711693
else {
712-
this.lrcs[index] = [['00:00', 'Loading']];
694+
if (this.option.showlrc === 3) {
695+
this.lrcs[index] = [['00:00', 'Loading']];
696+
}
697+
else {
698+
this.lrcs[index] = [['00:00', 'Not available']];
699+
}
713700
}
714701
}
715702

@@ -827,13 +814,9 @@ class APlayer {
827814
return shuffled;
828815
}
829816
if (this.multiple) {
830-
if (!this.normalOrder) {
831-
this.normalOrder = [];
832-
for (let i = 0; i < this.option.music.length; i++) {
833-
this.normalOrder[i] = i;
834-
}
835-
}
836-
this.randomOrder = shuffle(this.normalOrder);
817+
this.randomOrder = shuffle([...Array(this.option.music.length)].map(function(item, i) {
818+
return i;
819+
}));
837820
}
838821
}
839822

@@ -854,6 +837,55 @@ class APlayer {
854837
return 0;
855838
}
856839
}
840+
841+
/**
842+
* destroy this player
843+
*/
844+
destroy() {
845+
instances.splice(instances.indexOf(this), 1);
846+
this.pause();
847+
this.element.innerHTML = '';
848+
clearInterval(this.playedTime);
849+
for (let key in this) {
850+
if (this.hasOwnProperty(key)) {
851+
delete this[key];
852+
}
853+
}
854+
}
855+
856+
/**
857+
* add music dynamically
858+
*
859+
* @param {Array} newMusic
860+
*/
861+
addMusic(newMusic) {
862+
this.option.music = this.option.music.concat(newMusic);
863+
864+
const list = this.element.getElementsByClassName('aplayer-list')[0];
865+
const listEle = list.getElementsByTagName('ol')[0];
866+
let newItemHTML = ``;
867+
for (let i = 0; i < newMusic.length; i++) {
868+
newItemHTML += `
869+
<li>
870+
<span class="aplayer-list-cur" style="background: ${this.option.theme};"></span>
871+
<span class="aplayer-list-index">${this.option.music.length - newMusic.length + i + 1}</span>
872+
<span class="aplayer-list-title">${newMusic[i].title}</span>
873+
<span class="aplayer-list-author">${newMusic[i].author}</span>
874+
</li>`
875+
}
876+
listEle.innerHTML += newItemHTML;
877+
878+
if (!this.multiple) {
879+
this.multiple = true;
880+
this.element.classList.add('aplayer-withlist');
881+
this.audio.loop = false;
882+
}
883+
884+
list.style.height = 'auto';
885+
list.style.height = list.offsetHeight + 'px';
886+
887+
this.getRandomOrder();
888+
}
857889
}
858890

859891
module.exports = APlayer;

0 commit comments

Comments
 (0)