From a77b723c6ecce7bb4008bd151e4c64e709740846 Mon Sep 17 00:00:00 2001 From: DIYgod Date: Sat, 16 Jan 2016 21:06:04 +0800 Subject: [PATCH] add play button's animation, fix loop bug --- README.md | 3 +- dist/APlayer.min.css | 2 +- dist/APlayer.min.js | 2 +- package.json | 2 +- src/APlayer.js | 132 ++++++++++++++++++++++++------------------- src/APlayer.scss | 13 +++-- 6 files changed, 87 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index b277e3b..9614e34 100644 --- a/README.md +++ b/README.md @@ -192,8 +192,7 @@ $ npm run build - [x] 默认选项 - [x] 移动端兼容性 - [x] 播放列表 -- [ ] 播放暂停按钮切换动画 -- [ ] 歌词滚动展示 +- [x] 播放暂停按钮切换动画 ## Issues diff --git a/dist/APlayer.min.css b/dist/APlayer.min.css index 2be2315..964a52a 100644 --- a/dist/APlayer.min.css +++ b/dist/APlayer.min.css @@ -1 +1 @@ -@font-face{font-family:aplayer-fontello;src:url(font/aplayer-fontello.eot?72550380);src:url(font/aplayer-fontello.eot?72550380#iefix) format("embedded-opentype"),url(font/aplayer-fontello.woff?72550380) format("woff"),url(font/aplayer-fontello.ttf?72550380) format("truetype"),url(font/aplayer-fontello.svg?72550380#fontello) format("svg");font-weight:400;font-style:normal}.aplayer-narrow{width:66px}.aplayer-narrow .aplayer-info{display:none}.aplayer-withlrc.aplayer-narrow{width:106px}.aplayer-withlrc.aplayer .aplayer-pic{height:106px;width:106px}.aplayer-withlrc.aplayer .aplayer-info{margin-left:106px;height:106px}.aplayer-withlrc.aplayer .aplayer-lrc{display:block}.aplayer{font-family:Arial,Helvetica,sans-serif;margin:5px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);border-radius:2px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:initial}.aplayer [class*=" aplayer-icon-"]:before,.aplayer [class^=aplayer-icon-]:before{font-family:aplayer-fontello;font-style:normal;font-weight:400;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;line-height:1em}.aplayer .aplayer-icon-play:before{content:'\e806'}.aplayer .aplayer-icon-pause:before{content:'\e807'}.aplayer .aplayer-icon-to-start:before{content:'\e808'}.aplayer .aplayer-icon-to-end:before{content:'\e809'}.aplayer .aplayer-icon-loop:before{content:'\e803'}.aplayer .aplayer-icon-menu:before{content:'\e80b'}.aplayer .aplayer-icon-volume-off:before{content:'\e800'}.aplayer .aplayer-icon-volume-down:before{content:'\e801'}.aplayer .aplayer-icon-volume-up:before{content:'\e802'}.aplayer .aplayer-lrc-content{display:none}.aplayer .aplayer-pic{position:relative;float:left;height:66px;width:66px;background-image:url(default.jpg);background-size:100%;-webkit-transition:all .3s ease;transition:all .3s ease}.aplayer .aplayer-pic .aplayer-button{position:absolute;color:#fff;border-radius:50%;opacity:.8;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);background:rgba(0,0,0,.2);-webkit-transition:all .2s ease;transition:all .2s ease}.aplayer .aplayer-pic .aplayer-button:hover{opacity:1}.aplayer .aplayer-pic .aplayer-hide{display:none}.aplayer .aplayer-pic .aplayer-play{width:26px;height:26px;border:2px solid #fff;top:50%;left:50%;margin:-15px 0 0 -15px}.aplayer .aplayer-pic .aplayer-play .aplayer-icon-play{position:absolute;top:2px;left:4px;font-size:20px;line-height:23px}.aplayer .aplayer-pic .aplayer-pause{width:16px;height:16px;border:2px solid #fff;bottom:4px;right:4px}.aplayer .aplayer-pic .aplayer-pause .aplayer-icon-pause{position:absolute;top:1px;left:2px;font-size:12px;line-height:14px}.aplayer .aplayer-info{margin-left:66px;padding:14px 7px 0 10px;height:66px;box-sizing:border-box}.aplayer .aplayer-info .aplayer-music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:17px}.aplayer .aplayer-info .aplayer-music .aplayer-title{font-size:14px}.aplayer .aplayer-info .aplayer-music .aplayer-author{font-size:12px;color:#666}.aplayer .aplayer-info .aplayer-controller{position:relative}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap{margin:0 140px 0 5px}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar{position:relative;height:2px;width:100%;background:#cdcdcd;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded{position:absolute;left:0;top:0;bottom:0;background:#aaa;height:2px;-webkit-transition:all .5s ease;transition:all .5s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{position:absolute;left:0;top:0;bottom:0;height:2px}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:8px;width:8px;border-radius:50%;background:#fff;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-time{position:absolute;right:0;bottom:-5px;height:17px;color:#999;font-size:11px}.aplayer .aplayer-info .aplayer-controller .aplayer-time i{color:#666;font-size:15px;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-time i.aplayer-icon-loop{margin:2px}.aplayer .aplayer-info .aplayer-controller .aplayer-time i.aplayer-noloop{color:#ddd}.aplayer .aplayer-info .aplayer-controller .aplayer-time i.aplayer-noloop:hover{color:#bbb}.aplayer .aplayer-info .aplayer-controller .aplayer-time i:hover{color:#000}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap{position:relative;display:inline-block;margin-left:7px;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap{display:block}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap{display:none;position:absolute;bottom:17px;right:-5px;width:25px;height:40px;z-index:2}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar{position:absolute;bottom:0;right:10px;width:5px;height:35px;background:#aaa}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume{position:absolute;bottom:0;right:0;width:5px;-webkit-transition:all .1s ease;transition:all .1s ease}.aplayer .aplayer-lrc{display:none;position:relative;height:40px;background:#fff;text-align:center;overflow:hidden;margin:-10px 0 10px}.aplayer .aplayer-lrc:before{top:0;height:10%;background:-webkit-linear-gradient(top,#fff,hsla(0,0%,100%,0));background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(hsla(0,0%,100%,0)));background:linear-gradient(180deg,#fff 0,hsla(0,0%,100%,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#00ffffff',GradientType=0)}.aplayer .aplayer-lrc:after,.aplayer .aplayer-lrc:before{position:absolute;z-index:1;display:block;overflow:hidden;width:100%;content:' '}.aplayer .aplayer-lrc:after{bottom:0;height:33%;background:-webkit-linear-gradient(bottom,#fff,hsla(0,0%,100%,0));background:-webkit-gradient(linear,left bottom,left top,from(#fff),to(hsla(0,0%,100%,0)));background:linear-gradient(0deg,#fff 0,hsla(0,0%,100%,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=0)}.aplayer .aplayer-lrc p{font-size:12px;color:#666;line-height:20px!important;height:20px!important;padding:0!important;margin:0!important;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:.4;overflow:hidden}.aplayer .aplayer-lrc p.aplayer-lrc-current{opacity:1}.aplayer .aplayer-lrc .aplayer-lrc-contents{width:100%;-webkit-transition:all .5s ease-out;transition:all .5s ease-out}.aplayer .aplayer-list{max-height:300px;overflow:auto;-webkit-transition:all .5s ease;transition:all .5s ease}.aplayer .aplayer-list.aplayer-list-hide{max-height:0}.aplayer .aplayer-list ol{list-style-type:none;margin:0;padding:0}.aplayer .aplayer-list ol li{position:relative;height:32px;line-height:32px;padding:0 15px;font-size:12px;border-top:1px solid #e9e9e9;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease}.aplayer .aplayer-list ol li:hover{background:#efefef}.aplayer .aplayer-list ol li.aplayer-list-light{background:#e9e9e9}.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur{display:inline-block}.aplayer .aplayer-list ol li .aplayer-list-cur{display:none;width:3px;height:22px;position:absolute;left:0;top:5px;cursor:pointer}.aplayer .aplayer-list ol li .aplayer-list-index{color:#666;margin-right:12px;cursor:pointer}.aplayer .aplayer-list ol li .aplayer-list-author{color:#666;float:right;cursor:pointer} \ No newline at end of file +@font-face{font-family:aplayer-fontello;src:url(font/aplayer-fontello.eot?72550380);src:url(font/aplayer-fontello.eot?72550380#iefix) format("embedded-opentype"),url(font/aplayer-fontello.woff?72550380) format("woff"),url(font/aplayer-fontello.ttf?72550380) format("truetype"),url(font/aplayer-fontello.svg?72550380#fontello) format("svg");font-weight:400;font-style:normal}.aplayer-narrow{width:66px}.aplayer-narrow .aplayer-info{display:none}.aplayer-withlrc.aplayer-narrow{width:106px}.aplayer-withlrc.aplayer .aplayer-pic{height:106px;width:106px}.aplayer-withlrc.aplayer .aplayer-info{margin-left:106px;height:106px}.aplayer-withlrc.aplayer .aplayer-lrc{display:block}.aplayer{font-family:Arial,Helvetica,sans-serif;margin:5px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);border-radius:2px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:initial}.aplayer [class*=" aplayer-icon-"]:before,.aplayer [class^=aplayer-icon-]:before{font-family:aplayer-fontello;font-style:normal;font-weight:400;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;line-height:1em}.aplayer .aplayer-icon-play:before{content:'\e806'}.aplayer .aplayer-icon-pause:before{content:'\e807'}.aplayer .aplayer-icon-to-start:before{content:'\e808'}.aplayer .aplayer-icon-to-end:before{content:'\e809'}.aplayer .aplayer-icon-loop:before{content:'\e803'}.aplayer .aplayer-icon-menu:before{content:'\e80b'}.aplayer .aplayer-icon-volume-off:before{content:'\e800'}.aplayer .aplayer-icon-volume-down:before{content:'\e801'}.aplayer .aplayer-icon-volume-up:before{content:'\e802'}.aplayer .aplayer-lrc-content{display:none}.aplayer .aplayer-pic{position:relative;float:left;height:66px;width:66px;background-image:url(default.jpg);background-size:100%;-webkit-transition:all .3s ease;transition:all .3s ease}.aplayer .aplayer-pic .aplayer-button{position:absolute;color:#fff;border-radius:50%;opacity:.8;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);background:rgba(0,0,0,.2);-webkit-transition:all .1s ease;transition:all .1s ease}.aplayer .aplayer-pic .aplayer-button:hover{opacity:1}.aplayer .aplayer-pic .aplayer-hide{display:none}.aplayer .aplayer-pic .aplayer-play{width:26px;height:26px;border:2px solid #fff;bottom:50%;right:50%;margin:0 -15px -15px 0}.aplayer .aplayer-pic .aplayer-play .aplayer-icon-play{position:absolute;top:2px;left:4px;font-size:20px;line-height:23px}.aplayer .aplayer-pic .aplayer-pause{width:16px;height:16px;border:2px solid #fff;bottom:4px;right:4px}.aplayer .aplayer-pic .aplayer-pause .aplayer-icon-pause{position:absolute;top:1px;left:2px;font-size:12px;line-height:14px}.aplayer .aplayer-info{margin-left:66px;padding:14px 7px 0 10px;height:66px;box-sizing:border-box}.aplayer .aplayer-info .aplayer-music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:17px}.aplayer .aplayer-info .aplayer-music .aplayer-title{font-size:14px}.aplayer .aplayer-info .aplayer-music .aplayer-author{font-size:12px;color:#666}.aplayer .aplayer-info .aplayer-controller{position:relative}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap{margin:0 140px 0 5px}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar{position:relative;height:2px;width:100%;background:#cdcdcd;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded{position:absolute;left:0;top:0;bottom:0;background:#aaa;height:2px;-webkit-transition:all .5s ease;transition:all .5s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{position:absolute;left:0;top:0;bottom:0;height:2px}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:8px;width:8px;border-radius:50%;background:#fff;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-time{position:absolute;right:0;bottom:-5px;height:17px;color:#999;font-size:11px}.aplayer .aplayer-info .aplayer-controller .aplayer-time i{color:#666;font-size:15px;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-time i.aplayer-icon-loop{margin:2px}.aplayer .aplayer-info .aplayer-controller .aplayer-time i.aplayer-noloop{color:#ddd}.aplayer .aplayer-info .aplayer-controller .aplayer-time i.aplayer-noloop:hover{color:#bbb}.aplayer .aplayer-info .aplayer-controller .aplayer-time i:hover{color:#000}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap{position:relative;display:inline-block;margin-left:7px;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap{display:block}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap{display:none;position:absolute;bottom:17px;right:-5px;width:25px;height:40px;z-index:2}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar{position:absolute;bottom:0;right:10px;width:5px;height:35px;background:#aaa}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume{position:absolute;bottom:0;right:0;width:5px;-webkit-transition:all .1s ease;transition:all .1s ease}.aplayer .aplayer-lrc{display:none;position:relative;height:40px;background:#fff;text-align:center;overflow:hidden;margin:-10px 0 10px}.aplayer .aplayer-lrc:before{top:0;height:10%;background:-webkit-linear-gradient(top,#fff,hsla(0,0%,100%,0));background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(hsla(0,0%,100%,0)));background:linear-gradient(180deg,#fff 0,hsla(0,0%,100%,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#00ffffff',GradientType=0)}.aplayer .aplayer-lrc:after,.aplayer .aplayer-lrc:before{position:absolute;z-index:1;display:block;overflow:hidden;width:100%;content:' '}.aplayer .aplayer-lrc:after{bottom:0;height:33%;background:-webkit-linear-gradient(bottom,#fff,hsla(0,0%,100%,0));background:-webkit-gradient(linear,left bottom,left top,from(#fff),to(hsla(0,0%,100%,0)));background:linear-gradient(0deg,#fff 0,hsla(0,0%,100%,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=0)}.aplayer .aplayer-lrc p{font-size:12px;color:#666;line-height:20px!important;height:20px!important;padding:0!important;margin:0!important;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:.4;overflow:hidden}.aplayer .aplayer-lrc p.aplayer-lrc-current{opacity:1}.aplayer .aplayer-lrc .aplayer-lrc-contents{width:100%;-webkit-transition:all .5s ease-out;transition:all .5s ease-out}.aplayer .aplayer-list{max-height:300px;overflow:auto;-webkit-transition:all .5s ease;transition:all .5s ease}.aplayer .aplayer-list.aplayer-list-hide{max-height:0}.aplayer .aplayer-list ol{list-style-type:none;margin:0;padding:0}.aplayer .aplayer-list ol li{position:relative;height:32px;line-height:32px;padding:0 15px;font-size:12px;border-top:1px solid #e9e9e9;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease}.aplayer .aplayer-list ol li:hover{background:#efefef}.aplayer .aplayer-list ol li.aplayer-list-light{background:#e9e9e9}.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur{display:inline-block}.aplayer .aplayer-list ol li .aplayer-list-cur{display:none;width:3px;height:22px;position:absolute;left:0;top:5px;cursor:pointer}.aplayer .aplayer-list ol li .aplayer-list-index{color:#666;margin-right:12px;cursor:pointer}.aplayer .aplayer-list ol li .aplayer-list-author{color:#666;float:right;cursor:pointer} \ No newline at end of file diff --git a/dist/APlayer.min.js b/dist/APlayer.min.js index fe2cebd..25a2ebc 100644 --- a/dist/APlayer.min.js +++ b/dist/APlayer.min.js @@ -1 +1 @@ -!function(){function e(e){this.isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),this.isMobile&&(e.autoplay=!1);var t={element:document.getElementsByClassName("aplayer")[0],narrow:!1,autoplay:!1,showlrc:!1,theme:"#b7daff"};for(var a in t)t.hasOwnProperty(a)&&!e.hasOwnProperty(a)&&(e[a]=t[a]);this.playIndex="[object Array]"===Object.prototype.toString.call(e.music)?0:-1,this.option=e,this.audios=[],this.loop=!0}e.prototype.init=function(){function e(e){var t=e||window.event,s=(t.clientX-a(o.bar))/r;s=s>0?s:0,s=1>s?s:1,o.updateBar.call(o,"played",s,"width"),o.option.showlrc&&o.updateLrc.call(o,parseFloat(o.playedBar.style.width)/100*o.audio.duration),o.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=o.secondToTime(s*o.audio.duration)}function t(){document.removeEventListener("mouseup",t),document.removeEventListener("mousemove",e),o.audio.currentTime=parseFloat(o.playedBar.style.width)/100*o.audio.duration,o.play()}function a(e){for(var t,a=e.offsetLeft,s=e.offsetParent;null!==s;)a+=s.offsetLeft,s=s.offsetParent;return t=document.body.scrollLeft+document.documentElement.scrollLeft,a-t}function s(e){for(var t,a=e.offsetTop,s=e.offsetParent;null!==s;)a+=s.offsetTop,s=s.offsetParent;return t=document.body.scrollTop+document.documentElement.scrollTop,a-t}if(this.element=this.option.element,this.music=this.playIndex>-1?this.option.music[this.playIndex]:this.option.music,this.option.showlrc){for(var i=[],l=0;l
- 00:00 / 00:00
'+(this.playIndex>-1?'':"")+"
";if(this.playIndex>-1){for(n+='
    ',l=0;l'+(l+1)+''+this.option.music[l].title+''+this.option.music[l].author+"";n+="
"}this.element.innerHTML=n,this.option.narrow&&this.element.classList.add("aplayer-narrow");var o=this;if(this.playButton=this.element.getElementsByClassName("aplayer-play")[0],this.pauseButton=this.element.getElementsByClassName("aplayer-pause")[0],this.playButton.addEventListener("click",function(){o.play.call(o)}),this.pauseButton.addEventListener("click",function(){o.pause.call(o)}),this.playIndex>-1)for(l=0;l0?a:0,a=1>a?a:1,o.updateBar.call(o,"volume",a,"height"),o.audio.volume=a,o.audio.muted&&(o.audio.muted=!1),1===a?p.className="demo-icon aplayer-icon-volume-up":p.className="demo-icon aplayer-icon-volume-down"}),p.addEventListener("click",function(){o.audio.muted?(o.audio.muted=!1,p.className=1===o.audio.volume?"demo-icon aplayer-icon-volume-up":"demo-icon aplayer-icon-volume-down",o.updateBar.call(o,"volume",o.audio.volume,"height")):(o.audio.muted=!0,p.className="demo-icon aplayer-icon-volume-off",o.updateBar.call(o,"volume",0,"height"))}),this.element.getElementsByClassName("aplayer-icon-loop")[0].addEventListener("click",function(){o.loop?(this.classList.add("aplayer-noloop"),o.loop=!1):(this.classList.remove("aplayer-noloop"),o.loop=!0)}),this.playIndex>-1&&this.element.getElementsByClassName("aplayer-icon-menu")[0].addEventListener("click",function(){var e=o.element.getElementsByClassName("aplayer-list")[0];e.classList.contains("aplayer-list-hide")?e.classList.remove("aplayer-list-hide"):e.classList.add("aplayer-list-hide")}),this.setMusic(0)},e.prototype.setMusic=function(e){this.playIndex>-1&&"undefined"!=typeof arguments[0]&&(this.playIndex=arguments[0]);var t=this.playIndex;if(this.music=this.playIndex>-1?this.option.music[t]:this.option.music,this.music.pic&&(this.element.getElementsByClassName("aplayer-pic")[0].style.backgroundImage="url("+encodeURI(this.music.pic)+")"),this.element.getElementsByClassName("aplayer-title")[0].innerHTML=this.music.title,this.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - "+this.music.author,this.playIndex>-1&&(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")[t].classList.add("aplayer-list-light")),this.audio&&(this.pause(),this.audio.currentTime=0),this.playIndex>-1&&!this.audios[t]||-1===this.playIndex){this.audio=document.createElement("audio"),this.audio.src=this.music.url,this.audio.preload=this.isMobile?"none":"metadata",this.audio.currentTime=0;var a=this;this.audio.addEventListener("durationchange",function(){1!==a.audio.duration&&(a.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=a.secondToTime(a.audio.duration))}),a.audio.addEventListener("progress",function(){var e=a.audio.buffered.length?a.audio.buffered.end(a.audio.buffered.length-1)/a.audio.duration:0;a.updateBar.call(a,"loaded",e,"width")}),this.audio.addEventListener("error",function(){a.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - Error happens ╥﹏╥"}),this.playIndex>-1&&this.audio.addEventListener("ended",function(){a.playIndex-1?!1:this.loop,this.playIndex>-1&&(this.audios[t]=this.audio)}else this.audio=this.audios[t],this.audio.volume=parseInt(this.element.getElementsByClassName("aplayer-volume")[0].style.height)/100,this.audio.currentTime=0;if(this.option.showlrc){this.lrc=this.playIndex>-1?this.lrcs[t]:this.lrcs[0],this.element.classList.add("aplayer-withlrc");var s="";for(this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents")[0],i=0;i"+this.lrc[i][1]+"

";this.lrcContents.innerHTML=s,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)"}1!==this.audio.duration&&(this.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=this.audio.duration?this.secondToTime(this.audio.duration):"00:00"),this.option.autoplay&&!this.isMobile&&this.play(),this.option.autoplay=!0,this.isMobile&&this.pause()},e.prototype.play=function(){this.playButton.classList.add("aplayer-hide"),this.pauseButton.classList.remove("aplayer-hide"),this.audio.play();var e=this;this.playedTime&&clearInterval(this.playedTime),this.playedTime=setInterval(function(){e.updateBar.call(e,"played",e.audio.currentTime/e.audio.duration,"width"),e.option.showlrc&&e.updateLrc.call(e),e.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=e.secondToTime(e.audio.currentTime)},100)},e.prototype.pause=function(){this.pauseButton.classList.add("aplayer-hide"),this.playButton.classList.remove("aplayer-hide"),this.audio.pause(),clearInterval(this.playedTime)},e.prototype.updateBar=function(e,t,a){t=t>0?t:0,t=1>t?t:1,this[e+"Bar"].style[a]=100*t+"%"},e.prototype.updateLrc=function(e){if("undefined"==typeof arguments[0]&&(e=this.audio.currentTime),this.lrcIndex>this.lrc.length-1||e=this.lrc[this.lrcIndex+1][0])for(var t=0;t=this.lrc[t][0]&&(!this.lrc[t+1]||ee?"0"+e:""+e},a=parseInt(e/60),s=parseInt(e-60*a);return t(a)+":"+t(s)},e.prototype.parseLrc=function(e){for(var t=[],a=0;an;n++){var o=s[n].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g),r=s[n].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g,"").replace(/^\s+|\s+$/g,"");if(null!=o)for(var d=o.length,p=0;d>p;p++){var c=/\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(o[p]),u=60*c[1]+parseInt(c[2])+parseInt(c[3])/(2===(c[3]+"").length?100:1e3);i.push([u,r])}}i.sort(function(e,t){return e[0]-t[0]}),t.push(i)}return t},"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=e:window.APlayer=e}(); \ No newline at end of file +!function(){function e(e){this.isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),this.isMobile&&(e.autoplay=!1);var t={element:document.getElementsByClassName("aplayer")[0],narrow:!1,autoplay:!1,showlrc:!1,theme:"#b7daff"};for(var a in t)t.hasOwnProperty(a)&&!e.hasOwnProperty(a)&&(e[a]=t[a]);this.playIndex="[object Array]"===Object.prototype.toString.call(e.music)?0:-1,this.option=e,this.audios=[],this.loop=!0}e.prototype.init=function(){function e(e){var t=e||window.event,s=(t.clientX-a(o.bar))/r;s=s>0?s:0,s=1>s?s:1,o.updateBar.call(o,"played",s,"width"),o.option.showlrc&&o.updateLrc.call(o,parseFloat(o.playedBar.style.width)/100*o.audio.duration),o.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=o.secondToTime(s*o.audio.duration)}function t(){document.removeEventListener("mouseup",t),document.removeEventListener("mousemove",e),o.audio.currentTime=parseFloat(o.playedBar.style.width)/100*o.audio.duration,o.play()}function a(e){for(var t,a=e.offsetLeft,s=e.offsetParent;null!==s;)a+=s.offsetLeft,s=s.offsetParent;return t=document.body.scrollLeft+document.documentElement.scrollLeft,a-t}function s(e){for(var t,a=e.offsetTop,s=e.offsetParent;null!==s;)a+=s.offsetTop,s=s.offsetParent;return t=document.body.scrollTop+document.documentElement.scrollTop,a-t}if(this.element=this.option.element,this.music=this.playIndex>-1?this.option.music[this.playIndex]:this.option.music,this.option.showlrc){for(var i=[],l=0;l
- 00:00 / 00:00
'+(this.playIndex>-1?'':"")+"
";if(this.playIndex>-1){for(n+='
    ',l=0;l'+(l+1)+''+this.option.music[l].title+''+this.option.music[l].author+"";n+="
"}this.element.innerHTML=n,this.option.narrow&&this.element.classList.add("aplayer-narrow");var o=this;if(this.button=this.element.getElementsByClassName("aplayer-button")[0],this.button.addEventListener("click",function(){this.classList.contains("aplayer-play")?o.play.call(o):this.classList.contains("aplayer-pause")&&o.pause.call(o)}),this.playIndex>-1)for(l=0;l0?a:0,a=1>a?a:1,o.updateBar.call(o,"volume",a,"height"),o.audio.volume=a,o.audio.muted&&(o.audio.muted=!1),1===a?p.className="demo-icon aplayer-icon-volume-up":p.className="demo-icon aplayer-icon-volume-down"}),p.addEventListener("click",function(){o.audio.muted?(o.audio.muted=!1,p.className=1===o.audio.volume?"demo-icon aplayer-icon-volume-up":"demo-icon aplayer-icon-volume-down",o.updateBar.call(o,"volume",o.audio.volume,"height")):(o.audio.muted=!0,p.className="demo-icon aplayer-icon-volume-off",o.updateBar.call(o,"volume",0,"height"))}),this.element.getElementsByClassName("aplayer-icon-loop")[0].addEventListener("click",function(){o.loop?(this.classList.add("aplayer-noloop"),o.loop=!1,o.audio.loop=o.playIndex>-1?!1:o.loop):(this.classList.remove("aplayer-noloop"),o.loop=!0,o.audio.loop=o.playIndex>-1?!1:o.loop)}),this.playIndex>-1&&this.element.getElementsByClassName("aplayer-icon-menu")[0].addEventListener("click",function(){var e=o.element.getElementsByClassName("aplayer-list")[0];e.classList.contains("aplayer-list-hide")?e.classList.remove("aplayer-list-hide"):e.classList.add("aplayer-list-hide")}),this.setMusic(0)},e.prototype.setMusic=function(e){this.playIndex>-1&&"undefined"!=typeof arguments[0]&&(this.playIndex=arguments[0]);var t=this.playIndex;if(this.music=this.playIndex>-1?this.option.music[t]:this.option.music,this.music.pic&&(this.element.getElementsByClassName("aplayer-pic")[0].style.backgroundImage="url("+encodeURI(this.music.pic)+")"),this.element.getElementsByClassName("aplayer-title")[0].innerHTML=this.music.title,this.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - "+this.music.author,this.playIndex>-1&&(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")[t].classList.add("aplayer-list-light")),this.audio&&(this.pause(),this.audio.currentTime=0),this.playIndex>-1&&!this.audios[t]||-1===this.playIndex){this.audio=document.createElement("audio"),this.audio.src=this.music.url,this.audio.preload=this.isMobile?"none":"metadata",this.audio.currentTime=0;var a=this;this.audio.addEventListener("durationchange",function(){1!==a.audio.duration&&(a.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=a.secondToTime(a.audio.duration))}),a.audio.addEventListener("progress",function(){var e=a.audio.buffered.length?a.audio.buffered.end(a.audio.buffered.length-1)/a.audio.duration:0;a.updateBar.call(a,"loaded",e,"width")}),this.audio.addEventListener("error",function(){a.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - Error happens ╥﹏╥"}),this.playIndex>-1?this.audio.addEventListener("ended",function(){a.playIndex-1?!1:this.loop,this.playIndex>-1&&(this.audios[t]=this.audio)}else this.audio=this.audios[t],this.audio.volume=parseInt(this.element.getElementsByClassName("aplayer-volume")[0].style.height)/100,this.audio.currentTime=0;if(this.option.showlrc){this.lrc=this.playIndex>-1?this.lrcs[t]:this.lrcs[0],this.element.classList.add("aplayer-withlrc");var s="";for(this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents")[0],i=0;i"+this.lrc[i][1]+"

";this.lrcContents.innerHTML=s,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)"}1!==this.audio.duration&&(this.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=this.audio.duration?this.secondToTime(this.audio.duration):"00:00"),this.option.autoplay&&!this.isMobile&&this.play(),this.option.autoplay=!0,this.isMobile&&this.pause()},e.prototype.play=function(){var e=this;this.button.classList.remove("aplayer-play"),this.button.classList.add("aplayer-pause"),this.button.innerHTML="",setTimeout(function(){e.button.innerHTML=''},100),this.audio.play(),this.playedTime&&clearInterval(this.playedTime),this.playedTime=setInterval(function(){e.updateBar.call(e,"played",e.audio.currentTime/e.audio.duration,"width"),e.option.showlrc&&e.updateLrc.call(e),e.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=e.secondToTime(e.audio.currentTime)},100)},e.prototype.pause=function(){var e=this;this.button.classList.remove("aplayer-pause"),this.button.classList.add("aplayer-play"),this.button.innerHTML="",setTimeout(function(){e.button.innerHTML=''},100),this.audio.pause(),clearInterval(this.playedTime)},e.prototype.updateBar=function(e,t,a){t=t>0?t:0,t=1>t?t:1,this[e+"Bar"].style[a]=100*t+"%"},e.prototype.updateLrc=function(e){if("undefined"==typeof arguments[0]&&(e=this.audio.currentTime),this.lrcIndex>this.lrc.length-1||e=this.lrc[this.lrcIndex+1][0])for(var t=0;t=this.lrc[t][0]&&(!this.lrc[t+1]||ee?"0"+e:""+e},a=parseInt(e/60),s=parseInt(e-60*a);return t(a)+":"+t(s)},e.prototype.parseLrc=function(e){for(var t=[],a=0;an;n++){var o=s[n].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g),r=s[n].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g,"").replace(/^\s+|\s+$/g,"");if(null!=o)for(var d=o.length,p=0;d>p;p++){var c=/\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(o[p]),u=60*c[1]+parseInt(c[2])+parseInt(c[3])/(2===(c[3]+"").length?100:1e3);i.push([u,r])}}i.sort(function(e,t){return e[0]-t[0]}),t.push(i)}return t},"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=e:window.APlayer=e}(); \ No newline at end of file diff --git a/package.json b/package.json index e4bdfd2..c4e6d0b 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/APlayer.js b/src/APlayer.js index 7e83bbf..e599ae2 100644 --- a/src/APlayer.js +++ b/src/APlayer.js @@ -54,61 +54,58 @@ // fill in HTML var eleHTML = '' + '
' - + '
' - + '' - + '
' - + '
' - + '' - + '
' + + '
' + + '' + + '
' + '
' + '
' - + '
' - + '' - + '' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '' - + '
' - + '
' - + '
' - + '
' - + ' - 00:00 / 00:00' - + '
' - + '' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '' - + (this.playIndex > -1 ? '' : '') - + '
' - + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + ' - 00:00 / 00:00' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '' + + (this.playIndex > -1 ? '' : '') + + '
' + + '
' + '
'; if (this.playIndex > -1) { eleHTML += '' - + '
' - + '
    '; + + '
    ' + + '
      '; for (i = 0; i < this.option.music.length; i++) { eleHTML += '' - + '
    1. ' - + '' - + '' + (i + 1) + '' - + '' + this.option.music[i].title + '' - + '' + this.option.music[i].author + '' - + '
      2. ' + + '
    2. ' + + '' + + '' + (i + 1) + '' + + '' + this.option.music[i].title + '' + + '' + this.option.music[i].author + '' + + '
      3. ' } eleHTML += '' - + '
    ' - + '
    ' + + '
' + + '
' } 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 = ''; + }, 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 = ''; + }, 100); this.audio.pause(); clearInterval(this.playedTime); }; diff --git a/src/APlayer.scss b/src/APlayer.scss index 6b303e6..b0dcf2a 100644 --- a/src/APlayer.scss +++ b/src/APlayer.scss @@ -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%} } \ No newline at end of file