From c1c83d3c963176e4e8e501f7f3f5df34db8742b9 Mon Sep 17 00:00:00 2001 From: DIYgod Date: Tue, 11 Oct 2016 11:24:03 +0800 Subject: [PATCH] optimize the style of aplayer with lrc --- dist/APlayer.min.js | 2 +- dist/APlayer.min.js.map | 2 +- src/APlayer.js | 9 ++++--- src/APlayer.scss | 57 ++++++++++++++++++++++++++++------------- 4 files changed, 47 insertions(+), 23 deletions(-) diff --git a/dist/APlayer.min.js b/dist/APlayer.min.js index c7aa8ab5..9dd8377f 100644 --- a/dist/APlayer.min.js +++ b/dist/APlayer.min.js @@ -1,3 +1,3 @@ -!function(e,a){"object"==typeof exports&&"object"==typeof module?module.exports=a():"function"==typeof define&&define.amd?define("APlayer",[],a):"object"==typeof exports?exports.APlayer=a():e.APlayer=a()}(this,function(){return function(e){function a(l){if(t[l])return t[l].exports;var r=t[l]={exports:{},id:l,loaded:!1};return e[l].call(r.exports,r,r.exports,a),r.loaded=!0,r.exports}var t={};return a.m=e,a.c=t,a.p="",a(0)}([function(e,a,t){"use strict";function l(e,a){if(!(e instanceof a))throw new TypeError("Cannot call a class as a function")}var r=function(){function e(e,a){for(var t=0;t\n \n \n \n '},this.isMobile=/mobile/i.test(window.navigator.userAgent),this.isMobile&&(a.autoplay=!1);var s={element:document.getElementsByClassName("aplayer")[0],narrow:!1,autoplay:!1,mutex:!0,showlrc:0,theme:"#b7daff",mode:"circulation"};for(var p in s)s.hasOwnProperty(p)&&!a.hasOwnProperty(p)&&(a[p]=s[p]);if(this.playIndex="[object Array]"===Object.prototype.toString.call(a.music)?0:-1,this.option=a,this.audios=[],this.mode=a.mode,this.secondToTime=function(e){var a=function(e){return e<10?"0"+e:""+e},t=parseInt(e/60),l=parseInt(e-60*t),r=parseInt(t/60),i=parseInt(e/60-60*parseInt(e/60/60));return e>=3600?a(r)+":"+a(i)+":"+a(l):a(t)+":"+a(l)},this.element=this.option.element,2===this.option.showlrc||this.option.showlrc===!0){this.savelrc=[];for(var c=0;c0?a:0,a=a<1?a:1,m[e+"Bar"].style[t]=100*a+"%"},this.updateLrc=function(){var e=arguments.length<=0||void 0===arguments[0]?n.audio.currentTime:arguments[0];if(n.lrcIndex>n.lrc.length-1||e=n.lrc[n.lrcIndex+1][0])for(var a=0;a=n.lrc[a][0]&&(!n.lrc[a+1]||e-1,this.music=this.multiple?this.option.music[this.playIndex]:this.option.music,this.option.showlrc&&this.element.classList.add("aplayer-withlrc");var y='\n
\n
\n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n - 00:00 / 00:00\n \n
\n \n
\n
\n
\n
\n
\n
\n \n "+(this.multiple?'":"")+"\n
\n
\n
");if(this.multiple){y+='\n
\n
    ';for(var h=0;h\n \n '+(h+1)+'\n '+this.option.music[h].title+'\n '+this.option.music[h].author+"\n ";y+="\n
\n
"}this.element.innerHTML=y,this.element.offsetWidth<300&&(this.element.getElementsByClassName("aplayer-icon-mode")[0].style.display="none"),this.ptime=this.element.getElementsByClassName("aplayer-ptime")[0],this.element.getElementsByClassName("aplayer-info")[0].offsetWidth<200&&this.element.getElementsByClassName("aplayer-time")[0].classList.add("aplayer-time-narrow");var m={};m.barWrap=this.element.getElementsByClassName("aplayer-bar-wrap")[0],this.option.narrow&&this.element.classList.add("aplayer-narrow"),this.button=this.element.getElementsByClassName("aplayer-button")[0],this.button.addEventListener("click",function(e){n.button.classList.contains("aplayer-play")?n.play():n.button.classList.contains("aplayer-pause")&&n.pause()}),this.multiple&&!function(){for(var e=n.element.getElementsByClassName("aplayer-list")[0].getElementsByTagName("li"),a=function(a){e[a].addEventListener("click",function(){var t=parseInt(e[a].getElementsByClassName("aplayer-list-index")[0].innerHTML)-1;t!==n.playIndex?(n.setMusic(t),n.play()):n.toggle()})},t=0;t0?l:0,l=l<1?l:1,n.updateBar("played",l,"width"),n.option.showlrc&&n.updateLrc(parseFloat(m.playedBar.style.width)/100*n.audio.duration),n.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=n.secondToTime(l*n.audio.duration)},b=function B(){document.removeEventListener("mouseup",B),document.removeEventListener("mousemove",g),n.audio.currentTime=parseFloat(m.playedBar.style.width)/100*n.audio.duration,n.playedTime=setInterval(function(){n.updateBar("played",n.audio.currentTime/n.audio.duration,"width"),n.option.showlrc&&n.updateLrc(),n.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=n.secondToTime(n.audio.currentTime),n.trigger("playing")},100)};f.addEventListener("mousedown",function(){v=m.barWrap.clientWidth,clearInterval(n.playedTime),document.addEventListener("mousemove",g),document.addEventListener("mouseup",b)}),m.volumeBar=this.element.getElementsByClassName("aplayer-volume")[0];var x=this.element.getElementsByClassName("aplayer-volume-bar")[0];this.volumeicon=this.element.getElementsByClassName("aplayer-time")[0].getElementsByTagName("button")[0];var w=35;this.element.getElementsByClassName("aplayer-volume-bar-wrap")[0].addEventListener("click",function(e){var a=e||window.event,t=(w-a.clientY+r(x))/w;t=t>0?t:0,t=t<1?t:1,n.volume(t)}),this.volumeicon.addEventListener("click",function(){n.audio.muted?(n.audio.muted=!1,n.volumeicon.className=1===n.audio.volume?"aplayer-icon aplayer-icon-volume-up":"aplayer-icon aplayer-icon-volume-down",1===n.audio.volume?(n.volumeicon.className="aplayer-icon aplayer-icon-volume-up",n.volumeicon.innerHTML=n.getSVG("volume-up")):(n.volumeicon.className="aplayer-icon aplayer-icon-volume-down",n.volumeicon.innerHTML=n.getSVG("volume-down")),n.updateBar("volume",n.audio.volume,"height")):(n.audio.muted=!0,n.volumeicon.className="aplayer-icon aplayer-icon-volume-off",n.volumeicon.innerHTML=n.getSVG("volume-off"),n.updateBar("volume",0,"height"))});var A=this.element.getElementsByClassName("aplayer-icon-mode")[0];if(A.addEventListener("click",function(){"random"===n.mode?n.mode="single":"single"===n.mode?n.mode="order":"order"===n.mode?n.mode="circulation":"circulation"===n.mode&&(n.mode="random"),A.innerHTML=n.getSVG(n.mode),n.audio.loop=!(n.multiple||"order"===n.mode)}),this.multiple&&!function(){var e=n.element.getElementsByClassName("aplayer-list")[0];e.style.height=e.offsetHeight+"px",n.element.getElementsByClassName("aplayer-icon-menu")[0].addEventListener("click",function(){e.classList.contains("aplayer-list-hide")?e.classList.remove("aplayer-list-hide"):e.classList.add("aplayer-list-hide")})}(),"random"===this.mode){var E=parseInt(Math.random()*this.option.music.length);this.setMusic(E)}else this.setMusic(0);i.push(this)}return r(e,[{key:"setMusic",value:function(e){var a=this;this.multiple&&"undefined"!=typeof e&&(this.playIndex=e);var t=this.playIndex;this.music=this.multiple?this.option.music[t]:this.option.music,this.music.pic&&(this.element.getElementsByClassName("aplayer-pic")[0].style.backgroundImage="url('"+this.music.pic+"')"),this.element.getElementsByClassName("aplayer-title")[0].innerHTML=this.music.title,this.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - "+this.music.author,this.multiple&&(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.multiple&&(this.element.getElementsByClassName("aplayer-list")[0].scrollTop=33*t),this.multiple&&!this.audios[t]||this.playIndex===-1?(this.audio=document.createElement("audio"),this.audio.src=this.music.url,this.audio.preload=this.option.preload?this.option.preload:"auto",this.audio.addEventListener("durationchange",function(){1!==a.audio.duration&&(a.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=a.secondToTime(a.audio.duration))}),this.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("loaded",e,"width")}),this.audio.addEventListener("error",function(){a.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - Error happens ╥﹏╥",a.trigger("pause")}),this.audio.addEventListener("canplay",function(){a.trigger("canplay")}),this.ended=!1,this.multiple?this.audio.addEventListener("ended",function(){if(a.isMobile)return a.ended=!0,void a.pause();if(0!==a.audio.currentTime)if("random"===a.mode){var e=parseInt(Math.random()*a.option.music.length);e===a.playIndex&&(e++,e%=a.option.music.length),a.setMusic(e)}else"single"===a.mode?a.setMusic(a.playIndex):"order"===a.mode?a.playIndex=200&&r.status<300||304===r.status){t=r.responseText,a.lrcs[e]=l(t),a.lrc=a.lrcs[e];var i="";a.lrcContents=a.element.getElementsByClassName("aplayer-lrc-contents")[0];for(var n=0;n"+a.lrc[n][1]+"

";a.lrcContents.innerHTML=i,a.lrcIndex||(a.lrcIndex=0),a.lrcContents.getElementsByTagName("p")[0].classList.add("aplayer-lrc-current"),a.lrcContents.style.transform="translateY(0px)",a.lrcContents.style.webkitTransform="translateY(0px)"}else console.log("Request was unsuccessful: "+r.status)};var i=void 0;i=a.multiple?a.option.music[e].lrc:a.option.music.lrc,r.open("get",i,!0),r.send(null)}(),t?a.lrcs[e]=l(t):a.lrcs[e]=[["00:00","Loading"]]}(),a.lrc=a.lrcs[e];var r="";a.lrcContents=a.element.getElementsByClassName("aplayer-lrc-contents")[0];for(var i=0;i"+a.lrc[i][1]+"

";a.lrcContents.innerHTML=r,a.lrcIndex||(a.lrcIndex=0),a.lrcContents.getElementsByTagName("p")[0].classList.add("aplayer-lrc-current"),a.lrcContents.style.transform="translateY(0px)",a.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()}},{key:"play",value:function(e){var a=this;if("[object Number]"===Object.prototype.toString.call(e)&&(this.audio.currentTime=e),this.audio.paused){if(this.button.classList.remove("aplayer-play"),this.button.classList.add("aplayer-pause"),this.button.innerHTML="",setTimeout(function(){a.button.innerHTML='\n "},100),this.option.mutex)for(var t=0;t'+e.getSVG("play")+" "},100),this.audio.pause(),clearInterval(this.playedTime),this.trigger("pause"))}},{key:"volume",value:function(e){this.updateBar("volume",e,"height"),this.audio.volume=e,this.audio.muted&&(this.audio.muted=!1),1===e?(this.volumeicon.className="aplayer-icon aplayer-icon-volume-up",this.volumeicon.innerHTML=this.getSVG("volume-up")):(this.volumeicon.className="aplayer-icon aplayer-icon-volume-down",this.volumeicon.innerHTML=this.getSVG("volume-down"))}},{key:"on",value:function(e,a){"function"==typeof a&&this.event[e].push(a)}},{key:"toggle",value:function(){this.audio.paused?this.play():this.pause()}}]),e}();e.exports=n},function(e,a,t){var l=t(2);"string"==typeof l&&(l=[[e.id,l,""]]);t(5)(l,{});l.locals&&(e.exports=l.locals)},function(e,a,t){a=e.exports=t(3)(),a.push([e.id,".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:normal}.aplayer *{box-sizing:content-box}.aplayer .aplayer-icon{width:15px;height:15px;border:none;background-color:transparent;outline:none;cursor:pointer;opacity:.8;vertical-align:middle;padding:0}.aplayer .aplayer-icon .aplayer-fill{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.aplayer .aplayer-lrc-content{display:none}.aplayer .aplayer-pic{position:relative;float:left;height:66px;width:66px;background-image:url("+t(4)+");background-size:100%;-webkit-transition:all .3s ease;transition:all .3s ease}.aplayer .aplayer-pic .aplayer-button{position:absolute;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-button .aplayer-fill{fill:#fff}.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:3px;left:4px;height:20px;width:20px}.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:2px;left:2px;height:12px;width:12px}.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:13px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;cursor:default}.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;display:-webkit-box;display:-ms-flexbox;display:flex}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap{margin:0 0 0 5px;padding:4px 0;cursor:pointer!important;-webkit-box-flex:1;-ms-flex:1;flex:1}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar{position:relative;height:2px;width:100%;background:#cdcdcd}.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:relative;right:0;bottom:3px;height:17px;color:#999;font-size:11px;padding-left:7px}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner{vertical-align:middle}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon{cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon .aplayer-fill{fill:#666}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-mode{margin-right:4px}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover .aplayer-fill{fill:#000}.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-menu,.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-mode{display:none}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap{position:relative;display:inline-block;margin-left:3px;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:15px;right:-3px;width:25px;height:40px;z-index:99}.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;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;cursor:default}.aplayer .aplayer-list{overflow:auto;-webkit-transition:all .5s ease;transition:all .5s ease;will-change:height}.aplayer .aplayer-list.aplayer-list-hide{height:0!important}.aplayer .aplayer-list::-webkit-scrollbar{width:5px}.aplayer .aplayer-list::-webkit-scrollbar-track{background-color:#f9f9f9}.aplayer .aplayer-list::-webkit-scrollbar-thumb{border-radius:3px;background-color:#eee}.aplayer .aplayer-list::-webkit-scrollbar-thumb:hover{background-color:#ccc}.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;overflow:hidden}.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}@-webkit-keyframes aplayer-roll{0%{left:0}to{left:-100%}}@keyframes aplayer-roll{0%{left:0}to{left:-100%}}",""])},function(e,a){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],a=0;a\n \n \n \n '},this.isMobile=/mobile/i.test(window.navigator.userAgent),this.isMobile&&(a.autoplay=!1);var s={element:document.getElementsByClassName("aplayer")[0],narrow:!1,autoplay:!1,mutex:!0,showlrc:0,theme:"#b7daff",mode:"circulation"};for(var p in s)s.hasOwnProperty(p)&&!a.hasOwnProperty(p)&&(a[p]=s[p]);if(this.playIndex="[object Array]"===Object.prototype.toString.call(a.music)?0:-1,this.option=a,this.audios=[],this.mode=a.mode,this.secondToTime=function(e){var a=function(e){return e<10?"0"+e:""+e},t=parseInt(e/60),l=parseInt(e-60*t),r=parseInt(t/60),i=parseInt(e/60-60*parseInt(e/60/60));return e>=3600?a(r)+":"+a(i)+":"+a(l):a(t)+":"+a(l)},this.element=this.option.element,2===this.option.showlrc||this.option.showlrc===!0){this.savelrc=[];for(var c=0;c0?a:0,a=a<1?a:1,m[e+"Bar"].style[t]=100*a+"%"},this.updateLrc=function(){var e=arguments.length<=0||void 0===arguments[0]?n.audio.currentTime:arguments[0];if(n.lrcIndex>n.lrc.length-1||e=n.lrc[n.lrcIndex+1][0])for(var a=0;a=n.lrc[a][0]&&(!n.lrc[a+1]||e-1,this.music=this.multiple?this.option.music[this.playIndex]:this.option.music,this.option.showlrc&&this.element.classList.add("aplayer-withlrc"),this.option.music.length>1&&this.element.classList.add("aplayer-list");var y='\n
\n
\n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n - 00:00 / 00:00\n \n
\n \n
\n
\n
\n
\n
\n
\n \n "+(this.multiple?'":"")+"\n
\n
\n
");if(this.multiple){y+='\n
\n
    ';for(var h=0;h\n \n '+(h+1)+'\n '+this.option.music[h].title+'\n '+this.option.music[h].author+"\n ";y+="\n
\n
"}this.element.innerHTML=y,this.element.offsetWidth<300&&(this.element.getElementsByClassName("aplayer-icon-mode")[0].style.display="none"),this.ptime=this.element.getElementsByClassName("aplayer-ptime")[0],this.element.getElementsByClassName("aplayer-info")[0].offsetWidth<200&&this.element.getElementsByClassName("aplayer-time")[0].classList.add("aplayer-time-narrow");var m={};m.barWrap=this.element.getElementsByClassName("aplayer-bar-wrap")[0],this.option.narrow&&this.element.classList.add("aplayer-narrow"),this.button=this.element.getElementsByClassName("aplayer-button")[0],this.button.addEventListener("click",function(e){n.button.classList.contains("aplayer-play")?n.play():n.button.classList.contains("aplayer-pause")&&n.pause()}),this.multiple&&!function(){for(var e=n.element.getElementsByClassName("aplayer-list")[0].getElementsByTagName("li"),a=function(a){e[a].addEventListener("click",function(){var t=parseInt(e[a].getElementsByClassName("aplayer-list-index")[0].innerHTML)-1;t!==n.playIndex?(n.setMusic(t),n.play()):n.toggle()})},t=0;t0?l:0,l=l<1?l:1,n.updateBar("played",l,"width"),n.option.showlrc&&n.updateLrc(parseFloat(m.playedBar.style.width)/100*n.audio.duration),n.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=n.secondToTime(l*n.audio.duration)},b=function B(){document.removeEventListener("mouseup",B),document.removeEventListener("mousemove",g),n.audio.currentTime=parseFloat(m.playedBar.style.width)/100*n.audio.duration,n.playedTime=setInterval(function(){n.updateBar("played",n.audio.currentTime/n.audio.duration,"width"),n.option.showlrc&&n.updateLrc(),n.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=n.secondToTime(n.audio.currentTime),n.trigger("playing")},100)};f.addEventListener("mousedown",function(){v=m.barWrap.clientWidth,clearInterval(n.playedTime),document.addEventListener("mousemove",g),document.addEventListener("mouseup",b)}),m.volumeBar=this.element.getElementsByClassName("aplayer-volume")[0];var x=this.element.getElementsByClassName("aplayer-volume-bar")[0];this.volumeicon=this.element.getElementsByClassName("aplayer-time")[0].getElementsByTagName("button")[0];var w=35;this.element.getElementsByClassName("aplayer-volume-bar-wrap")[0].addEventListener("click",function(e){var a=e||window.event,t=(w-a.clientY+r(x))/w;t=t>0?t:0,t=t<1?t:1,n.volume(t)}),this.volumeicon.addEventListener("click",function(){n.audio.muted?(n.audio.muted=!1,n.volumeicon.className=1===n.audio.volume?"aplayer-icon aplayer-icon-volume-up":"aplayer-icon aplayer-icon-volume-down",1===n.audio.volume?(n.volumeicon.className="aplayer-icon aplayer-icon-volume-up",n.volumeicon.innerHTML=n.getSVG("volume-up")):(n.volumeicon.className="aplayer-icon aplayer-icon-volume-down",n.volumeicon.innerHTML=n.getSVG("volume-down")),n.updateBar("volume",n.audio.volume,"height")):(n.audio.muted=!0,n.volumeicon.className="aplayer-icon aplayer-icon-volume-off",n.volumeicon.innerHTML=n.getSVG("volume-off"),n.updateBar("volume",0,"height"))});var A=this.element.getElementsByClassName("aplayer-icon-mode")[0];if(A.addEventListener("click",function(){"random"===n.mode?n.mode="single":"single"===n.mode?n.mode="order":"order"===n.mode?n.mode="circulation":"circulation"===n.mode&&(n.mode="random"),A.innerHTML=n.getSVG(n.mode),n.audio.loop=!(n.multiple||"order"===n.mode)}),this.multiple&&!function(){var e=n.element.getElementsByClassName("aplayer-list")[0];e.style.height=e.offsetHeight+"px",n.element.getElementsByClassName("aplayer-icon-menu")[0].addEventListener("click",function(){e.classList.contains("aplayer-list-hide")?e.classList.remove("aplayer-list-hide"):e.classList.add("aplayer-list-hide")})}(),"random"===this.mode){var E=parseInt(Math.random()*this.option.music.length);this.setMusic(E)}else this.setMusic(0);i.push(this)}return r(e,[{key:"setMusic",value:function(e){var a=this;this.multiple&&"undefined"!=typeof e&&(this.playIndex=e);var t=this.playIndex;this.music=this.multiple?this.option.music[t]:this.option.music,this.music.pic&&(this.element.getElementsByClassName("aplayer-pic")[0].style.backgroundImage="url('"+this.music.pic+"')"),this.element.getElementsByClassName("aplayer-title")[0].innerHTML=this.music.title,this.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - "+this.music.author,this.multiple&&(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.multiple&&(this.element.getElementsByClassName("aplayer-list")[0].scrollTop=33*t),this.multiple&&!this.audios[t]||this.playIndex===-1?(this.audio=document.createElement("audio"),this.audio.src=this.music.url,this.audio.preload=this.option.preload?this.option.preload:"auto",this.audio.addEventListener("durationchange",function(){1!==a.audio.duration&&(a.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=a.secondToTime(a.audio.duration))}),this.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("loaded",e,"width")}),this.audio.addEventListener("error",function(){a.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - Error happens ╥﹏╥",a.trigger("pause")}),this.audio.addEventListener("canplay",function(){a.trigger("canplay")}),this.ended=!1,this.multiple?this.audio.addEventListener("ended",function(){if(a.isMobile)return a.ended=!0,void a.pause();if(0!==a.audio.currentTime)if("random"===a.mode){var e=parseInt(Math.random()*a.option.music.length);e===a.playIndex&&(e++,e%=a.option.music.length),a.setMusic(e)}else"single"===a.mode?a.setMusic(a.playIndex):"order"===a.mode?a.playIndex=200&&r.status<300||304===r.status){t=r.responseText,a.lrcs[e]=l(t),a.lrc=a.lrcs[e];var i="";a.lrcContents=a.element.getElementsByClassName("aplayer-lrc-contents")[0];for(var n=0;n"+a.lrc[n][1]+"

";a.lrcContents.innerHTML=i,a.lrcIndex||(a.lrcIndex=0),a.lrcContents.getElementsByTagName("p")[0].classList.add("aplayer-lrc-current"),a.lrcContents.style.transform="translateY(0px)",a.lrcContents.style.webkitTransform="translateY(0px)"}else console.log("Request was unsuccessful: "+r.status)};var i=void 0;i=a.multiple?a.option.music[e].lrc:a.option.music.lrc,r.open("get",i,!0),r.send(null)}(),t?a.lrcs[e]=l(t):a.lrcs[e]=[["00:00","Loading"]]}(),a.lrc=a.lrcs[e];var r="";a.lrcContents=a.element.getElementsByClassName("aplayer-lrc-contents")[0];for(var i=0;i"+a.lrc[i][1]+"

";a.lrcContents.innerHTML=r,a.lrcIndex||(a.lrcIndex=0),a.lrcContents.getElementsByTagName("p")[0].classList.add("aplayer-lrc-current"),a.lrcContents.style.transform="translateY(0px)",a.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()}},{key:"play",value:function(e){var a=this;if("[object Number]"===Object.prototype.toString.call(e)&&(this.audio.currentTime=e),this.audio.paused){if(this.button.classList.remove("aplayer-play"),this.button.classList.add("aplayer-pause"),this.button.innerHTML="",setTimeout(function(){a.button.innerHTML='\n "},100),this.option.mutex)for(var t=0;t'+e.getSVG("play")+" "},100),this.audio.pause(),clearInterval(this.playedTime),this.trigger("pause"))}},{key:"volume",value:function(e){this.updateBar("volume",e,"height"),this.audio.volume=e,this.audio.muted&&(this.audio.muted=!1),1===e?(this.volumeicon.className="aplayer-icon aplayer-icon-volume-up",this.volumeicon.innerHTML=this.getSVG("volume-up")):(this.volumeicon.className="aplayer-icon aplayer-icon-volume-down",this.volumeicon.innerHTML=this.getSVG("volume-down"))}},{key:"on",value:function(e,a){"function"==typeof a&&this.event[e].push(a)}},{key:"toggle",value:function(){this.audio.paused?this.play():this.pause()}}]),e}();e.exports=n},function(e,a,t){var l=t(2);"string"==typeof l&&(l=[[e.id,l,""]]);t(5)(l,{});l.locals&&(e.exports=l.locals)},function(e,a,t){a=e.exports=t(3)(),a.push([e.id,".aplayer-narrow{width:66px}.aplayer-narrow .aplayer-info{display:none}.aplayer-withlrc.aplayer-narrow{width:90px}.aplayer-withlrc.aplayer .aplayer-pic{height:90px;width:90px}.aplayer-withlrc.aplayer .aplayer-info{margin-left:90px;height:90px}.aplayer-withlrc.aplayer .aplayer-lrc{display:block}.aplayer-withlrc.aplayer .aplayer-info{padding:10px 7px 0}.aplayer-list.aplayer .aplayer-info{border-bottom:1px solid #e9e9e9}.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:normal}.aplayer *{box-sizing:content-box}.aplayer .aplayer-icon{width:15px;height:15px;border:none;background-color:transparent;outline:none;cursor:pointer;opacity:.8;vertical-align:middle;padding:0}.aplayer .aplayer-icon .aplayer-fill{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.aplayer .aplayer-lrc-content{display:none}.aplayer .aplayer-pic{position:relative;float:left;height:66px;width:66px;background-image:url("+t(4)+");background-size:100%;-webkit-transition:all .3s ease;transition:all .3s ease}.aplayer .aplayer-pic .aplayer-button{position:absolute;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-button .aplayer-fill{fill:#fff}.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:3px;left:4px;height:20px;width:20px}.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:2px;left:2px;height:12px;width:12px}.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:13px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;cursor:default;padding-bottom:2px}.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;display:-webkit-box;display:-ms-flexbox;display:flex}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap{margin:0 0 0 5px;padding:4px 0;cursor:pointer!important;-webkit-box-flex:1;-ms-flex:1;flex:1}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar{position:relative;height:2px;width:100%;background:#cdcdcd}.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:relative;right:0;bottom:3px;height:17px;color:#999;font-size:11px;padding-left:7px}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner{vertical-align:middle}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon{cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon .aplayer-fill{fill:#666}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-mode{margin-right:4px}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover .aplayer-fill{fill:#000}.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-menu,.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-mode{display:none}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap{position:relative;display:inline-block;margin-left:3px;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:15px;right:-3px;width:25px;height:40px;z-index:99}.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:30px;background:#fff;text-align:center;overflow:hidden;margin:-10px 0 7px}.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(top,hsla(0,0%,100%,0),hsla(0,0%,100%,.8));background:-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),to(hsla(0,0%,100%,.8)));background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.8));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ccffffff',GradientType=0)}.aplayer .aplayer-lrc p{font-size:12px;color:#666;line-height:16px!important;height:16px!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;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;cursor:default}.aplayer .aplayer-list{overflow:auto;-webkit-transition:all .5s ease;transition:all .5s ease;will-change:height}.aplayer .aplayer-list.aplayer-list-hide{height:0!important}.aplayer .aplayer-list::-webkit-scrollbar{width:5px}.aplayer .aplayer-list::-webkit-scrollbar-track{background-color:#f9f9f9}.aplayer .aplayer-list::-webkit-scrollbar-thumb{border-radius:3px;background-color:#eee}.aplayer .aplayer-list::-webkit-scrollbar-thumb:hover{background-color:#ccc}.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;overflow:hidden}.aplayer .aplayer-list ol li:first-child{border-top:none}.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}@-webkit-keyframes aplayer-roll{0%{left:0}to{left:-100%}}@keyframes aplayer-roll{0%{left:0}to{left:-100%}}",""])},function(e,a){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],a=0;a=0&&b.splice(a,1)}function o(e){var a=document.createElement("style");return a.type="text/css",i(e,a),a}function s(e){var a=document.createElement("link");return a.rel="stylesheet",i(e,a),a}function p(e,a){var t,l,r;if(a.singleton){var i=g++;t=v||(v=o(a)),l=c.bind(null,t,i,!1),r=c.bind(null,t,i,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(t=s(a),l=d.bind(null,t),r=function(){n(t),t.href&&URL.revokeObjectURL(t.href)}):(t=o(a),l=u.bind(null,t),r=function(){n(t)});return l(e),function(a){if(a){if(a.css===e.css&&a.media===e.media&&a.sourceMap===e.sourceMap)return;l(e=a)}else r()}}function c(e,a,t,l){var r=t?"":l.css;if(e.styleSheet)e.styleSheet.cssText=x(a,r);else{var i=document.createTextNode(r),n=e.childNodes;n[a]&&e.removeChild(n[a]),n.length?e.insertBefore(i,n[a]):e.appendChild(i)}}function u(e,a){var t=a.css,l=a.media;if(l&&e.setAttribute("media",l),e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}function d(e,a){var t=a.css,l=a.sourceMap;l&&(t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(l))))+" */");var r=new Blob([t],{type:"text/css"}),i=e.href;e.href=URL.createObjectURL(r),i&&URL.revokeObjectURL(i)}var y={},h=function(e){var a;return function(){return"undefined"==typeof a&&(a=e.apply(this,arguments)),a}},m=h(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),f=h(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,g=0,b=[];e.exports=function(e,a){a=a||{},"undefined"==typeof a.singleton&&(a.singleton=m()),"undefined"==typeof a.insertAt&&(a.insertAt="bottom");var t=r(e);return l(t,a),function(e){for(var i=[],n=0;n\\n \\n \\n \\n \";\n\t };\n\t\n\t this.isMobile = /mobile/i.test(window.navigator.userAgent);\n\t // compatibility: some mobile browsers don't suppose autoplay\n\t if (this.isMobile) {\n\t option.autoplay = false;\n\t }\n\t\n\t // default options\n\t var defaultOption = {\n\t element: document.getElementsByClassName('aplayer')[0],\n\t narrow: false,\n\t autoplay: false,\n\t mutex: true,\n\t showlrc: 0,\n\t theme: '#b7daff',\n\t mode: 'circulation'\n\t };\n\t for (var defaultKey in defaultOption) {\n\t if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {\n\t option[defaultKey] = defaultOption[defaultKey];\n\t }\n\t }\n\t\n\t // multiple music\n\t this.playIndex = Object.prototype.toString.call(option.music) === '[object Array]' ? 0 : -1;\n\t\n\t this.option = option;\n\t this.audios = [];\n\t this.mode = option.mode;\n\t\n\t /**\n\t * Parse second to 00:00 format. 00:00:00 if audio is over an hour long.\n\t *\n\t * @param {Number} second\n\t * @return {String} 00:00 format. 00:00:00 if over an hour long.\n\t */\n\t this.secondToTime = function (second) {\n\t var add0 = function add0(num) {\n\t return num < 10 ? '0' + num : '' + num;\n\t };\n\t var min = parseInt(second / 60);\n\t var sec = parseInt(second - min * 60);\n\t var hours = parseInt(min / 60);\n\t var minAdjust = parseInt(second / 60 - 60 * parseInt(second / 60 / 60));\n\t return second >= 3600 ? add0(hours) + ':' + add0(minAdjust) + ':' + add0(sec) : add0(min) + ':' + add0(sec);\n\t };\n\t\n\t // save lrc\n\t this.element = this.option.element;\n\t if (this.option.showlrc === 2 || this.option.showlrc === true) {\n\t this.savelrc = [];\n\t for (var i = 0; i < this.element.getElementsByClassName('aplayer-lrc-content').length; i++) {\n\t this.savelrc.push(this.element.getElementsByClassName('aplayer-lrc-content')[i].innerHTML);\n\t }\n\t }\n\t this.lrcs = [];\n\t\n\t /**\n\t * Update progress bar, including loading progress bar and play progress bar\n\t *\n\t * @param {String} type - Point out which bar it is, should be played loaded or volume\n\t * @param {Number} percentage\n\t * @param {String} direction - Point out the direction of this bar, Should be height or width\n\t */\n\t this.updateBar = function (type, percentage, direction) {\n\t percentage = percentage > 0 ? percentage : 0;\n\t percentage = percentage < 1 ? percentage : 1;\n\t bar[type + 'Bar'].style[direction] = percentage * 100 + '%';\n\t };\n\t\n\t /**\n\t * Update lrc\n\t *\n\t * @param {Number} currentTime\n\t */\n\t this.updateLrc = function () {\n\t var currentTime = arguments.length <= 0 || arguments[0] === undefined ? _this.audio.currentTime : arguments[0];\n\t\n\t if (_this.lrcIndex > _this.lrc.length - 1 || currentTime < _this.lrc[_this.lrcIndex][0] || !_this.lrc[_this.lrcIndex + 1] || currentTime >= _this.lrc[_this.lrcIndex + 1][0]) {\n\t for (var _i = 0; _i < _this.lrc.length; _i++) {\n\t if (currentTime >= _this.lrc[_i][0] && (!_this.lrc[_i + 1] || currentTime < _this.lrc[_i + 1][0])) {\n\t _this.lrcIndex = _i;\n\t _this.lrcContents.style.transform = \"translateY(\" + -_this.lrcIndex * 20 + \"px)\";\n\t _this.lrcContents.style.webkitTransform = \"translateY(\" + -_this.lrcIndex * 20 + \"px)\";\n\t _this.lrcContents.getElementsByClassName('aplayer-lrc-current')[0].classList.remove('aplayer-lrc-current');\n\t _this.lrcContents.getElementsByTagName('p')[_i].classList.add('aplayer-lrc-current');\n\t }\n\t }\n\t }\n\t };\n\t\n\t // define APlayer events\n\t var eventTypes = ['play', 'pause', 'canplay', 'playing', 'ended', 'error'];\n\t this.event = {};\n\t for (var _i2 = 0; _i2 < eventTypes.length; _i2++) {\n\t this.event[eventTypes[_i2]] = [];\n\t }\n\t this.trigger = function (type) {\n\t for (var _i3 = 0; _i3 < _this.event[type].length; _i3++) {\n\t _this.event[type][_i3]();\n\t }\n\t };\n\t\n\t this.multiple = this.playIndex > -1;\n\t this.music = this.multiple ? this.option.music[this.playIndex] : this.option.music;\n\t\n\t // add class aplayer-withlrc\n\t if (this.option.showlrc) {\n\t this.element.classList.add('aplayer-withlrc');\n\t }\n\t\n\t // fill in HTML\n\t var eleHTML = \"\\n
\\n
\\n \\n
\\n
\\n
\\n
\\n \\n \\n
\\n
\\n
\\n
\\n
\\n
\\n
\\n
\\n
\\n \\n
\\n
\\n
\\n
\\n \\n - 00:00 / 00:00\\n \\n
\\n \\n
\\n
\\n
\\n
\\n
\\n
\\n \\n \" + (this.multiple ? \"\" : \"\") + \"\\n
\\n
\\n
\");\n\t if (this.multiple) {\n\t eleHTML += \"\\n
\\n
    \";\n\t for (var _i4 = 0; _i4 < this.option.music.length; _i4++) {\n\t eleHTML += \"\\n
  1. \\n \\n \" + (_i4 + 1) + \"\\n \" + this.option.music[_i4].title + \"\\n \" + this.option.music[_i4].author + \"\\n
  2. \";\n\t }\n\t eleHTML += \"\\n
\\n
\";\n\t }\n\t this.element.innerHTML = eleHTML;\n\t\n\t // hide mode button in arrow container\n\t if (this.element.offsetWidth < 300) {\n\t this.element.getElementsByClassName('aplayer-icon-mode')[0].style.display = 'none';\n\t }\n\t\n\t this.ptime = this.element.getElementsByClassName('aplayer-ptime')[0];\n\t\n\t if (this.element.getElementsByClassName('aplayer-info')[0].offsetWidth < 200) {\n\t this.element.getElementsByClassName('aplayer-time')[0].classList.add('aplayer-time-narrow');\n\t }\n\t // fix the width of aplayer bar\n\t var bar = {};\n\t bar.barWrap = this.element.getElementsByClassName('aplayer-bar-wrap')[0];\n\t\n\t // switch to narrow style\n\t if (this.option.narrow) {\n\t this.element.classList.add('aplayer-narrow');\n\t }\n\t\n\t // play and pause button\n\t this.button = this.element.getElementsByClassName('aplayer-button')[0];\n\t this.button.addEventListener('click', function (e) {\n\t if (_this.button.classList.contains('aplayer-play')) {\n\t _this.play();\n\t } else if (_this.button.classList.contains('aplayer-pause')) {\n\t _this.pause();\n\t }\n\t });\n\t\n\t // click music list: change music\n\t if (this.multiple) {\n\t (function () {\n\t var listItem = _this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li');\n\t\n\t var _loop = function _loop(_i5) {\n\t listItem[_i5].addEventListener('click', function () {\n\t var musicIndex = parseInt(listItem[_i5].getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1;\n\t if (musicIndex !== _this.playIndex) {\n\t _this.setMusic(musicIndex);\n\t _this.play();\n\t } else {\n\t _this.toggle();\n\t }\n\t });\n\t };\n\t\n\t for (var _i5 = 0; _i5 < _this.option.music.length; _i5++) {\n\t _loop(_i5);\n\t }\n\t })();\n\t }\n\t\n\t // control play progress\n\t bar.playedBar = this.element.getElementsByClassName('aplayer-played')[0];\n\t bar.loadedBar = this.element.getElementsByClassName('aplayer-loaded')[0];\n\t var thumb = this.element.getElementsByClassName('aplayer-thumb')[0];\n\t var barWidth = void 0;\n\t bar.barWrap.addEventListener('click', function (event) {\n\t var e = event || window.event;\n\t barWidth = bar.barWrap.clientWidth;\n\t var percentage = (e.clientX - getElementViewLeft(bar.barWrap)) / barWidth;\n\t _this.updateBar('played', percentage, 'width');\n\t _this.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _this.secondToTime(percentage * _this.audio.duration);\n\t _this.audio.currentTime = parseFloat(bar.playedBar.style.width) / 100 * _this.audio.duration;\n\t });\n\t\n\t thumb.addEventListener('mouseover', function () {\n\t thumb.style.background = _this.option.theme;\n\t });\n\t thumb.addEventListener('mouseout', function () {\n\t thumb.style.background = '#fff';\n\t });\n\t\n\t var thumbMove = function thumbMove(event) {\n\t var e = event || window.event;\n\t var percentage = (e.clientX - getElementViewLeft(bar.barWrap)) / barWidth;\n\t percentage = percentage > 0 ? percentage : 0;\n\t percentage = percentage < 1 ? percentage : 1;\n\t _this.updateBar('played', percentage, 'width');\n\t if (_this.option.showlrc) {\n\t _this.updateLrc(parseFloat(bar.playedBar.style.width) / 100 * _this.audio.duration);\n\t }\n\t _this.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _this.secondToTime(percentage * _this.audio.duration);\n\t };\n\t\n\t var thumbUp = function thumbUp() {\n\t document.removeEventListener('mouseup', thumbUp);\n\t document.removeEventListener('mousemove', thumbMove);\n\t _this.audio.currentTime = parseFloat(bar.playedBar.style.width) / 100 * _this.audio.duration;\n\t _this.playedTime = setInterval(function () {\n\t _this.updateBar('played', _this.audio.currentTime / _this.audio.duration, 'width');\n\t if (_this.option.showlrc) {\n\t _this.updateLrc();\n\t }\n\t _this.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _this.secondToTime(_this.audio.currentTime);\n\t _this.trigger('playing');\n\t }, 100);\n\t };\n\t\n\t thumb.addEventListener('mousedown', function () {\n\t barWidth = bar.barWrap.clientWidth;\n\t clearInterval(_this.playedTime);\n\t document.addEventListener('mousemove', thumbMove);\n\t document.addEventListener('mouseup', thumbUp);\n\t });\n\t\n\t // control volume\n\t bar.volumeBar = this.element.getElementsByClassName('aplayer-volume')[0];\n\t var volumeBarWrap = this.element.getElementsByClassName('aplayer-volume-bar')[0];\n\t this.volumeicon = this.element.getElementsByClassName('aplayer-time')[0].getElementsByTagName('button')[0];\n\t var barHeight = 35;\n\t this.element.getElementsByClassName('aplayer-volume-bar-wrap')[0].addEventListener('click', function (event) {\n\t var e = event || window.event;\n\t var percentage = (barHeight - e.clientY + getElementViewTop(volumeBarWrap)) / barHeight;\n\t percentage = percentage > 0 ? percentage : 0;\n\t percentage = percentage < 1 ? percentage : 1;\n\t _this.volume(percentage);\n\t });\n\t this.volumeicon.addEventListener('click', function () {\n\t if (_this.audio.muted) {\n\t _this.audio.muted = false;\n\t _this.volumeicon.className = _this.audio.volume === 1 ? 'aplayer-icon aplayer-icon-volume-up' : 'aplayer-icon aplayer-icon-volume-down';\n\t if (_this.audio.volume === 1) {\n\t _this.volumeicon.className = 'aplayer-icon aplayer-icon-volume-up';\n\t _this.volumeicon.innerHTML = _this.getSVG('volume-up');\n\t } else {\n\t _this.volumeicon.className = 'aplayer-icon aplayer-icon-volume-down';\n\t _this.volumeicon.innerHTML = _this.getSVG('volume-down');\n\t }\n\t _this.updateBar('volume', _this.audio.volume, 'height');\n\t } else {\n\t _this.audio.muted = true;\n\t _this.volumeicon.className = 'aplayer-icon aplayer-icon-volume-off';\n\t _this.volumeicon.innerHTML = _this.getSVG('volume-off');\n\t _this.updateBar('volume', 0, 'height');\n\t }\n\t });\n\t\n\t // get element's view position\n\t function getElementViewLeft(element) {\n\t var actualLeft = element.offsetLeft;\n\t var current = element.offsetParent;\n\t var elementScrollLeft = void 0;\n\t while (current !== null) {\n\t actualLeft += current.offsetLeft;\n\t current = current.offsetParent;\n\t }\n\t elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;\n\t return actualLeft - elementScrollLeft;\n\t }\n\t\n\t function getElementViewTop(element) {\n\t var actualTop = element.offsetTop;\n\t var current = element.offsetParent;\n\t var elementScrollTop = void 0;\n\t while (current !== null) {\n\t actualTop += current.offsetTop;\n\t current = current.offsetParent;\n\t }\n\t elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop;\n\t return actualTop - elementScrollTop;\n\t }\n\t\n\t // mode control\n\t var modeEle = this.element.getElementsByClassName('aplayer-icon-mode')[0];\n\t modeEle.addEventListener('click', function () {\n\t if (_this.mode === 'random') {\n\t _this.mode = 'single';\n\t } else if (_this.mode === 'single') {\n\t _this.mode = 'order';\n\t } else if (_this.mode === 'order') {\n\t _this.mode = 'circulation';\n\t } else if (_this.mode === 'circulation') {\n\t _this.mode = 'random';\n\t }\n\t modeEle.innerHTML = _this.getSVG(_this.mode);\n\t _this.audio.loop = !(_this.multiple || _this.mode === 'order');\n\t });\n\t\n\t // toggle menu control\n\t if (this.multiple) {\n\t (function () {\n\t var list = _this.element.getElementsByClassName('aplayer-list')[0];\n\t list.style.height = list.offsetHeight + 'px';\n\t _this.element.getElementsByClassName('aplayer-icon-menu')[0].addEventListener('click', function () {\n\t if (!list.classList.contains('aplayer-list-hide')) {\n\t list.classList.add('aplayer-list-hide');\n\t } else {\n\t list.classList.remove('aplayer-list-hide');\n\t }\n\t });\n\t })();\n\t }\n\t\n\t if (this.mode === 'random') {\n\t var random = parseInt(Math.random() * this.option.music.length);\n\t this.setMusic(random);\n\t } else {\n\t this.setMusic(0);\n\t }\n\t\n\t instances.push(this);\n\t }\n\t\n\t /**\n\t * Set music\n\t */\n\t\n\t\n\t _createClass(APlayer, [{\n\t key: \"setMusic\",\n\t value: function setMusic(index) {\n\t var _this2 = this;\n\t\n\t // get this.music\n\t if (this.multiple && typeof index !== 'undefined') {\n\t this.playIndex = index;\n\t }\n\t var indexMusic = this.playIndex;\n\t this.music = this.multiple ? this.option.music[indexMusic] : this.option.music;\n\t\n\t // set html\n\t if (this.music.pic) {\n\t this.element.getElementsByClassName('aplayer-pic')[0].style.backgroundImage = \"url('\" + this.music.pic + \"')\";\n\t }\n\t this.element.getElementsByClassName('aplayer-title')[0].innerHTML = this.music.title;\n\t this.element.getElementsByClassName('aplayer-author')[0].innerHTML = \" - \" + this.music.author;\n\t if (this.multiple) {\n\t if (this.element.getElementsByClassName('aplayer-list-light')[0]) {\n\t this.element.getElementsByClassName('aplayer-list-light')[0].classList.remove('aplayer-list-light');\n\t }\n\t this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[indexMusic].classList.add('aplayer-list-light');\n\t }\n\t\n\t // set the previous audio object\n\t if (this.audio) {\n\t this.pause();\n\t this.audio.currentTime = 0;\n\t }\n\t\n\t if (this.multiple) {\n\t this.element.getElementsByClassName('aplayer-list')[0].scrollTop = indexMusic * 33;\n\t }\n\t\n\t // get this audio object\n\t if (this.multiple && !this.audios[indexMusic] || this.playIndex === -1) {\n\t this.audio = document.createElement(\"audio\");\n\t this.audio.src = this.music.url;\n\t this.audio.preload = this.option.preload ? this.option.preload : 'auto';\n\t\n\t // show audio time: the metadata has loaded or changed\n\t this.audio.addEventListener('durationchange', function () {\n\t if (_this2.audio.duration !== 1) {\n\t // compatibility: Android browsers will output 1 at first\n\t _this2.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _this2.secondToTime(_this2.audio.duration);\n\t }\n\t });\n\t\n\t // show audio loaded bar: to inform interested parties of progress downloading the media\n\t this.audio.addEventListener('progress', function () {\n\t var percentage = _this2.audio.buffered.length ? _this2.audio.buffered.end(_this2.audio.buffered.length - 1) / _this2.audio.duration : 0;\n\t _this2.updateBar('loaded', percentage, 'width');\n\t });\n\t\n\t // audio download error: an error occurs\n\t this.audio.addEventListener('error', function () {\n\t _this2.element.getElementsByClassName('aplayer-author')[0].innerHTML = \" - Error happens ╥﹏╥\";\n\t _this2.trigger('pause');\n\t });\n\t\n\t // audio can play: enough data is available that the media can be played\n\t this.audio.addEventListener('canplay', function () {\n\t _this2.trigger('canplay');\n\t });\n\t\n\t // multiple music play\n\t this.ended = false;\n\t if (this.multiple) {\n\t this.audio.addEventListener('ended', function () {\n\t if (_this2.isMobile) {\n\t _this2.ended = true;\n\t _this2.pause();\n\t return;\n\t }\n\t if (_this2.audio.currentTime !== 0) {\n\t if (_this2.mode === 'random') {\n\t var random = parseInt(Math.random() * _this2.option.music.length);\n\t if (random === _this2.playIndex) {\n\t random++;\n\t random = random % _this2.option.music.length;\n\t }\n\t _this2.setMusic(random);\n\t } else if (_this2.mode === 'single') {\n\t _this2.setMusic(_this2.playIndex);\n\t } else if (_this2.mode === 'order') {\n\t if (_this2.playIndex < _this2.option.music.length - 1) {\n\t _this2.setMusic(++_this2.playIndex);\n\t } else {\n\t _this2.ended = true;\n\t _this2.pause();\n\t _this2.trigger('ended');\n\t }\n\t } else if (_this2.mode === 'circulation') {\n\t if (_this2.playIndex < _this2.option.music.length - 1) {\n\t _this2.setMusic(++_this2.playIndex);\n\t } else {\n\t _this2.setMusic(0);\n\t }\n\t }\n\t }\n\t });\n\t } else {\n\t this.audio.addEventListener('ended', function () {\n\t if (_this2.mode === 'order') {\n\t _this2.ended = true;\n\t _this2.pause();\n\t _this2.trigger('ended');\n\t }\n\t });\n\t }\n\t\n\t // control volume\n\t this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;\n\t\n\t // loop\n\t this.audio.loop = !(this.multiple || this.mode === 'order');\n\t\n\t if (this.multiple) {\n\t this.audios[indexMusic] = this.audio;\n\t }\n\t } else {\n\t this.audio = this.audios[indexMusic];\n\t this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;\n\t this.audio.currentTime = 0;\n\t }\n\t\n\t /**\n\t * Parse lrc, suppose multiple time tag\n\t *\n\t * @param {String} lrc_s - Format:\n\t * [mm:ss.xx]lyric\n\t * [mm:ss.xxx]lyric\n\t * [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric\n\t *\n\t * @return {String} [[time, text], [time, text], [time, text], ...]\n\t */\n\t var parseLrc = function parseLrc(lrc_s) {\n\t var lyric = lrc_s.split('\\n');\n\t var lrc = [];\n\t var lyricLen = lyric.length;\n\t for (var i = 0; i < lyricLen; i++) {\n\t // match lrc time\n\t var lrcTimes = lyric[i].match(/\\[(\\d{2}):(\\d{2})\\.(\\d{2,3})]/g);\n\t // match lrc text\n\t var lrcText = lyric[i].replace(/\\[(\\d{2}):(\\d{2})\\.(\\d{2,3})]/g, '').replace(/^\\s+|\\s+$/g, '');\n\t\n\t if (lrcTimes != null) {\n\t // handle multiple time tag\n\t var timeLen = lrcTimes.length;\n\t for (var j = 0; j < timeLen; j++) {\n\t var oneTime = /\\[(\\d{2}):(\\d{2})\\.(\\d{2,3})]/.exec(lrcTimes[j]);\n\t var lrcTime = oneTime[1] * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / ((oneTime[3] + '').length === 2 ? 100 : 1000);\n\t lrc.push([lrcTime, lrcText]);\n\t }\n\t }\n\t }\n\t // sort by time\n\t lrc.sort(function (a, b) {\n\t return a[0] - b[0];\n\t });\n\t return lrc;\n\t };\n\t\n\t // fill in lrc\n\t if (this.option.showlrc) {\n\t (function () {\n\t var index = _this2.multiple ? indexMusic : 0;\n\t\n\t if (!_this2.lrcs[index]) {\n\t (function () {\n\t var lrcs = '';\n\t if (_this2.option.showlrc === 1) {\n\t if (_this2.multiple) {\n\t lrcs = _this2.option.music[index].lrc;\n\t } else {\n\t lrcs = _this2.option.music.lrc;\n\t }\n\t } else if (_this2.option.showlrc === 2 || _this2.option.showlrc === true) {\n\t lrcs = _this2.savelrc[index];\n\t } else if (_this2.option.showlrc === 3) {\n\t (function () {\n\t var xhr = new XMLHttpRequest();\n\t xhr.onreadystatechange = function () {\n\t if (xhr.readyState === 4) {\n\t if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {\n\t lrcs = xhr.responseText;\n\t _this2.lrcs[index] = parseLrc(lrcs);\n\t _this2.lrc = _this2.lrcs[index];\n\t var _lrcHTML = '';\n\t _this2.lrcContents = _this2.element.getElementsByClassName('aplayer-lrc-contents')[0];\n\t for (var i = 0; i < _this2.lrc.length; i++) {\n\t _lrcHTML += \"

\" + _this2.lrc[i][1] + \"

\";\n\t }\n\t _this2.lrcContents.innerHTML = _lrcHTML;\n\t if (!_this2.lrcIndex) {\n\t _this2.lrcIndex = 0;\n\t }\n\t _this2.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current');\n\t _this2.lrcContents.style.transform = 'translateY(0px)';\n\t _this2.lrcContents.style.webkitTransform = 'translateY(0px)';\n\t } else {\n\t console.log('Request was unsuccessful: ' + xhr.status);\n\t }\n\t }\n\t };\n\t var apiurl = void 0;\n\t if (_this2.multiple) {\n\t apiurl = _this2.option.music[index].lrc;\n\t } else {\n\t apiurl = _this2.option.music.lrc;\n\t }\n\t xhr.open('get', apiurl, true);\n\t xhr.send(null);\n\t })();\n\t }\n\t if (lrcs) {\n\t _this2.lrcs[index] = parseLrc(lrcs);\n\t } else {\n\t _this2.lrcs[index] = [['00:00', 'Loading']];\n\t }\n\t })();\n\t }\n\t\n\t _this2.lrc = _this2.lrcs[index];\n\t var lrcHTML = '';\n\t _this2.lrcContents = _this2.element.getElementsByClassName('aplayer-lrc-contents')[0];\n\t for (var i = 0; i < _this2.lrc.length; i++) {\n\t lrcHTML += \"

\" + _this2.lrc[i][1] + \"

\";\n\t }\n\t _this2.lrcContents.innerHTML = lrcHTML;\n\t if (!_this2.lrcIndex) {\n\t _this2.lrcIndex = 0;\n\t }\n\t _this2.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current');\n\t _this2.lrcContents.style.transform = 'translateY(0px)';\n\t _this2.lrcContents.style.webkitTransform = 'translateY(0px)';\n\t })();\n\t }\n\t\n\t // set duration time\n\t if (this.audio.duration !== 1) {\n\t // compatibility: Android browsers will output 1 at first\n\t this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.audio.duration ? this.secondToTime(this.audio.duration) : '00:00';\n\t }\n\t\n\t // autoplay\n\t if (this.option.autoplay && !this.isMobile) {\n\t this.play();\n\t }\n\t this.option.autoplay = true; // autoplay next music\n\t\n\t if (this.isMobile) {\n\t this.pause();\n\t }\n\t }\n\t\n\t /**\n\t * Play music\n\t */\n\t\n\t }, {\n\t key: \"play\",\n\t value: function play(time) {\n\t var _this3 = this;\n\t\n\t if (Object.prototype.toString.call(time) === '[object Number]') {\n\t this.audio.currentTime = time;\n\t }\n\t if (this.audio.paused) {\n\t this.button.classList.remove('aplayer-play');\n\t this.button.classList.add('aplayer-pause');\n\t this.button.innerHTML = '';\n\t setTimeout(function () {\n\t _this3.button.innerHTML = \"\\n \";\n\t }, 100);\n\t\n\t // pause other players (Thanks @Aprikyblue)\n\t if (this.option.mutex) {\n\t for (var i = 0; i < instances.length; i++) {\n\t if (this != instances[i]) {\n\t instances[i].pause();\n\t }\n\t }\n\t }\n\t this.audio.play();\n\t if (this.playedTime) {\n\t clearInterval(this.playedTime);\n\t }\n\t this.playedTime = setInterval(function () {\n\t _this3.updateBar('played', _this3.audio.currentTime / _this3.audio.duration, 'width');\n\t if (_this3.option.showlrc) {\n\t _this3.updateLrc();\n\t }\n\t _this3.ptime.innerHTML = _this3.secondToTime(_this3.audio.currentTime);\n\t _this3.trigger('playing');\n\t }, 100);\n\t this.trigger('play');\n\t }\n\t }\n\t\n\t /**\n\t * Pause music\n\t */\n\t\n\t }, {\n\t key: \"pause\",\n\t value: function pause() {\n\t var _this4 = this;\n\t\n\t if (!this.audio.paused || this.ended) {\n\t this.ended = false;\n\t this.button.classList.remove('aplayer-pause');\n\t this.button.classList.add('aplayer-play');\n\t this.button.innerHTML = '';\n\t setTimeout(function () {\n\t _this4.button.innerHTML = \"\\n \";\n\t }, 100);\n\t this.audio.pause();\n\t clearInterval(this.playedTime);\n\t this.trigger('pause');\n\t }\n\t }\n\t\n\t /**\n\t * Set volume\n\t */\n\t\n\t }, {\n\t key: \"volume\",\n\t value: function volume(percentage) {\n\t this.updateBar('volume', percentage, 'height');\n\t this.audio.volume = percentage;\n\t if (this.audio.muted) {\n\t this.audio.muted = false;\n\t }\n\t if (percentage === 1) {\n\t this.volumeicon.className = 'aplayer-icon aplayer-icon-volume-up';\n\t this.volumeicon.innerHTML = this.getSVG('volume-up');\n\t } else {\n\t this.volumeicon.className = 'aplayer-icon aplayer-icon-volume-down';\n\t this.volumeicon.innerHTML = this.getSVG('volume-down');\n\t }\n\t }\n\t\n\t /**\n\t * attach event\n\t */\n\t\n\t }, {\n\t key: \"on\",\n\t value: function on(name, func) {\n\t if (typeof func === 'function') {\n\t this.event[name].push(func);\n\t }\n\t }\n\t\n\t /**\n\t * toggle between play and pause\n\t */\n\t\n\t }, {\n\t key: \"toggle\",\n\t value: function toggle() {\n\t if (this.audio.paused) {\n\t this.play();\n\t } else {\n\t this.pause();\n\t }\n\t }\n\t }]);\n\t\n\t return APlayer;\n\t}();\n\t\n\tmodule.exports = APlayer;\n\n/***/ },\n/* 1 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t// style-loader: Adds some css to the DOM by adding a