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

add option mutex (pause other players when started)

This commit is contained in:
DIYgod 2016-03-27 23:59:59 +08:00
parent d34525e4d1
commit f013a39d64
5 changed files with 46 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -63,6 +63,7 @@ ap.init();
narrow: false, // Optional, narrow style
autoplay: true, // Optional, autoplay song(s), not supported by mobile browsers
showlrc: false, // Optional, show lrc
mutex: true, // Optional, pause other players when this player playing
theme: '#e6d0b2', // Optional, theme color, default: #b7daff
music: { // Required, music info
title: 'Preparation', // Required, music title

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

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "aplayer",
"version": "1.3.7",
"version": "1.3.8",
"description": "Wow, such a beautiful html5 music player",
"main": "dist/APlayer.min.js",
"scripts": {

66
src/APlayer.js
View File

@ -5,6 +5,8 @@
* @constructor
*/
(() => {
let APlayers = [];
class APlayer {
constructor (option) {
@ -19,6 +21,7 @@
element: document.getElementsByClassName('aplayer')[0],
narrow: false,
autoplay: false,
mutex: true,
showlrc: false,
theme: '#b7daff'
};
@ -366,6 +369,8 @@
}
this.setMusic(0);
APlayers.push(this);
};
/**
@ -498,37 +503,50 @@
* Play music
*/
play () {
this.button.classList.remove('aplayer-play');
this.button.classList.add('aplayer-pause');
this.button.innerHTML = '';
setTimeout(() => {
this.button.innerHTML = '<i class="demo-icon aplayer-icon-pause"></i>';
}, 100);
this.audio.play();
if (this.playedTime) {
clearInterval(this.playedTime);
}
this.playedTime = setInterval(() => {
this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');
if (this.option.showlrc) {
this.updateLrc();
if (this.audio.paused) {
this.button.classList.remove('aplayer-play');
this.button.classList.add('aplayer-pause');
this.button.innerHTML = '';
setTimeout(() => {
this.button.innerHTML = '<i class="demo-icon aplayer-icon-pause"></i>';
}, 100);
// pause other players (Thanks @Aprikyblue)
if (this.option.mutex) {
for (let i = 0; i < APlayers.length; i++) {
if (this != APlayers[i]) {
APlayers[i].pause();
}
}
}
this.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = this.secondToTime(this.audio.currentTime);
}, 100);
this.audio.play();
if (this.playedTime) {
clearInterval(this.playedTime);
}
this.playedTime = setInterval(() => {
this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');
if (this.option.showlrc) {
this.updateLrc();
}
this.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = this.secondToTime(this.audio.currentTime);
}, 100);
}
};
/**
* Pause music
*/
pause () {
this.button.classList.remove('aplayer-pause');
this.button.classList.add('aplayer-play');
this.button.innerHTML = '';
setTimeout(() => {
this.button.innerHTML = '<i class="demo-icon aplayer-icon-play"></i>';
}, 100);
this.audio.pause();
clearInterval(this.playedTime);
if (!this.audio.paused) {
this.button.classList.remove('aplayer-pause');
this.button.classList.add('aplayer-play');
this.button.innerHTML = '';
setTimeout(() => {
this.button.innerHTML = '<i class="demo-icon aplayer-icon-play"></i>';
}, 100);
this.audio.pause();
clearInterval(this.playedTime);
}
};
}