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

add play button's animation, fix loop bug

This commit is contained in:
DIYgod 2016-01-16 21:06:04 +08:00
parent c28fe7803f
commit a77b723c6e
6 changed files with 87 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -192,8 +192,7 @@ $ npm run build
- [x] 默认选项
- [x] 移动端兼容性
- [x] 播放列表
- [ ] 播放暂停按钮切换动画
- [ ] 歌词滚动展示
- [x] 播放暂停按钮切换动画
## Issues

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
package.json
View File

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

132
src/APlayer.js
View File

@ -54,61 +54,58 @@
// fill in HTML
var eleHTML = ''
+ '<div class="aplayer-pic">'
+ '<div class="aplayer-button aplayer-pause aplayer-hide">'
+ '<i class="demo-icon aplayer-icon-pause"></i>'
+ '</div>'
+ '<div class="aplayer-button aplayer-play">'
+ '<i class="demo-icon aplayer-icon-play"></i>'
+ '</div>'
+ '<div class="aplayer-button aplayer-play">'
+ '<i class="demo-icon aplayer-icon-play"></i>'
+ '</div>'
+ '</div>'
+ '<div class="aplayer-info">'
+ '<div class="aplayer-music">'
+ '<span class="aplayer-title"></span>'
+ '<span class="aplayer-author"></span>'
+ '</div>'
+ '<div class="aplayer-lrc">'
+ '<div class="aplayer-lrc-contents" style="transform: translateY(0); -webkit-transform: translateY(0);"></div>'
+ '</div>'
+ '<div class="aplayer-controller">'
+ '<div class="aplayer-bar-wrap">'
+ '<div class="aplayer-bar">'
+ '<div class="aplayer-loaded" style="width: 0"></div>'
+ '<div class="aplayer-played" style="width: 0; background: ' + this.option.theme + ';">'
+ '<span class="aplayer-thumb" style="border: 1px solid ' + this.option.theme + ';"></span>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="aplayer-time">'
+ ' - <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span>'
+ '<div class="aplayer-volume-wrap">'
+ '<i class="demo-icon aplayer-icon-volume-down"></i>'
+ '<div class="aplayer-volume-bar-wrap">'
+ '<div class="aplayer-volume-bar">'
+ '<div class="aplayer-volume" style="height: 80%; background: ' + this.option.theme + ';"></div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<i class="demo-icon aplayer-icon-loop"></i>'
+ (this.playIndex > -1 ? '<i class="demo-icon aplayer-icon-menu"></i>' : '')
+ '</div>'
+ '</div>'
+ '<div class="aplayer-music">'
+ '<span class="aplayer-title"></span>'
+ '<span class="aplayer-author"></span>'
+ '</div>'
+ '<div class="aplayer-lrc">'
+ '<div class="aplayer-lrc-contents" style="transform: translateY(0); -webkit-transform: translateY(0);"></div>'
+ '</div>'
+ '<div class="aplayer-controller">'
+ '<div class="aplayer-bar-wrap">'
+ '<div class="aplayer-bar">'
+ '<div class="aplayer-loaded" style="width: 0"></div>'
+ '<div class="aplayer-played" style="width: 0; background: ' + this.option.theme + ';">'
+ '<span class="aplayer-thumb" style="border: 1px solid ' + this.option.theme + ';"></span>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="aplayer-time">'
+ ' - <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span>'
+ '<div class="aplayer-volume-wrap">'
+ '<i class="demo-icon aplayer-icon-volume-down"></i>'
+ '<div class="aplayer-volume-bar-wrap">'
+ '<div class="aplayer-volume-bar">'
+ '<div class="aplayer-volume" style="height: 80%; background: ' + this.option.theme + ';"></div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<i class="demo-icon aplayer-icon-loop"></i>'
+ (this.playIndex > -1 ? '<i class="demo-icon aplayer-icon-menu"></i>' : '')
+ '</div>'
+ '</div>'
+ '</div>';
if (this.playIndex > -1) {
eleHTML += ''
+ '<div class="aplayer-list">'
+ '<ol>';
+ '<div class="aplayer-list">'
+ '<ol>';
for (i = 0; i < this.option.music.length; i++) {
eleHTML += ''
+ '<li>'
+ '<span class="aplayer-list-cur" style="background: ' + this.option.theme + ';"></span>'
+ '<span class="aplayer-list-index">' + (i + 1) + '</span>'
+ '<span class="aplayer-list-title">' + this.option.music[i].title + '</span>'
+ '<span class="aplayer-list-author">' + this.option.music[i].author + '</span>'
+ '</li>'
+ '<li>'
+ '<span class="aplayer-list-cur" style="background: ' + this.option.theme + ';"></span>'
+ '<span class="aplayer-list-index">' + (i + 1) + '</span>'
+ '<span class="aplayer-list-title">' + this.option.music[i].title + '</span>'
+ '<span class="aplayer-list-author">' + this.option.music[i].author + '</span>'
+ '</li>'
}
eleHTML += ''
+ '</ol>'
+ '</div>'
+ '</ol>'
+ '</div>'
}
this.element.innerHTML = eleHTML;
@ -120,13 +117,14 @@
var _self = this;
// play and pause button
this.playButton = this.element.getElementsByClassName('aplayer-play')[0];
this.pauseButton = this.element.getElementsByClassName('aplayer-pause')[0];
this.playButton.addEventListener('click', function () {
_self.play.call(_self);
});
this.pauseButton.addEventListener('click', function () {
_self.pause.call(_self);
this.button = this.element.getElementsByClassName('aplayer-button')[0];
this.button.addEventListener('click', function () {
if (this.classList.contains('aplayer-play')) {
_self.play.call(_self);
}
else if (this.classList.contains('aplayer-pause')) {
_self.pause.call(_self);
}
});
// click music list: change music
@ -255,10 +253,12 @@
if (_self.loop) {
this.classList.add('aplayer-noloop');
_self.loop = false;
_self.audio.loop = _self.playIndex > -1 ? false : _self.loop;
}
else {
this.classList.remove('aplayer-noloop');
_self.loop = true;
_self.audio.loop = _self.playIndex > -1 ? false : _self.loop;
}
});
@ -348,6 +348,13 @@
}
});
}
else {
this.audio.addEventListener('ended', function () {
if (!_self.loop) {
_self.pause();
}
});
}
// control volume
this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;
@ -403,10 +410,14 @@
* Play music
*/
APlayer.prototype.play = function () {
this.playButton.classList.add('aplayer-hide');
this.pauseButton.classList.remove('aplayer-hide');
this.audio.play();
var _self = this;
this.button.classList.remove('aplayer-play');
this.button.classList.add('aplayer-pause');
this.button.innerHTML = '';
setTimeout(function () {
_self.button.innerHTML = '<i class="demo-icon aplayer-icon-pause"></i>';
}, 100);
this.audio.play();
if (this.playedTime) {
clearInterval(this.playedTime);
}
@ -423,8 +434,13 @@
* Pause music
*/
APlayer.prototype.pause = function () {
this.pauseButton.classList.add('aplayer-hide');
this.playButton.classList.remove('aplayer-hide');
var _self = this;
this.button.classList.remove('aplayer-pause');
this.button.classList.add('aplayer-play');
this.button.innerHTML = '';
setTimeout(function () {
_self.button.innerHTML = '<i class="demo-icon aplayer-icon-play"></i>';
}, 100);
this.audio.pause();
clearInterval(this.playedTime);
};

13
src/APlayer.scss
View File

@ -117,7 +117,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
transition: all 0.1s ease;
&:hover {
opacity: 1;
}
@ -131,9 +131,9 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
width: 26px;
height: 26px;
border: 2px solid #fff;
top: 50%;
left: 50%;
margin: -15px 0 0 -15px;
bottom: 50%;
right: 50%;
margin: 0 -15px -15px 0;
.aplayer-icon-play {
position: absolute;
top: 2px;
@ -416,4 +416,9 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
}
}
}
}
@keyframes aplayer-roll {
0%{left:0}
100%{left: -100%}
}