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

Merge pull request #175 from ericdrobinson/fix-setmusic-broken-pause 

Fix broken pause state when calling setMusic on playing audio element
This commit is contained in:
DIYgod 2017-12-15 10:18:46 +08:00 committed by GitHub
parent 275bbfcd07 e22933a503
commit fa59380e4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/APlayer.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/APlayer.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

63
src/APlayer.js
View File

@ -135,8 +135,7 @@ class APlayer {
// multiple music
this.playIndex = 0;
this.multiple = Object.prototype.toString.call(option.music) === '[object Array]';
if (!this.multiple) {
if (Object.prototype.toString.call(option.music) !== '[object Array]') {
this.option.music = [this.option.music];
}
this.music = this.option.music[this.playIndex];
@ -149,7 +148,8 @@ class APlayer {
this.element.classList.add('aplayer-withlist');
}
if (!this.multiple && this.mode !== 'circulation' && this.mode !== 'order') {
// 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.getRandomOrder();
@ -390,7 +390,7 @@ class APlayer {
// mode control
const modeEle = this.element.getElementsByClassName('aplayer-icon-mode')[0];
modeEle.addEventListener('click', () => {
if (this.multiple) {
if (this.isMultiple()) {
if (this.mode === 'random') {
this.mode = 'single';
}
@ -413,7 +413,7 @@ class APlayer {
}
}
modeEle.innerHTML = this.getSVG(this.mode);
this.audio.loop = !(this.multiple || this.mode === 'order');
this.audio.loop = !(this.isMultiple() || this.mode === 'order');
});
// toggle menu control
@ -434,6 +434,11 @@ class APlayer {
this.setMusic(0);
}
// autoplay
if (this.option.autoplay) {
this.play();
}
instances.push(this);
}
@ -473,12 +478,12 @@ class APlayer {
// get this audio object
if (this.isMobile && this.audio) {
this.audio.src = this.music.url;
this.play();
}
else if (!this.isMobile && this.audios[indexMusic]) {
this.audio = this.audios[indexMusic];
this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;
this.audio.currentTime = 0;
this.audio.src = this.music.url;
}
else {
this.audio = document.createElement("audio");
@ -520,7 +525,7 @@ class APlayer {
}
});
this.audio.addEventListener('pause', () => {
const pauseHandler = () => {
if (this.button && (this.button.classList.contains('aplayer-pause') || this.ended)) {
this.ended = false;
this.button.classList.remove('aplayer-pause');
@ -535,7 +540,11 @@ class APlayer {
clearInterval(this.playedTime);
this.trigger('pause');
}
});
};
this.audio.addEventListener('pause', pauseHandler);
this.audio.addEventListener('abort', pauseHandler);
// show audio time: the metadata has loaded or changed
this.audio.addEventListener('durationchange', () => {
@ -564,17 +573,20 @@ class APlayer {
// multiple music play
this.ended = false;
this.audio.addEventListener('ended', () => {
if (this.multiple) {
if (this.isMultiple()) {
if (this.audio.currentTime !== 0) {
if (this.mode === 'random') {
this.setMusic(this.nextRandomNum());
this.play();
}
else if (this.mode === 'single') {
this.setMusic(this.playIndex);
this.play();
}
else if (this.mode === 'order') {
if (this.playIndex < this.option.music.length - 1) {
this.setMusic(++this.playIndex);
this.play();
}
else {
this.ended = true;
@ -583,12 +595,9 @@ class APlayer {
}
}
else if (this.mode === 'circulation') {
if (this.playIndex < this.option.music.length - 1) {
this.setMusic(++this.playIndex);
}
else {
this.setMusic(0);
}
this.playIndex = (this.playIndex + 1) % this.option.music.length;
this.setMusic(this.playIndex);
this.play();
}
}
}
@ -605,7 +614,7 @@ class APlayer {
this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;
// loop
this.audio.loop = !(this.multiple || this.mode === 'order');
this.audio.loop = !(this.isMultiple() || this.mode === 'order');
this.audios[indexMusic] = this.audio;
}
@ -721,12 +730,6 @@ class APlayer {
if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first
this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.audio.duration ? this.secondToTime(this.audio.duration) : '00:00';
}
// autoplay
if (this.option.autoplay && !this.isMobile) {
this.play();
}
this.option.autoplay = true; // autoplay next music
}
/**
@ -790,6 +793,13 @@ class APlayer {
}
}
/**
* get whether multiple music definitions are loaded
*/
isMultiple() {
return this.option.music.length > 1;
}
/**
* get random order, using Fisher–Yates shuffle
*/
@ -811,7 +821,7 @@ class APlayer {
}
return shuffled;
}
if (this.multiple) {
if (this.isMultiple()) {
this.randomOrder = shuffle([...Array(this.option.music.length)].map(function(item, i) {
return i;
}));
@ -822,7 +832,7 @@ class APlayer {
* get next random number
*/
nextRandomNum() {
if (this.multiple) {
if (this.isMultiple()) {
let index = this.randomOrder.indexOf(this.playIndex);
if (index === this.randomOrder.length - 1) {
return this.randomOrder[0];
@ -857,6 +867,8 @@ class APlayer {
* @param {Array} newMusic
*/
addMusic(newMusic) {
const wasSingle = !this.isMultiple();
this.option.music = this.option.music.concat(newMusic);
const list = this.element.getElementsByClassName('aplayer-list')[0];
@ -873,8 +885,7 @@ class APlayer {
}
listEle.innerHTML += newItemHTML;
if (!this.multiple) {
this.multiple = true;
if (wasSingle && this.isMultiple()) {
this.element.classList.add('aplayer-withlist');
this.audio.loop = false;
}