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

improve UI; new API: toggle

This commit is contained in:
DIYgod 2016-07-11 10:16:53 +08:00
parent a5cc501f3b
commit d116c75a09
No known key found for this signature in database
GPG Key ID: F8797DD1088C6506
6 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -75,6 +75,7 @@ var option = {
+ `ap.play()` // Resume play
+ `ap.play(time)` // Set currentTime
+ `ap.pause()` // Pause
+ `ap.toggle()` // Toggle between play and pause
+ `ap.volume(percentage)` // Set volume
+ `ap.on(event, handler)` // Event binding

2
dist/APlayer.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

34
src/APlayer.js
View File

@ -26,7 +26,7 @@
`;
};
this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);
this.isMobile = /mobile/i.test(window.navigator.userAgent);
// compatibility: some mobile browsers don't suppose autoplay
if (this.isMobile) {
option.autoplay = false;
@ -258,13 +258,19 @@
}
this.element.innerHTML = eleHTML;
// hide loop button in arrow container
if (this.element.offsetWidth < 300) {
this.element.getElementsByClassName('aplayer-icon-loop')[0].style.display = 'none';
}
this.ptime = this.element.getElementsByClassName('aplayer-ptime')[0];
if (this.element.getElementsByClassName('aplayer-info')[0].offsetWidth < 200) {
this.element.getElementsByClassName('aplayer-time')[0].classList.add('aplayer-time-narrow');
}
// fix the width of aplayer bar
this.element.getElementsByClassName('aplayer-bar-wrap')[0].style.marginRight = this.element.getElementsByClassName('aplayer-time')[0].offsetWidth + 5 + 'px';
this.bar = this.element.getElementsByClassName('aplayer-bar-wrap')[0];
this.bar.style.marginRight = this.element.getElementsByClassName('aplayer-time')[0].offsetWidth + 5 + 'px';
// switch to narrow style
if (this.option.narrow) {
@ -290,12 +296,15 @@
const musicIndex = parseInt(listItem[i].getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1;
if (musicIndex !== this.playIndex) {
this.setMusic(musicIndex);
}
if (this.isMobile) {
this.pause();
if (this.isMobile) {
this.pause();
}
else {
this.play();
}
}
else {
this.play();
this.toggle();
}
});
}
@ -305,7 +314,6 @@
this.playedBar = this.element.getElementsByClassName('aplayer-played')[0];
this.loadedBar = this.element.getElementsByClassName('aplayer-loaded')[0];
this.thumb = this.element.getElementsByClassName('aplayer-thumb')[0];
this.bar = this.element.getElementsByClassName('aplayer-bar')[0];
let barWidth;
this.bar.addEventListener('click', (event) => {
const e = event || window.event;
@ -687,6 +695,18 @@
this.event[name].push(func);
}
}
/**
* toggle between play and pause
*/
toggle() {
if (this.audio.paused) {
this.play();
}
else {
this.pause();
}
}
}
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {

7
src/APlayer.scss
View File

@ -132,7 +132,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 17px;
margin-bottom: 13px;
.aplayer-title {
font-size: 14px;
@ -149,13 +149,14 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
.aplayer-bar-wrap {
margin: 0 140px 0 5px;
padding: 4px 0;
cursor: pointer !important;
.aplayer-bar {
position: relative;
height: 2px;
width: 100%;
background: #cdcdcd;
cursor: pointer !important;
.aplayer-loaded {
position: absolute;
@ -193,7 +194,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
.aplayer-time {
position: absolute;
right: 0;
bottom: -7px;
bottom: -3px;
height: 17px;
color: #999;
font-size: 11px;