Skip to content

Commit

Permalink
new api: destroy, addMusic
Browse files Browse the repository at this point in the history
  • Loading branch information
@DIYgod
DIYgod committed Mar 26, 2017
1 parent c3d98f3 commit cbc0f99
Show file tree
Hide file tree
Showing 5 changed files with 153 additions and 101 deletions.
9 changes: 7 additions & 2 deletions dist/APlayer.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/APlayer.min.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "aplayer",
"version": "1.5.9",
"version": "1.6.0",
"description": "Wow, such a beautiful html5 music player",
"main": "dist/APlayer.min.js",
"scripts": {
Expand Down
224 changes: 128 additions & 96 deletions src/APlayer.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
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;");
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;");

require('./APlayer.scss');

Expand Down Expand Up @@ -55,9 +55,6 @@ class APlayer {
}
}

// multiple music
this.playIndex = Object.prototype.toString.call(option.music) === '[object Array]' ? 0 : -1;

this.option = option;
this.audios = [];
this.mode = option.mode;
Expand Down Expand Up @@ -136,15 +133,20 @@ class APlayer {
}
};

this.multiple = this.playIndex > -1;
this.music = this.multiple ? this.option.music[this.playIndex] : this.option.music;
// multiple music
this.playIndex = 0;
this.multiple = Object.prototype.toString.call(option.music) === '[object Array]';
if (!this.multiple) {
this.option.music = [this.option.music];
}
this.music = this.option.music[this.playIndex];

// add class aplayer-withlrc
if (this.option.showlrc) {
this.element.classList.add('aplayer-withlrc');
}
if (this.option.music.length > 1) {
this.element.classList.add('aplayer-list');
this.element.classList.add('aplayer-withlist');
}

if (!this.multiple && this.mode !== 'circulation' && this.mode !== 'order') {
Expand Down Expand Up @@ -195,14 +197,12 @@ class APlayer {
<button type="button" class="aplayer-icon aplayer-icon-mode">`
+ this.getSVG(this.mode)
+ ` </button>
${(this.multiple ? `<button type="button" class="aplayer-icon aplayer-icon-menu">`
<button type="button" class="aplayer-icon aplayer-icon-menu">`
+ this.getSVG('menu')
+ ` </button>` : ``)}
+ ` </button>
</div>
</div>
</div>`;
if (this.multiple) {
eleHTML += `
</div>
<div class="aplayer-list" ${this.option.listmaxheight ? `style="max-height: ${this.option.listmaxheight}` : ``}">
<ol>`;
for (let i = 0; i < this.option.music.length; i++) {
Expand All @@ -217,7 +217,6 @@ class APlayer {
eleHTML += `
</ol>
</div>`
}
this.element.innerHTML = eleHTML;

// hide mode button in arrow container
Expand Down Expand Up @@ -246,21 +245,24 @@ class APlayer {
});

// click music list: change music
if (this.multiple) {
const listItem = this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li');
for (let i = 0; i < this.option.music.length; i++) {
listItem[i].addEventListener('click', () => {
const musicIndex = parseInt(listItem[i].getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1;
if (musicIndex !== this.playIndex) {
this.setMusic(musicIndex);
this.play();
}
else {
this.toggle();
}
});
const list = this.element.getElementsByClassName('aplayer-list')[0];
list.addEventListener('click', (e) => {
let target;
if (e.target.tagName.toUpperCase() === 'LI') {
target = e.target;
}
}
else {
target = e.target.parentElement;
}
const musicIndex = parseInt(target.getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1;
if (musicIndex !== this.playIndex) {
this.setMusic(musicIndex);
this.play();
}
else {
this.toggle();
}
});

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

// toggle menu control
if (this.multiple) {
const list = this.element.getElementsByClassName('aplayer-list')[0];
list.style.height = list.offsetHeight + 'px';
this.element.getElementsByClassName('aplayer-icon-menu')[0].addEventListener('click', () => {
if (!list.classList.contains('aplayer-list-hide')) {
list.classList.add('aplayer-list-hide');
}
else {
list.classList.remove('aplayer-list-hide');
}
});
}
list.style.height = list.offsetHeight + 'px';
this.element.getElementsByClassName('aplayer-icon-menu')[0].addEventListener('click', () => {
if (!list.classList.contains('aplayer-list-hide')) {
list.classList.add('aplayer-list-hide');
}
else {
list.classList.remove('aplayer-list-hide');
}
});

if (this.mode === 'random') {
this.setMusic(this.randomOrder[0]);
Expand All @@ -443,37 +442,33 @@ class APlayer {
*/
setMusic(index) {
// get this.music
if (this.multiple && typeof(index) !== 'undefined') {
if (typeof(index) !== 'undefined') {
this.playIndex = index;
}
const indexMusic = this.playIndex;
this.music = this.multiple ? this.option.music[indexMusic] : this.option.music;
this.music = this.option.music[indexMusic];

// set html
if (this.music.pic) {
this.element.getElementsByClassName('aplayer-pic')[0].style.backgroundImage = `url('${this.music.pic}')`;
}
this.element.getElementsByClassName('aplayer-title')[0].innerHTML = this.music.title;
this.element.getElementsByClassName('aplayer-author')[0].innerHTML = ` - ${this.music.author}`;
if (this.multiple) {
if (this.element.getElementsByClassName('aplayer-list-light')[0]) {
this.element.getElementsByClassName('aplayer-list-light')[0].classList.remove('aplayer-list-light');
}
this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[indexMusic].classList.add('aplayer-list-light');
if (this.element.getElementsByClassName('aplayer-list-light')[0]) {
this.element.getElementsByClassName('aplayer-list-light')[0].classList.remove('aplayer-list-light');
}
this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[indexMusic].classList.add('aplayer-list-light');

// set the previous audio object
if (this.audio) {
this.pause();
this.audio.currentTime = 0;
}

if (this.multiple) {
this.element.getElementsByClassName('aplayer-list')[0].scrollTop = indexMusic * 33;
}
this.element.getElementsByClassName('aplayer-list')[0].scrollTop = indexMusic * 33;

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

this.audio.addEventListener('pause', () => {
if (this.button.classList.contains('aplayer-pause') || this.ended) {
if (this.button && (this.button.classList.contains('aplayer-pause') || this.ended)) {
this.ended = false;
this.button.classList.remove('aplayer-pause');
this.button.classList.add('aplayer-play');
Expand Down Expand Up @@ -556,8 +551,8 @@ class APlayer {

// multiple music play
this.ended = false;
if (this.multiple) {
this.audio.addEventListener('ended', () => {
this.audio.addEventListener('ended', () => {
if (this.multiple) {
if (this.isMobile) {
this.ended = true;
this.pause();
Expand Down Expand Up @@ -589,27 +584,23 @@ class APlayer {
}
}
}
});
}
else {
this.audio.addEventListener('ended', () => {
}
else {
if (this.mode === 'order') {
this.ended = true;
this.pause();
this.trigger('ended');
}
});
}
}
});

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

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

if (this.multiple) {
this.audios[indexMusic] = this.audio;
}
this.audios[indexMusic] = this.audio;
}
else {
this.audio = this.audios[indexMusic];
Expand Down Expand Up @@ -654,17 +645,12 @@ class APlayer {

// fill in lrc
if (this.option.showlrc) {
const index = this.multiple ? indexMusic : 0;
const index = indexMusic;

if (!this.lrcs[index]) {
let lrcs = '';
if (this.option.showlrc === 1) {
if (this.multiple) {
lrcs = this.option.music[index].lrc;
}
else {
lrcs = this.option.music.lrc;
}
lrcs = this.option.music[index].lrc;
}
else if (this.option.showlrc === 2 || this.option.showlrc === true) {
lrcs = this.savelrc[index];
Expand All @@ -676,40 +662,41 @@ class APlayer {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
lrcs = xhr.responseText;
this.lrcs[index] = parseLrc(lrcs);
this.lrc = this.lrcs[index];
let lrcHTML = '';
this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0];
for (let i = 0; i < this.lrc.length; i++) {
lrcHTML += `<p>${this.lrc[i][1]}</p>`;
}
this.lrcContents.innerHTML = lrcHTML;
if (!this.lrcIndex) {
this.lrcIndex = 0;
}
this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current');
this.lrcContents.style.transform = 'translateY(0px)';
this.lrcContents.style.webkitTransform = 'translateY(0px)';
}
else {
console.log('Request was unsuccessful: ' + xhr.status);
this.lrcs[index] = [['00:00', 'Not available']];
}
this.lrc = this.lrcs[index];
let lrcHTML = '';
this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0];
for (let i = 0; i < this.lrc.length; i++) {
lrcHTML += `<p>${this.lrc[i][1]}</p>`;
}
this.lrcContents.innerHTML = lrcHTML;
if (!this.lrcIndex) {
this.lrcIndex = 0;
}
this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current');
this.lrcContents.style.transform = 'translateY(0px)';
this.lrcContents.style.webkitTransform = 'translateY(0px)';
}
};
let apiurl;
if (this.multiple) {
apiurl = this.option.music[index].lrc;
}
else {
apiurl = this.option.music.lrc;
}
apiurl = this.option.music[index].lrc;
xhr.open('get', apiurl, true);
xhr.send(null);
}
if (lrcs) {
this.lrcs[index] = parseLrc(lrcs);
}
else {
this.lrcs[index] = [['00:00', 'Loading']];
if (this.option.showlrc === 3) {
this.lrcs[index] = [['00:00', 'Loading']];
}
else {
this.lrcs[index] = [['00:00', 'Not available']];
}
}
}

Expand Down Expand Up @@ -827,13 +814,9 @@ class APlayer {
return shuffled;
}
if (this.multiple) {
if (!this.normalOrder) {
this.normalOrder = [];
for (let i = 0; i < this.option.music.length; i++) {
this.normalOrder[i] = i;
}
}
this.randomOrder = shuffle(this.normalOrder);
this.randomOrder = shuffle([...Array(this.option.music.length)].map(function(item, i) {
return i;
}));
}
}

Expand All @@ -854,6 +837,55 @@ class APlayer {
return 0;
}
}

/**
* destroy this player
*/
destroy() {
instances.splice(instances.indexOf(this), 1);
this.pause();
this.element.innerHTML = '';
clearInterval(this.playedTime);
for (let key in this) {
if (this.hasOwnProperty(key)) {
delete this[key];
}
}
}

/**
* add music dynamically
*
* @param {Array} newMusic
*/
addMusic(newMusic) {
this.option.music = this.option.music.concat(newMusic);

const list = this.element.getElementsByClassName('aplayer-list')[0];
const listEle = list.getElementsByTagName('ol')[0];
let newItemHTML = ``;
for (let i = 0; i < newMusic.length; i++) {
newItemHTML += `
<li>
<span class="aplayer-list-cur" style="background: ${this.option.theme};"></span>
<span class="aplayer-list-index">${this.option.music.length - newMusic.length + i + 1}</span>
<span class="aplayer-list-title">${newMusic[i].title}</span>
<span class="aplayer-list-author">${newMusic[i].author}</span>
</li>`
}
listEle.innerHTML += newItemHTML;

if (!this.multiple) {
this.multiple = true;
this.element.classList.add('aplayer-withlist');
this.audio.loop = false;
}

list.style.height = 'auto';
list.style.height = list.offsetHeight + 'px';

this.getRandomOrder();
}
}

module.exports = APlayer;
Loading

0 comments on commit cbc0f99

Please sign in to comment.