diff --git a/README.md b/README.md
index d37dbfa..3493ab1 100644
--- a/README.md
+++ b/README.md
@@ -183,26 +183,6 @@ $ npm run build
 
 + [hexo-tag-aplayer](https://github.com/grzhan/hexo-tag-aplayer)
 
-## Todo
-
-- [x] 播放进度拖拽控制
-- [x] 音量控制
-- [x] 分享到微博
-- [x] 加载样式及错误处理
-- [x] 窄样式 及 移动版样式
-- [x] 歌词展示
-- [x] 默认选项
-- [x] 移动端兼容性
-- [x] 播放列表
-- [x] 播放暂停按钮切换动画
-
-## Issues
-
-- [ ] 在 Firefox 中调整进度后, 播放到最后时音乐总时间会自动变长
-- [ ] 移动端各种浏览器触发事件的时机不同
-- [ ] 移动版 Safari 和 部分 Android 浏览器不支持 volume
-- [ ] 部分 Android 浏览器不支持 duration
-
 
 ## LICENSE
 
diff --git a/dist/APlayer.min.js b/dist/APlayer.min.js
index bdceb2b..161a9c3 100644
--- a/dist/APlayer.min.js
+++ b/dist/APlayer.min.js
@@ -1 +1,2 @@
-!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}this.element=this.option.element,this.music=this.playIndex>-1?this.option.music[this.playIndex]:this.option.music;var i;if(this.option.showlrc){var l=[];for(i=0;i<this.element.getElementsByClassName("aplayer-lrc-content").length;i++)l.push(this.element.getElementsByClassName("aplayer-lrc-content")[i].innerHTML);this.lrcs=this.parseLrc(l)}var n='<div class="aplayer-pic"><div class="aplayer-button aplayer-play"><i class="demo-icon aplayer-icon-play"></i></div></div><div class="aplayer-info"><div class="aplayer-music"><span class="aplayer-title"></span><span class="aplayer-author"></span></div><div class="aplayer-lrc"><div class="aplayer-lrc-contents" style="transform: translateY(0); -webkit-transform: translateY(0);"></div></div><div class="aplayer-controller"><div class="aplayer-bar-wrap"><div class="aplayer-bar"><div class="aplayer-loaded" style="width: 0"></div><div class="aplayer-played" style="width: 0; background: '+this.option.theme+';"><span class="aplayer-thumb" style="border: 1px solid '+this.option.theme+';"></span></div></div></div><div class="aplayer-time"> - <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span><div class="aplayer-volume-wrap"><i class="demo-icon aplayer-icon-volume-down"></i><div class="aplayer-volume-bar-wrap"><div class="aplayer-volume-bar"><div class="aplayer-volume" style="height: 80%; background: '+this.option.theme+';"></div></div></div></div><i class="demo-icon aplayer-icon-loop"></i>'+(this.playIndex>-1?'<i class="demo-icon aplayer-icon-menu"></i>':"")+"</div></div></div>";if(this.playIndex>-1){for(n+='<div class="aplayer-list"><ol>',i=0;i<this.option.music.length;i++)n+='<li><span class="aplayer-list-cur" style="background: '+this.option.theme+';"></span><span class="aplayer-list-index">'+(i+1)+'</span><span class="aplayer-list-title">'+this.option.music[i].title+'</span><span class="aplayer-list-author">'+this.option.music[i].author+"</span></li>";n+="</ol></div>"}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(i=0;i<this.option.music.length;i++)this.element.getElementsByClassName("aplayer-list")[0].getElementsByTagName("li")[i].addEventListener("click",function(){var e=parseInt(this.getElementsByClassName("aplayer-list-index")[0].innerHTML)-1;e!==o.playIndex&&o.setMusic(e),o.play()});this.playedBar=this.element.getElementsByClassName("aplayer-played")[0],this.loadedBar=this.element.getElementsByClassName("aplayer-loaded")[0],this.thumb=this.element.getElementsByClassName("aplayer-thumb")[0],this.bar=this.element.getElementsByClassName("aplayer-bar")[0];var r;this.bar.addEventListener("click",function(e){var t=e||window.event;r=o.bar.clientWidth;var s=(t.clientX-a(o.bar))/r;o.updateBar.call(o,"played",s,"width"),o.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=o.secondToTime(s*o.audio.duration),o.audio.currentTime=parseFloat(o.playedBar.style.width)/100*o.audio.duration}),this.thumb.addEventListener("mouseover",function(){this.style.background=o.option.theme}),this.thumb.addEventListener("mouseout",function(){this.style.background="#fff"}),this.thumb.addEventListener("mousedown",function(){r=o.bar.clientWidth,clearInterval(o.playedTime),document.addEventListener("mousemove",e),document.addEventListener("mouseup",t)}),this.volumeBar=this.element.getElementsByClassName("aplayer-volume")[0];var d=this.element.getElementsByClassName("aplayer-volume-bar")[0],p=o.element.getElementsByClassName("aplayer-time")[0].getElementsByTagName("i")[0],c=35;this.element.getElementsByClassName("aplayer-volume-bar-wrap")[0].addEventListener("click",function(e){var t=e||window.event,a=(c-t.clientY+s(d))/c;a=a>0?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";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<a.option.music.length-1?a.setMusic(++a.playIndex):a.loop?a.setMusic(0):a.loop||a.pause()}):this.audio.addEventListener("ended",function(){a.loop||a.pause()}),this.audio.volume=parseInt(this.element.getElementsByClassName("aplayer-volume")[0].style.height)/100,this.audio.loop=this.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="";this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents")[0];for(var i=0;i<this.lrc.length;i++)s+="<p>"+this.lrc[i][1]+"</p>";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='<i class="demo-icon aplayer-icon-pause"></i>'},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='<i class="demo-icon aplayer-icon-play"></i>'},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][0]||!this.lrc[this.lrcIndex+1]||e>=this.lrc[this.lrcIndex+1][0])for(var t=0;t<this.lrc.length;t++)e>=this.lrc[t][0]&&(!this.lrc[t+1]||e<this.lrc[t+1][0])&&(this.lrcIndex=t,this.lrcContents.style.transform="translateY("+20*-this.lrcIndex+"px)",this.lrcContents.style.webkitTransform="translateY("+20*-this.lrcIndex+"px)",this.lrcContents.getElementsByClassName("aplayer-lrc-current")[0].classList.remove("aplayer-lrc-current"),this.lrcContents.getElementsByTagName("p")[t].classList.add("aplayer-lrc-current"))},e.prototype.secondToTime=function(e){var t=function(e){return 10>e?"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;a<e.length;a++){for(var s=e[a].split("\n"),i=[],l=s.length,n=0;l>n;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
+"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var a=0;a<t.length;a++){var s=t[a];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}return function(t,a,s){return a&&e(t.prototype,a),s&&e(t,s),t}}();!function(){var e=function(){function e(t){var a=this;_classCallCheck(this,e),this.isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),this.isMobile&&(t.autoplay=!1);var s={element:document.getElementsByClassName("aplayer")[0],narrow:!1,autoplay:!1,showlrc:!1,theme:"#b7daff"};for(var n in s)s.hasOwnProperty(n)&&!t.hasOwnProperty(n)&&(t[n]=s[n]);this.playIndex="[object Array]"===Object.prototype.toString.call(t.music)?0:-1,this.option=t,this.audios=[],this.loop=!0,this.secondToTime=function(e){var t=function(e){return 10>e?"0"+e:""+e},a=parseInt(e/60),s=parseInt(e-60*a);return t(a)+":"+t(s)},this.parseLrc=function(e){for(var t=[],a=0;a<e.length;a++){for(var s=e[a].split("\n"),n=[],i=s.length,l=0;i>l;l++){var o=s[l].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g),r=s[l].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g,"").replace(/^\s+|\s+$/g,"");if(null!=o)for(var d=o.length,u=0;d>u;u++){var c=/\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(o[u]),p=60*c[1]+parseInt(c[2])+parseInt(c[3])/(2===(c[3]+"").length?100:1e3);n.push([p,r])}}n.sort(function(e,t){return e[0]-t[0]}),t.push(n)}return t},this.updateBar=function(e,t,s){t=t>0?t:0,t=1>t?t:1,a[e+"Bar"].style[s]=100*t+"%"},this.updateLrc=function(e){if("undefined"==typeof e&&(e=a.audio.currentTime),a.lrcIndex>a.lrc.length-1||e<a.lrc[a.lrcIndex][0]||!a.lrc[a.lrcIndex+1]||e>=a.lrc[a.lrcIndex+1][0])for(var t=0;t<a.lrc.length;t++)e>=a.lrc[t][0]&&(!a.lrc[t+1]||e<a.lrc[t+1][0])&&(a.lrcIndex=t,a.lrcContents.style.transform="translateY("+20*-a.lrcIndex+"px)",a.lrcContents.style.webkitTransform="translateY("+20*-a.lrcIndex+"px)",a.lrcContents.getElementsByClassName("aplayer-lrc-current")[0].classList.remove("aplayer-lrc-current"),a.lrcContents.getElementsByTagName("p")[t].classList.add("aplayer-lrc-current"))}}return _createClass(e,[{key:"init",value:function(){function e(e){for(var t=e.offsetLeft,a=e.offsetParent,s=void 0;null!==a;)t+=a.offsetLeft,a=a.offsetParent;return s=document.body.scrollLeft+document.documentElement.scrollLeft,t-s}function t(e){for(var t=e.offsetTop,a=e.offsetParent,s=void 0;null!==a;)t+=a.offsetTop,a=a.offsetParent;return s=document.body.scrollTop+document.documentElement.scrollTop,t-s}var a=this;this.element=this.option.element,this.music=this.playIndex>-1?this.option.music[this.playIndex]:this.option.music;var s=void 0;if(this.option.showlrc){var n=[];for(s=0;s<this.element.getElementsByClassName("aplayer-lrc-content").length;s++)n.push(this.element.getElementsByClassName("aplayer-lrc-content")[s].innerHTML);this.lrcs=this.parseLrc(n)}var i='\n                <div class="aplayer-pic">\n                    <div class="aplayer-button aplayer-play">\n                        <i class="demo-icon aplayer-icon-play"></i>\n                    </div>\n                </div>\n                <div class="aplayer-info">\n                    <div class="aplayer-music">\n                        <span class="aplayer-title"></span>\n                        <span class="aplayer-author"></span>\n                    </div>\n                    <div class="aplayer-lrc">\n                        <div class="aplayer-lrc-contents" style="transform: translateY(0); -webkit-transform: translateY(0);"></div>\n                    </div>\n                    <div class="aplayer-controller">\n                        <div class="aplayer-bar-wrap">\n                            <div class="aplayer-bar">\n                                <div class="aplayer-loaded" style="width: 0"></div>\n                                <div class="aplayer-played" style="width: 0; background: '+this.option.theme+';">\n                                    <span class="aplayer-thumb" style="border: 1px solid '+this.option.theme+';"></span>\n                                </div>\n                            </div>\n                        </div>\n                        <div class="aplayer-time">\n                             - <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span>\n                            <div class="aplayer-volume-wrap">\n                                <i class="demo-icon aplayer-icon-volume-down"></i>\n                                <div class="aplayer-volume-bar-wrap">\n                                    <div class="aplayer-volume-bar">\n                                        <div class="aplayer-volume" style="height: 80%; background: '+this.option.theme+';"></div>\n                                    </div>\n                                </div>\n                            </div>\n                            <i class="demo-icon aplayer-icon-loop"></i>'+(this.playIndex>-1?'<i class="demo-icon aplayer-icon-menu"></i>':"")+"\n                        </div>\n                    </div>\n                </div>";if(this.playIndex>-1){for(i+='\n                <div class="aplayer-list">\n                    <ol>',s=0;s<this.option.music.length;s++)i+='\n                        <li>\n                            <span class="aplayer-list-cur" style="background: '+this.option.theme+';"></span>\n                            <span class="aplayer-list-index">'+(s+1)+'</span>\n                            <span class="aplayer-list-title">'+this.option.music[s].title+'</span>\n                            <span class="aplayer-list-author">'+this.option.music[s].author+"</span>\n                        </li>";i+="\n                    </ol>\n                </div>"}this.element.innerHTML=i,this.option.narrow&&this.element.classList.add("aplayer-narrow"),this.button=this.element.getElementsByClassName("aplayer-button")[0],this.button.addEventListener("click",function(e){a.button.classList.contains("aplayer-play")?a.play():a.button.classList.contains("aplayer-pause")&&a.pause()}),this.playIndex>-1&&!function(){for(var e=a.element.getElementsByClassName("aplayer-list")[0].getElementsByTagName("li"),t=function(t){e[t].addEventListener("click",function(){var s=parseInt(e[t].getElementsByClassName("aplayer-list-index")[0].innerHTML)-1;s!==a.playIndex&&a.setMusic(s),a.play()})},s=0;s<a.option.music.length;s++)t(s)}(),this.playedBar=this.element.getElementsByClassName("aplayer-played")[0],this.loadedBar=this.element.getElementsByClassName("aplayer-loaded")[0],this.thumb=this.element.getElementsByClassName("aplayer-thumb")[0],this.bar=this.element.getElementsByClassName("aplayer-bar")[0];var l=void 0;this.bar.addEventListener("click",function(t){var s=t||window.event;l=a.bar.clientWidth;var n=(s.clientX-e(a.bar))/l;a.updateBar("played",n,"width"),a.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=a.secondToTime(n*a.audio.duration),a.audio.currentTime=parseFloat(a.playedBar.style.width)/100*a.audio.duration}),this.thumb.addEventListener("mouseover",function(){a.thumb.style.background=a.option.theme}),this.thumb.addEventListener("mouseout",function(){a.thumb.style.background="#fff"});var o=function(t){var s=t||window.event,n=(s.clientX-e(a.bar))/l;n=n>0?n:0,n=1>n?n:1,a.updateBar("played",n,"width"),a.option.showlrc&&a.updateLrc(parseFloat(a.playedBar.style.width)/100*a.audio.duration),a.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=a.secondToTime(n*a.audio.duration)},r=function m(){document.removeEventListener("mouseup",m),document.removeEventListener("mousemove",o),a.audio.currentTime=parseFloat(a.playedBar.style.width)/100*a.audio.duration,a.play()};this.thumb.addEventListener("mousedown",function(){l=a.bar.clientWidth,clearInterval(a.playedTime),document.addEventListener("mousemove",o),document.addEventListener("mouseup",r)}),this.volumeBar=this.element.getElementsByClassName("aplayer-volume")[0];var d=this.element.getElementsByClassName("aplayer-volume-bar")[0],u=this.element.getElementsByClassName("aplayer-time")[0].getElementsByTagName("i")[0],c=35;this.element.getElementsByClassName("aplayer-volume-bar-wrap")[0].addEventListener("click",function(e){var s=e||window.event,n=(c-s.clientY+t(d))/c;n=n>0?n:0,n=1>n?n:1,a.updateBar("volume",n,"height"),a.audio.volume=n,a.audio.muted&&(a.audio.muted=!1),1===n?u.className="demo-icon aplayer-icon-volume-up":u.className="demo-icon aplayer-icon-volume-down"}),u.addEventListener("click",function(){a.audio.muted?(a.audio.muted=!1,u.className=1===a.audio.volume?"demo-icon aplayer-icon-volume-up":"demo-icon aplayer-icon-volume-down",a.updateBar("volume",a.audio.volume,"height")):(a.audio.muted=!0,u.className="demo-icon aplayer-icon-volume-off",a.updateBar("volume",0,"height"))});var p=this.element.getElementsByClassName("aplayer-icon-loop")[0];p.addEventListener("click",function(){a.loop?(p.classList.add("aplayer-noloop"),a.loop=!1,a.audio.loop=a.playIndex>-1?!1:a.loop):(p.classList.remove("aplayer-noloop"),a.loop=!0,a.audio.loop=a.playIndex>-1?!1:a.loop)}),this.playIndex>-1&&this.element.getElementsByClassName("aplayer-icon-menu")[0].addEventListener("click",function(){var e=a.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)}},{key:"setMusic",value:function(e){var t=this;this.playIndex>-1&&"undefined"!=typeof e&&(this.playIndex=e);var a=this.playIndex;if(this.music=this.playIndex>-1?this.option.music[a]: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")[a].classList.add("aplayer-list-light")),this.audio&&(this.pause(),this.audio.currentTime=0),this.playIndex>-1&&!this.audios[a]||-1===this.playIndex?(this.audio=document.createElement("audio"),this.audio.src=this.music.url,this.audio.preload=this.isMobile?"none":"metadata",this.audio.addEventListener("durationchange",function(){1!==t.audio.duration&&(t.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=t.secondToTime(t.audio.duration))}),this.audio.addEventListener("progress",function(){var e=t.audio.buffered.length?t.audio.buffered.end(t.audio.buffered.length-1)/t.audio.duration:0;t.updateBar("loaded",e,"width")}),this.audio.addEventListener("error",function(){t.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - Error happens ╥﹏╥"}),this.playIndex>-1?this.audio.addEventListener("ended",function(){t.playIndex<t.option.music.length-1?t.setMusic(++t.playIndex):t.loop?t.setMusic(0):t.loop||t.pause()}):this.audio.addEventListener("ended",function(){t.loop||t.pause()}),this.audio.volume=parseInt(this.element.getElementsByClassName("aplayer-volume")[0].style.height)/100,this.audio.loop=this.playIndex>-1?!1:this.loop,this.playIndex>-1&&(this.audios[a]=this.audio)):(this.audio=this.audios[a],this.audio.volume=parseInt(this.element.getElementsByClassName("aplayer-volume")[0].style.height)/100,this.audio.currentTime=0),this.option.showlrc){this.lrc=this.playIndex>-1?this.lrcs[a]:this.lrcs[0],this.element.classList.add("aplayer-withlrc");var s="";this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents")[0];for(var n=0;n<this.lrc.length;n++)s+="<p>"+this.lrc[n][1]+"</p>";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()}},{key:"play",value:function(){var e=this;this.button.classList.remove("aplayer-play"),this.button.classList.add("aplayer-pause"),this.button.innerHTML="",setTimeout(function(){e.button.innerHTML='<i class="demo-icon aplayer-icon-pause"></i>'},100),this.audio.play(),this.playedTime&&clearInterval(this.playedTime),this.playedTime=setInterval(function(){e.updateBar("played",e.audio.currentTime/e.audio.duration,"width"),e.option.showlrc&&e.updateLrc(),e.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=e.secondToTime(e.audio.currentTime)},100)}},{key:"pause",value:function(){var e=this;this.button.classList.remove("aplayer-pause"),this.button.classList.add("aplayer-play"),this.button.innerHTML="",setTimeout(function(){e.button.innerHTML='<i class="demo-icon aplayer-icon-play"></i>'},100),this.audio.pause(),clearInterval(this.playedTime)}}]),e}();"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=e:window.APlayer=e}();
+//# sourceMappingURL=APlayer.min.js.map
diff --git a/dist/APlayer.min.js.map b/dist/APlayer.min.js.map
new file mode 100644
index 0000000..47d4192
--- /dev/null
+++ b/dist/APlayer.min.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["APlayer.js"],"names":["_classCallCheck","instance","Constructor","TypeError","_createClass","defineProperties","target","props","i","length","descriptor","enumerable","configurable","writable","Object","defineProperty","key","protoProps","staticProps","prototype","APlayer","option","_this","this","isMobile","navigator","userAgent","match","autoplay","defaultOption","element","document","getElementsByClassName","narrow","showlrc","theme","defaultKey","hasOwnProperty","playIndex","toString","call","music","audios","loop","secondToTime","second","add0","num","min","parseInt","sec","parseLrc","arr","lrcs","k","lyric","split","lrc","lyricLen","lrcTimes","lrcText","replace","timeLen","j","oneTime","exec","lrcTime","push","sort","a","b","updateBar","type","percentage","direction","style","updateLrc","currentTime","audio","lrcIndex","lrcContents","transform","webkitTransform","classList","remove","getElementsByTagName","add","value","getElementViewLeft","actualLeft","offsetLeft","current","offsetParent","elementScrollLeft","body","scrollLeft","documentElement","getElementViewTop","actualTop","offsetTop","elementScrollTop","scrollTop","_this2","innerHTML","eleHTML","title","author","button","addEventListener","e","contains","play","pause","listItem","_loop","_i","musicIndex","setMusic","playedBar","loadedBar","thumb","bar","barWidth","event","window","clientWidth","clientX","duration","parseFloat","width","background","thumbMove","thumbUp","removeEventListener","clearInterval","playedTime","volumeBar","volumeBarWrap","volumeicon","barHeight","clientY","volume","muted","className","loopEle","list","index","_this3","indexMusic","pic","backgroundImage","encodeURI","createElement","src","url","preload","buffered","end","height","lrcHTML","_this4","setTimeout","setInterval","_this5","module","exports"],"mappings":"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","file":"APlayer.min.js","sourcesContent":["/**\n * APlayer constructor function\n *\n * @param {Object} option - See README\n * @constructor\n */\n(() => {\n    class APlayer {\n        constructor (option) {\n\n            this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);\n            // compatibility: some mobile browsers don't suppose autoplay\n            if (this.isMobile) {\n                option.autoplay = false;\n            }\n\n            // default options\n            const defaultOption = {\n                element: document.getElementsByClassName('aplayer')[0],\n                narrow: false,\n                autoplay: false,\n                showlrc: false,\n                theme: '#b7daff'\n            };\n            for (let defaultKey in defaultOption) {\n                if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {\n                    option[defaultKey] = defaultOption[defaultKey];\n                }\n            }\n\n            // multiple music\n            this.playIndex = Object.prototype.toString.call(option.music) === '[object Array]' ? 0 : -1;\n\n            this.option = option;\n            this.audios = [];\n            this.loop = true;\n\n            /**\n             * Parse second to 00:00 format\n             *\n             * @param {Number} second\n             * @return {String} 00:00 format\n             */\n            this.secondToTime =  (second) => {\n                const add0 = (num) => {\n                    return num < 10 ? '0' + num : '' + num;\n                };\n                const min = parseInt(second / 60);\n                const sec = parseInt(second - min * 60);\n                return add0(min) + ':' + add0(sec);\n            };\n\n            /**\n             * Parse lrc, suppose multiple time tag\n             *\n             * @param {Array} arr - Format:\n             * [mm:ss.xx]lyric\n             * [mm:ss.xxx]lyric\n             * [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric\n             *\n             * @return {Array} [[[time, text], [time, text], [time, text], ...], [[time, text], [time, text], [time, text], ...], ...]\n             */\n            this.parseLrc =  (arr) => {\n                let lrcs = [];\n                for (let k = 0; k < arr.length; k++) {\n                    const lyric = arr[k].split('\\n');\n                    let lrc = [];\n                    const lyricLen = lyric.length;\n                    for (let i = 0; i < lyricLen; i++) {\n                        // match lrc time\n                        const lrcTimes = lyric[i].match(/\\[(\\d{2}):(\\d{2})\\.(\\d{2,3})]/g);\n                        // match lrc text\n                        const lrcText = lyric[i].replace(/\\[(\\d{2}):(\\d{2})\\.(\\d{2,3})]/g, '').replace(/^\\s+|\\s+$/g, '');\n\n                        if (lrcTimes != null) {\n                            // handle multiple time tag\n                            const timeLen = lrcTimes.length;\n                            for (let j = 0; j < timeLen; j++) {\n                                const oneTime = /\\[(\\d{2}):(\\d{2})\\.(\\d{2,3})]/.exec(lrcTimes[j]);\n                                const lrcTime = (oneTime[1]) * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / ((oneTime[3] + '').length === 2 ? 100 : 1000);\n                                lrc.push([lrcTime, lrcText]);\n                            }\n                        }\n                    }\n                    // sort by time\n                    lrc.sort((a, b) => a[0] - b[0]);\n                    lrcs.push(lrc);\n                }\n                return lrcs;\n            };\n\n            /**\n             * Update progress bar, including loading progress bar and play progress bar\n             *\n             * @param {String} type - Point out which bar it is, should be played loaded or volume\n             * @param {Number} percentage\n             * @param {String} direction - Point out the direction of this bar, Should be height or width\n             */\n            this.updateBar = (type, percentage, direction) => {\n                percentage = percentage > 0 ? percentage : 0;\n                percentage = percentage < 1 ? percentage : 1;\n                this[type + 'Bar'].style[direction] = percentage * 100 + '%';\n            };\n\n            /**\n             * Update lrc\n             *\n             * @param {Number} currentTime\n             */\n            this.updateLrc = (currentTime) => {\n                if (typeof(currentTime) === 'undefined') {\n                    currentTime = this.audio.currentTime;\n                }\n                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                    for (let i = 0; i < this.lrc.length; i++) {\n                        if (currentTime >= this.lrc[i][0] && (!this.lrc[i + 1] || currentTime < this.lrc[i + 1][0])) {\n                            this.lrcIndex = i;\n                            this.lrcContents.style.transform = 'translateY(' + -this.lrcIndex * 20 + 'px)';\n                            this.lrcContents.style.webkitTransform = 'translateY(' + -this.lrcIndex * 20 + 'px)';\n                            this.lrcContents.getElementsByClassName('aplayer-lrc-current')[0].classList.remove('aplayer-lrc-current');\n                            this.lrcContents.getElementsByTagName('p')[i].classList.add('aplayer-lrc-current');\n                        }\n                    }\n                }\n            };\n        }\n\n        /**\n         * AutoLink initialization function\n         */\n        init () {\n            this.element = this.option.element;\n            this.music = this.playIndex > -1 ? this.option.music[this.playIndex] : this.option.music;\n\n            let i;\n            // parser lrc\n            if (this.option.showlrc) {\n                let lrcs = [];\n                for (i = 0; i < this.element.getElementsByClassName('aplayer-lrc-content').length; i++) {\n                    lrcs.push(this.element.getElementsByClassName('aplayer-lrc-content')[i].innerHTML);\n                }\n                this.lrcs = this.parseLrc(lrcs);\n            }\n\n            // fill in HTML\n            let eleHTML = `\n                <div class=\"aplayer-pic\">\n                    <div class=\"aplayer-button aplayer-play\">\n                        <i class=\"demo-icon aplayer-icon-play\"></i>\n                    </div>\n                </div>\n                <div class=\"aplayer-info\">\n                    <div class=\"aplayer-music\">\n                        <span class=\"aplayer-title\"></span>\n                        <span class=\"aplayer-author\"></span>\n                    </div>\n                    <div class=\"aplayer-lrc\">\n                        <div class=\"aplayer-lrc-contents\" style=\"transform: translateY(0); -webkit-transform: translateY(0);\"></div>\n                    </div>\n                    <div class=\"aplayer-controller\">\n                        <div class=\"aplayer-bar-wrap\">\n                            <div class=\"aplayer-bar\">\n                                <div class=\"aplayer-loaded\" style=\"width: 0\"></div>\n                                <div class=\"aplayer-played\" style=\"width: 0; background: ` + this.option.theme + `;\">\n                                    <span class=\"aplayer-thumb\" style=\"border: 1px solid ` + this.option.theme + `;\"></span>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"aplayer-time\">\n                             - <span class=\"aplayer-ptime\">00:00</span> / <span class=\"aplayer-dtime\">00:00</span>\n                            <div class=\"aplayer-volume-wrap\">\n                                <i class=\"demo-icon aplayer-icon-volume-down\"></i>\n                                <div class=\"aplayer-volume-bar-wrap\">\n                                    <div class=\"aplayer-volume-bar\">\n                                        <div class=\"aplayer-volume\" style=\"height: 80%; background: ` + this.option.theme + `;\"></div>\n                                    </div>\n                                </div>\n                            </div>\n                            <i class=\"demo-icon aplayer-icon-loop\"></i>` + (this.playIndex > -1 ? `<i class=\"demo-icon aplayer-icon-menu\"></i>` : ``) + `\n                        </div>\n                    </div>\n                </div>`;\n            if (this.playIndex > -1) {\n                eleHTML += `\n                <div class=\"aplayer-list\">\n                    <ol>`;\n                for (i = 0; i < this.option.music.length; i++) {\n                    eleHTML += `\n                        <li>\n                            <span class=\"aplayer-list-cur\" style=\"background: ` + this.option.theme + `;\"></span>\n                            <span class=\"aplayer-list-index\">` + (i + 1) + `</span>\n                            <span class=\"aplayer-list-title\">` + this.option.music[i].title + `</span>\n                            <span class=\"aplayer-list-author\">` + this.option.music[i].author + `</span>\n                        </li>`\n                }\n                eleHTML += `\n                    </ol>\n                </div>`\n            }\n            this.element.innerHTML = eleHTML;\n\n            // switch to narrow style\n            if (this.option.narrow) {\n                this.element.classList.add('aplayer-narrow');\n            }\n\n            // play and pause button\n            this.button = this.element.getElementsByClassName('aplayer-button')[0];\n            this.button.addEventListener('click', (e) => {\n                if (this.button.classList.contains('aplayer-play')) {\n                   this.play();\n                }\n                else if (this.button.classList.contains('aplayer-pause')) {\n                    this.pause();\n                }\n            });\n\n            // click music list: change music\n            if (this.playIndex > -1) {\n                const listItem = this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li');\n                for (let i = 0; i < this.option.music.length; i++) {\n                    listItem[i].addEventListener('click', () => {\n                        const musicIndex = parseInt(listItem[i].getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1;\n                        if (musicIndex !== this.playIndex) {\n                            this.setMusic(musicIndex);\n                        }\n                        this.play();\n                    });\n                }\n            }\n\n            // control play progress\n            this.playedBar = this.element.getElementsByClassName('aplayer-played')[0];\n            this.loadedBar = this.element.getElementsByClassName('aplayer-loaded')[0];\n            this.thumb = this.element.getElementsByClassName('aplayer-thumb')[0];\n            this.bar = this.element.getElementsByClassName('aplayer-bar')[0];\n            let barWidth;\n            this.bar.addEventListener('click', (event) => {\n                const e = event || window.event;\n                barWidth = this.bar.clientWidth;\n                const percentage = (e.clientX - getElementViewLeft(this.bar)) / barWidth;\n                this.updateBar('played', percentage, 'width');\n                this.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = this.secondToTime(percentage * this.audio.duration);\n                this.audio.currentTime = parseFloat(this.playedBar.style.width) / 100 * this.audio.duration;\n            });\n\n            this.thumb.addEventListener('mouseover', () => {\n                this.thumb.style.background = this.option.theme;\n            });\n            this.thumb.addEventListener('mouseout', () => {\n                this.thumb.style.background = '#fff';\n            });\n\n            const thumbMove = (event) => {\n                const e = event || window.event;\n                let percentage = (e.clientX - getElementViewLeft(this.bar)) / barWidth;\n                percentage = percentage > 0 ? percentage : 0;\n                percentage = percentage < 1 ? percentage : 1;\n                this.updateBar('played', percentage, 'width');\n                if (this.option.showlrc) {\n                    this.updateLrc(parseFloat(this.playedBar.style.width) / 100 * this.audio.duration);\n                }\n                this.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = this.secondToTime(percentage * this.audio.duration);\n            };\n\n            const thumbUp = () => {\n                document.removeEventListener('mouseup', thumbUp);\n                document.removeEventListener('mousemove', thumbMove);\n                this.audio.currentTime = parseFloat(this.playedBar.style.width) / 100 * this.audio.duration;\n                this.play();\n            };\n\n            this.thumb.addEventListener('mousedown', () => {\n                barWidth = this.bar.clientWidth;\n                clearInterval(this.playedTime);\n                document.addEventListener('mousemove', thumbMove);\n                document.addEventListener('mouseup', thumbUp);\n            });\n\n            // control volume\n            this.volumeBar = this.element.getElementsByClassName('aplayer-volume')[0];\n            const volumeBarWrap = this.element.getElementsByClassName('aplayer-volume-bar')[0];\n            const volumeicon = this.element.getElementsByClassName('aplayer-time')[0].getElementsByTagName('i')[0];\n            const barHeight = 35;\n            this.element.getElementsByClassName('aplayer-volume-bar-wrap')[0].addEventListener('click', (event) => {\n                const e = event || window.event;\n                let percentage = (barHeight - e.clientY + getElementViewTop(volumeBarWrap)) / barHeight;\n                percentage = percentage > 0 ? percentage : 0;\n                percentage = percentage < 1 ? percentage : 1;\n                this.updateBar('volume', percentage, 'height');\n                this.audio.volume = percentage;\n                if (this.audio.muted) {\n                    this.audio.muted = false;\n                }\n                if (percentage === 1) {\n                    volumeicon.className = 'demo-icon aplayer-icon-volume-up';\n                }\n                else {\n                    volumeicon.className = 'demo-icon aplayer-icon-volume-down';\n                }\n            });\n            volumeicon.addEventListener('click', () => {\n                if (this.audio.muted) {\n                    this.audio.muted = false;\n                    volumeicon.className = this.audio.volume === 1 ? 'demo-icon aplayer-icon-volume-up' : 'demo-icon aplayer-icon-volume-down';\n                    this.updateBar('volume', this.audio.volume, 'height');\n                }\n                else {\n                    this.audio.muted = true;\n                    volumeicon.className = 'demo-icon aplayer-icon-volume-off';\n                    this.updateBar('volume', 0, 'height');\n                }\n            });\n\n            // get element's view position\n            function getElementViewLeft(element) {\n                let actualLeft = element.offsetLeft;\n                let current = element.offsetParent;\n                let elementScrollLeft;\n                while (current !== null) {\n                    actualLeft += current.offsetLeft;\n                    current = current.offsetParent;\n                }\n                elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;\n                return actualLeft - elementScrollLeft;\n            }\n\n            function getElementViewTop(element) {\n                let actualTop = element.offsetTop;\n                let current = element.offsetParent;\n                let elementScrollTop;\n                while (current !== null) {\n                    actualTop += current.offsetTop;\n                    current = current.offsetParent;\n                }\n                elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop;\n                return actualTop - elementScrollTop;\n            }\n\n            // loop control\n            const loopEle = this.element.getElementsByClassName('aplayer-icon-loop')[0];\n            loopEle.addEventListener('click', () => {\n                if (this.loop) {\n                    loopEle.classList.add('aplayer-noloop');\n                    this.loop = false;\n                    this.audio.loop = this.playIndex > -1 ? false : this.loop;\n                }\n                else {\n                    loopEle.classList.remove('aplayer-noloop');\n                    this.loop = true;\n                    this.audio.loop = this.playIndex > -1 ? false : this.loop;\n                }\n            });\n\n            // toggle menu control\n            if (this.playIndex > -1) {\n                this.element.getElementsByClassName('aplayer-icon-menu')[0].addEventListener('click', () => {\n                    const list = this.element.getElementsByClassName('aplayer-list')[0];\n                    if (!list.classList.contains('aplayer-list-hide')) {\n                        list.classList.add('aplayer-list-hide');\n                    }\n                    else {\n                        list.classList.remove('aplayer-list-hide');\n                    }\n                });\n            }\n\n            this.setMusic(0);\n        };\n\n        /**\n         * Set music\n         */\n        setMusic (index) {\n            // get this.music\n            if (this.playIndex > -1 && typeof(index) !== 'undefined') {\n                this.playIndex = index;\n            }\n            const indexMusic = this.playIndex;\n            this.music = this.playIndex > -1 ? this.option.music[indexMusic] : this.option.music;\n\n            // set html\n            if (this.music.pic) {\n                this.element.getElementsByClassName('aplayer-pic')[0].style.backgroundImage = 'url(' + encodeURI(this.music.pic) + ')';\n            }\n            this.element.getElementsByClassName('aplayer-title')[0].innerHTML = this.music.title;\n            this.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + this.music.author;\n            if (this.playIndex > -1) {\n                if (this.element.getElementsByClassName('aplayer-list-light')[0]) {\n                    this.element.getElementsByClassName('aplayer-list-light')[0].classList.remove('aplayer-list-light');\n                }\n                this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[indexMusic].classList.add('aplayer-list-light');\n            }\n\n            // set the previous audio object\n            if (this.audio) {\n                this.pause();\n                this.audio.currentTime = 0;\n            }\n\n            // get this audio object\n            if ((this.playIndex > -1 && !this.audios[indexMusic]) || this.playIndex === -1) {\n                this.audio = document.createElement(\"audio\");\n                this.audio.src = this.music.url;\n                this.audio.preload = this.isMobile ? 'none' : 'metadata';\n\n                // show audio time\n                this.audio.addEventListener('durationchange', () => {\n                    if (this.audio.duration !== 1) {           // compatibility: Android browsers will output 1 at first\n                        this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.secondToTime(this.audio.duration);\n                    }\n                });\n\n                // show audio loaded bar\n                this.audio.addEventListener('progress', () => {\n                    const percentage = this.audio.buffered.length ? this.audio.buffered.end(this.audio.buffered.length - 1) / this.audio.duration : 0;\n                    this.updateBar('loaded', percentage, 'width');\n                });\n\n                // audio download error\n                this.audio.addEventListener('error', () => {\n                    this.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + 'Error happens ╥﹏╥';\n                });\n\n                // multiple music play\n                if (this.playIndex > -1) {\n                    this.audio.addEventListener('ended', () => {\n                        if (this.playIndex < this.option.music.length - 1) {\n                            this.setMusic(++this.playIndex);\n                        }\n                        else if (this.loop) {\n                            this.setMusic(0);\n                        }\n                        else if (!this.loop) {\n                            this.pause();\n                        }\n                    });\n                }\n                else {\n                    this.audio.addEventListener('ended', () => {\n                        if (!this.loop) {\n                            this.pause();\n                        }\n                    });\n                }\n\n                // control volume\n                this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;\n\n                // loop\n                this.audio.loop = this.playIndex > -1 ? false : this.loop;\n\n                if (this.playIndex > -1) {\n                    this.audios[indexMusic] = this.audio;\n                }\n            }\n            else {\n                this.audio = this.audios[indexMusic];\n                this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;\n                this.audio.currentTime = 0;\n            }\n\n            // fill in lrc\n            if (this.option.showlrc) {\n                this.lrc = this.playIndex > -1 ? this.lrcs[indexMusic] : this.lrcs[0];\n                this.element.classList.add('aplayer-withlrc');\n                let lrcHTML = '';\n                this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0];\n                for (let i = 0; i < this.lrc.length; i++) {\n                    lrcHTML += '<p>' + this.lrc[i][1] + '</p>';\n                }\n                this.lrcContents.innerHTML = lrcHTML;\n                if (!this.lrcIndex) {\n                    this.lrcIndex = 0;\n                }\n                this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current');\n                this.lrcContents.style.transform = 'translateY(0px)';\n                this.lrcContents.style.webkitTransform = 'translateY(0px)';\n            }\n\n            // set duration time\n            if (this.audio.duration !== 1) {           // compatibility: Android browsers will output 1 at first\n                this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.audio.duration ? this.secondToTime(this.audio.duration) : '00:00';\n            }\n\n            // autoplay\n            if (this.option.autoplay && !this.isMobile) {\n                this.play();\n            }\n            this.option.autoplay = true;  // autoplay next music\n\n            if (this.isMobile) {\n                this.pause();\n            }\n        };\n\n        /**\n         * Play music\n         */\n        play () {\n            this.button.classList.remove('aplayer-play');\n            this.button.classList.add('aplayer-pause');\n            this.button.innerHTML = '';\n            setTimeout(() => {\n                this.button.innerHTML = '<i class=\"demo-icon aplayer-icon-pause\"></i>';\n            }, 100);\n            this.audio.play();\n            if (this.playedTime) {\n                clearInterval(this.playedTime);\n            }\n            this.playedTime = setInterval(() => {\n                this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');\n                if (this.option.showlrc) {\n                    this.updateLrc();\n                }\n                this.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = this.secondToTime(this.audio.currentTime);\n            }, 100);\n        };\n\n        /**\n         * Pause music\n         */\n        pause () {\n            this.button.classList.remove('aplayer-pause');\n            this.button.classList.add('aplayer-play');\n            this.button.innerHTML = '';\n            setTimeout(() => {\n                this.button.innerHTML = '<i class=\"demo-icon aplayer-icon-play\"></i>';\n            }, 100);\n            this.audio.pause();\n            clearInterval(this.playedTime);\n        };\n    }\n\n    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {\n        module.exports = APlayer\n    }\n    else {\n        window.APlayer = APlayer;\n    }\n})();"],"sourceRoot":"/source/"}
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 2c2bb30..e72f0cd 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -5,6 +5,8 @@ var uglify      = require('gulp-uglify');
 var concat      = require('gulp-concat');
 var cssNano     = require('gulp-cssnano');
 var rename      = require('gulp-rename');
+var babel       = require("gulp-babel");
+var sourcemaps  = require("gulp-sourcemaps");
 var browserSync = require('browser-sync').create();
 
 // Launch the server
@@ -28,10 +30,15 @@ gulp.task('copy', function () {
 // Build js files
 gulp.task('compressJS', function() {
     gulp.src(['src/*.js'])
+        .pipe(sourcemaps.init())
+        .pipe(babel({
+            presets: ['es2015']
+        }))
         .pipe(uglify())
         .pipe(rename({
             suffix: ".min"
         }))
+        .pipe(sourcemaps.write("."))
         .pipe(gulp.dest('dist'))
         .pipe(browserSync.stream());
 });
diff --git a/package.json b/package.json
index d4d3d01..d4b813a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aplayer",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "Wow, such a beautiful html5 music player",
   "main": "dist/APlayer.min.js",
   "scripts": {
@@ -24,13 +24,16 @@
   },
   "homepage": "https://github.com/DIYgod/APlayer#readme",
   "devDependencies": {
+    "babel-preset-es2015": "^6.6.0",
     "browser-sync": "^2.10.0",
     "gulp": "^3.9.0",
     "gulp-autoprefixer": "^3.1.0",
+    "gulp-babel": "^6.1.2",
     "gulp-concat": "^2.6.0",
     "gulp-cssnano": "^2.1.0",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^2.1.0",
+    "gulp-sourcemaps": "^1.6.0",
     "gulp-uglify": "^1.5.1"
   }
 }
diff --git a/src/APlayer.js b/src/APlayer.js
index 7a48268..6c96db6 100644
--- a/src/APlayer.js
+++ b/src/APlayer.js
@@ -4,537 +4,533 @@
  * @param {Object} option - See README
  * @constructor
  */
-(function () {
-    function APlayer(option) {
+(() => {
+    class APlayer {
+        constructor (option) {
 
-        this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);
-        // compatibility: some mobile browsers don't suppose autoplay
-        if (this.isMobile) {
-            option.autoplay = false;
-        }
-
-        // default options
-        var defaultOption = {
-            element: document.getElementsByClassName('aplayer')[0],
-            narrow: false,
-            autoplay: false,
-            showlrc: false,
-            theme: '#b7daff'
-        };
-        for (var defaultKey in defaultOption) {
-            if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {
-                option[defaultKey] = defaultOption[defaultKey];
+            this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);
+            // compatibility: some mobile browsers don't suppose autoplay
+            if (this.isMobile) {
+                option.autoplay = false;
             }
-        }
 
-        // multiple music
-        this.playIndex = Object.prototype.toString.call(option.music) === '[object Array]' ? 0 : -1;
-
-        this.option = option;
-        this.audios = [];
-        this.loop = true;
-    }
-
-    /**
-     * AutoLink initialization function
-     */
-    APlayer.prototype.init = function () {
-        this.element = this.option.element;
-        this.music = this.playIndex > -1 ? this.option.music[this.playIndex] : this.option.music;
-
-        var i;
-        // parser lrc
-        if (this.option.showlrc) {
-            var lrcs = [];
-            for (i = 0; i < this.element.getElementsByClassName('aplayer-lrc-content').length; i++) {
-                lrcs.push(this.element.getElementsByClassName('aplayer-lrc-content')[i].innerHTML);
+            // default options
+            const defaultOption = {
+                element: document.getElementsByClassName('aplayer')[0],
+                narrow: false,
+                autoplay: false,
+                showlrc: false,
+                theme: '#b7daff'
+            };
+            for (let defaultKey in defaultOption) {
+                if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {
+                    option[defaultKey] = defaultOption[defaultKey];
+                }
             }
-            this.lrcs = this.parseLrc(lrcs);
-        }
 
-        // fill in HTML
-        var eleHTML = ''
-            + '<div class="aplayer-pic">'
-            +     '<div class="aplayer-button aplayer-play">'
-            +         '<i class="demo-icon aplayer-icon-play"></i>'
-            +     '</div>'
-            + '</div>'
-            + '<div class="aplayer-info">'
-            +     '<div class="aplayer-music">'
-            +         '<span class="aplayer-title"></span>'
-            +         '<span class="aplayer-author"></span>'
-            +     '</div>'
-            +     '<div class="aplayer-lrc">'
-            +         '<div class="aplayer-lrc-contents" style="transform: translateY(0); -webkit-transform: translateY(0);"></div>'
-            +     '</div>'
-            +     '<div class="aplayer-controller">'
-            +         '<div class="aplayer-bar-wrap">'
-            +             '<div class="aplayer-bar">'
-            +                 '<div class="aplayer-loaded" style="width: 0"></div>'
-            +                 '<div class="aplayer-played" style="width: 0; background: ' + this.option.theme + ';">'
-            +                     '<span class="aplayer-thumb" style="border: 1px solid ' + this.option.theme + ';"></span>'
-            +                 '</div>'
-            +             '</div>'
-            +         '</div>'
-            +         '<div class="aplayer-time">'
-            +             ' - <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span>'
-            +             '<div class="aplayer-volume-wrap">'
-            +                 '<i class="demo-icon aplayer-icon-volume-down"></i>'
-            +                 '<div class="aplayer-volume-bar-wrap">'
-            +                     '<div class="aplayer-volume-bar">'
-            +                         '<div class="aplayer-volume" style="height: 80%; background: ' + this.option.theme + ';"></div>'
-            +                     '</div>'
-            +                 '</div>'
-            +             '</div>'
-            +             '<i class="demo-icon aplayer-icon-loop"></i>'
-            +             (this.playIndex > -1 ? '<i class="demo-icon aplayer-icon-menu"></i>' : '')
-            +         '</div>'
-            +     '</div>'
-            + '</div>';
-        if (this.playIndex > -1) {
-            eleHTML += ''
-            + '<div class="aplayer-list">'
-            +     '<ol>';
-            for (i = 0; i < this.option.music.length; i++) {
-                eleHTML += ''
-            +         '<li>'
-            +             '<span class="aplayer-list-cur" style="background: ' + this.option.theme + ';"></span>'
-            +             '<span class="aplayer-list-index">' + (i + 1) + '</span>'
-            +             '<span class="aplayer-list-title">' + this.option.music[i].title + '</span>'
-            +             '<span class="aplayer-list-author">' + this.option.music[i].author + '</span>'
-            +         '</li>'
-            }
-            eleHTML += ''
-            +     '</ol>'
-            + '</div>'
-        }
-        this.element.innerHTML = eleHTML;
+            // multiple music
+            this.playIndex = Object.prototype.toString.call(option.music) === '[object Array]' ? 0 : -1;
 
-        // switch to narrow style
-        if (this.option.narrow) {
-            this.element.classList.add('aplayer-narrow');
-        }
+            this.option = option;
+            this.audios = [];
+            this.loop = true;
 
-        var _self = this;
+            /**
+             * Parse second to 00:00 format
+             *
+             * @param {Number} second
+             * @return {String} 00:00 format
+             */
+            this.secondToTime =  (second) => {
+                const add0 = (num) => {
+                    return num < 10 ? '0' + num : '' + num;
+                };
+                const min = parseInt(second / 60);
+                const sec = parseInt(second - min * 60);
+                return add0(min) + ':' + add0(sec);
+            };
 
-        // play and pause button
-        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);
-            }
-        });
+            /**
+             * Parse lrc, suppose multiple time tag
+             *
+             * @param {Array} arr - Format:
+             * [mm:ss.xx]lyric
+             * [mm:ss.xxx]lyric
+             * [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric
+             *
+             * @return {Array} [[[time, text], [time, text], [time, text], ...], [[time, text], [time, text], [time, text], ...], ...]
+             */
+            this.parseLrc =  (arr) => {
+                let lrcs = [];
+                for (let k = 0; k < arr.length; k++) {
+                    const lyric = arr[k].split('\n');
+                    let lrc = [];
+                    const lyricLen = lyric.length;
+                    for (let i = 0; i < lyricLen; i++) {
+                        // match lrc time
+                        const lrcTimes = lyric[i].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g);
+                        // match lrc text
+                        const lrcText = lyric[i].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g, '').replace(/^\s+|\s+$/g, '');
 
-        // click music list: change music
-        if (this.playIndex > -1) {
-            for (i = 0; i < this.option.music.length; i++) {
-                this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[i].addEventListener('click', function () {
-                    var musicIndex = parseInt(this.getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1;
-                    if (musicIndex !== _self.playIndex) {
-                        _self.setMusic(musicIndex);
+                        if (lrcTimes != null) {
+                            // handle multiple time tag
+                            const timeLen = lrcTimes.length;
+                            for (let j = 0; j < timeLen; j++) {
+                                const oneTime = /\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(lrcTimes[j]);
+                                const lrcTime = (oneTime[1]) * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / ((oneTime[3] + '').length === 2 ? 100 : 1000);
+                                lrc.push([lrcTime, lrcText]);
+                            }
+                        }
                     }
-                    _self.play();
-                });
-            }
-        }
-
-        // control play progress
-        this.playedBar = this.element.getElementsByClassName('aplayer-played')[0];
-        this.loadedBar = this.element.getElementsByClassName('aplayer-loaded')[0];
-        this.thumb = this.element.getElementsByClassName('aplayer-thumb')[0];
-        this.bar = this.element.getElementsByClassName('aplayer-bar')[0];
-        var barWidth;
-        this.bar.addEventListener('click', function (event) {
-            var e = event || window.event;
-            barWidth = _self.bar.clientWidth;
-            var percentage = (e.clientX - getElementViewLeft(_self.bar)) / barWidth;
-            _self.updateBar.call(_self, 'played', percentage, 'width');
-            _self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
-            _self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration;
-        });
-
-        this.thumb.addEventListener('mouseover', function () {
-            this.style.background = _self.option.theme;
-        });
-        this.thumb.addEventListener('mouseout', function () {
-            this.style.background = '#fff';
-        });
-
-        this.thumb.addEventListener('mousedown', function () {
-            barWidth = _self.bar.clientWidth;
-            clearInterval(_self.playedTime);
-            document.addEventListener('mousemove', thumbMove);
-            document.addEventListener('mouseup', thumbUp);
-        });
-
-        function thumbMove(event) {
-            var e = event || window.event;
-            var percentage = (e.clientX - getElementViewLeft(_self.bar)) / barWidth;
-            percentage = percentage > 0 ? percentage : 0;
-            percentage = percentage < 1 ? percentage : 1;
-            _self.updateBar.call(_self, 'played', percentage, 'width');
-            if (_self.option.showlrc) {
-                _self.updateLrc.call(_self, parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration);
-            }
-            _self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
-        }
-
-        function thumbUp() {
-            document.removeEventListener('mouseup', thumbUp);
-            document.removeEventListener('mousemove', thumbMove);
-            _self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration;
-            _self.play();
-        }
-
-        // control volume
-        this.volumeBar = this.element.getElementsByClassName('aplayer-volume')[0];
-        var volumeBarWrap = this.element.getElementsByClassName('aplayer-volume-bar')[0];
-        var volumeicon = _self.element.getElementsByClassName('aplayer-time')[0].getElementsByTagName('i')[0];
-        var barHeight = 35;
-        this.element.getElementsByClassName('aplayer-volume-bar-wrap')[0].addEventListener('click', function (event) {
-            var e = event || window.event;
-            var percentage = (barHeight - e.clientY + getElementViewTop(volumeBarWrap)) / barHeight;
-            percentage = percentage > 0 ? percentage : 0;
-            percentage = percentage < 1 ? percentage : 1;
-            _self.updateBar.call(_self, 'volume', percentage, 'height');
-            _self.audio.volume = percentage;
-            if (_self.audio.muted) {
-                _self.audio.muted = false;
-            }
-            if (percentage === 1) {
-                volumeicon.className = 'demo-icon aplayer-icon-volume-up';
-            }
-            else {
-                volumeicon.className = 'demo-icon aplayer-icon-volume-down';
-            }
-        });
-        volumeicon.addEventListener('click', function () {
-            if (_self.audio.muted) {
-                _self.audio.muted = false;
-                volumeicon.className = _self.audio.volume === 1 ? 'demo-icon aplayer-icon-volume-up' : 'demo-icon aplayer-icon-volume-down';
-                _self.updateBar.call(_self, 'volume', _self.audio.volume, 'height');
-            }
-            else {
-                _self.audio.muted = true;
-                volumeicon.className = 'demo-icon aplayer-icon-volume-off';
-                _self.updateBar.call(_self, 'volume', 0, 'height');
-            }
-        });
-
-        // get element's view position
-        function getElementViewLeft(element) {
-            var actualLeft = element.offsetLeft;
-            var current = element.offsetParent;
-            var elementScrollLeft;
-            while (current !== null) {
-                actualLeft += current.offsetLeft;
-                current = current.offsetParent;
-            }
-            elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;
-            return actualLeft - elementScrollLeft;
-        }
-
-        function getElementViewTop(element) {
-            var actualTop = element.offsetTop;
-            var current = element.offsetParent;
-            var elementScrollTop;
-            while (current !== null) {
-                actualTop += current.offsetTop;
-                current = current.offsetParent;
-            }
-            elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop;
-            return actualTop - elementScrollTop;
-        }
-
-        // loop control
-        this.element.getElementsByClassName('aplayer-icon-loop')[0].addEventListener('click', function () {
-            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;
-            }
-        });
-
-        // toggle menu control
-        if (this.playIndex > -1) {
-            this.element.getElementsByClassName('aplayer-icon-menu')[0].addEventListener('click', function () {
-                var list = _self.element.getElementsByClassName('aplayer-list')[0];
-                if (!list.classList.contains('aplayer-list-hide')) {
-                    list.classList.add('aplayer-list-hide');
+                    // sort by time
+                    lrc.sort((a, b) => a[0] - b[0]);
+                    lrcs.push(lrc);
                 }
-                else {
-                    list.classList.remove('aplayer-list-hide');
+                return lrcs;
+            };
+
+            /**
+             * Update progress bar, including loading progress bar and play progress bar
+             *
+             * @param {String} type - Point out which bar it is, should be played loaded or volume
+             * @param {Number} percentage
+             * @param {String} direction - Point out the direction of this bar, Should be height or width
+             */
+            this.updateBar = (type, percentage, direction) => {
+                percentage = percentage > 0 ? percentage : 0;
+                percentage = percentage < 1 ? percentage : 1;
+                this[type + 'Bar'].style[direction] = percentage * 100 + '%';
+            };
+
+            /**
+             * Update lrc
+             *
+             * @param {Number} currentTime
+             */
+            this.updateLrc = (currentTime) => {
+                if (typeof(currentTime) === 'undefined') {
+                    currentTime = this.audio.currentTime;
                 }
-            });
+                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])) {
+                    for (let i = 0; i < this.lrc.length; i++) {
+                        if (currentTime >= this.lrc[i][0] && (!this.lrc[i + 1] || currentTime < this.lrc[i + 1][0])) {
+                            this.lrcIndex = i;
+                            this.lrcContents.style.transform = 'translateY(' + -this.lrcIndex * 20 + 'px)';
+                            this.lrcContents.style.webkitTransform = 'translateY(' + -this.lrcIndex * 20 + 'px)';
+                            this.lrcContents.getElementsByClassName('aplayer-lrc-current')[0].classList.remove('aplayer-lrc-current');
+                            this.lrcContents.getElementsByTagName('p')[i].classList.add('aplayer-lrc-current');
+                        }
+                    }
+                }
+            };
         }
 
-        this.setMusic(0);
-    };
+        /**
+         * AutoLink initialization function
+         */
+        init () {
+            this.element = this.option.element;
+            this.music = this.playIndex > -1 ? this.option.music[this.playIndex] : this.option.music;
 
-    /**
-     * Set music
-     */
-    APlayer.prototype.setMusic = function (index) {
-        // get this.music
-        if (this.playIndex > -1 && typeof(arguments[0]) !== 'undefined') {
-            this.playIndex = arguments[0];
-        }
-        var indexMusic = this.playIndex;
-        this.music = this.playIndex > -1 ? this.option.music[indexMusic] : this.option.music;
-
-        // set html
-        if (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;
-        if (this.playIndex > -1) {
-            if (this.element.getElementsByClassName('aplayer-list-light')[0]) {
-                this.element.getElementsByClassName('aplayer-list-light')[0].classList.remove('aplayer-list-light');
+            let i;
+            // parser lrc
+            if (this.option.showlrc) {
+                let lrcs = [];
+                for (i = 0; i < this.element.getElementsByClassName('aplayer-lrc-content').length; i++) {
+                    lrcs.push(this.element.getElementsByClassName('aplayer-lrc-content')[i].innerHTML);
+                }
+                this.lrcs = this.parseLrc(lrcs);
             }
-            this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[indexMusic].classList.add('aplayer-list-light');
-        }
 
-        // set the previous audio object
-        if (this.audio) {
-            this.pause();
-            this.audio.currentTime = 0;
-        }
-
-        // get this audio object
-        if ((this.playIndex > -1 && !this.audios[indexMusic]) || this.playIndex === -1) {
-            this.audio = document.createElement("audio");
-            this.audio.src = this.music.url;
-            this.audio.preload = this.isMobile ? 'none' : 'metadata';
-
-            // show audio time
-            var _self = this;
-            this.audio.addEventListener('durationchange', function () {
-                if (_self.audio.duration !== 1) {           // compatibility: Android browsers will output 1 at first
-                    _self.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration);
-                }
-            });
-
-            // show audio loaded bar
-            _self.audio.addEventListener('progress', function () {
-                var percentage = _self.audio.buffered.length ? _self.audio.buffered.end(_self.audio.buffered.length - 1) / _self.audio.duration : 0;
-                _self.updateBar.call(_self, 'loaded', percentage, 'width');
-            });
-
-            // audio download error
-            this.audio.addEventListener('error', function () {
-                _self.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + 'Error happens ╥﹏╥';
-            });
-
-            // multiple music play
+            // fill in HTML
+            let eleHTML = `
+                <div class="aplayer-pic">
+                    <div class="aplayer-button aplayer-play">
+                        <i class="demo-icon aplayer-icon-play"></i>
+                    </div>
+                </div>
+                <div class="aplayer-info">
+                    <div class="aplayer-music">
+                        <span class="aplayer-title"></span>
+                        <span class="aplayer-author"></span>
+                    </div>
+                    <div class="aplayer-lrc">
+                        <div class="aplayer-lrc-contents" style="transform: translateY(0); -webkit-transform: translateY(0);"></div>
+                    </div>
+                    <div class="aplayer-controller">
+                        <div class="aplayer-bar-wrap">
+                            <div class="aplayer-bar">
+                                <div class="aplayer-loaded" style="width: 0"></div>
+                                <div class="aplayer-played" style="width: 0; background: ` + this.option.theme + `;">
+                                    <span class="aplayer-thumb" style="border: 1px solid ` + this.option.theme + `;"></span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="aplayer-time">
+                             - <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span>
+                            <div class="aplayer-volume-wrap">
+                                <i class="demo-icon aplayer-icon-volume-down"></i>
+                                <div class="aplayer-volume-bar-wrap">
+                                    <div class="aplayer-volume-bar">
+                                        <div class="aplayer-volume" style="height: 80%; background: ` + this.option.theme + `;"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <i class="demo-icon aplayer-icon-loop"></i>` + (this.playIndex > -1 ? `<i class="demo-icon aplayer-icon-menu"></i>` : ``) + `
+                        </div>
+                    </div>
+                </div>`;
             if (this.playIndex > -1) {
-                this.audio.addEventListener('ended', function () {
-                    if (_self.playIndex < _self.option.music.length - 1) {
-                        _self.setMusic(++_self.playIndex);
-                    }
-                    else if (_self.loop) {
-                        _self.setMusic(0);
-                    }
-                    else if (!_self.loop) {
-                        _self.pause();
-                    }
-                });
+                eleHTML += `
+                <div class="aplayer-list">
+                    <ol>`;
+                for (i = 0; i < this.option.music.length; i++) {
+                    eleHTML += `
+                        <li>
+                            <span class="aplayer-list-cur" style="background: ` + this.option.theme + `;"></span>
+                            <span class="aplayer-list-index">` + (i + 1) + `</span>
+                            <span class="aplayer-list-title">` + this.option.music[i].title + `</span>
+                            <span class="aplayer-list-author">` + this.option.music[i].author + `</span>
+                        </li>`
+                }
+                eleHTML += `
+                    </ol>
+                </div>`
             }
-            else {
-                this.audio.addEventListener('ended', function () {
-                    if (!_self.loop) {
-                        _self.pause();
-                    }
-                });
+            this.element.innerHTML = eleHTML;
+
+            // switch to narrow style
+            if (this.option.narrow) {
+                this.element.classList.add('aplayer-narrow');
             }
 
+            // play and pause button
+            this.button = this.element.getElementsByClassName('aplayer-button')[0];
+            this.button.addEventListener('click', (e) => {
+                if (this.button.classList.contains('aplayer-play')) {
+                   this.play();
+                }
+                else if (this.button.classList.contains('aplayer-pause')) {
+                    this.pause();
+                }
+            });
+
+            // click music list: change music
+            if (this.playIndex > -1) {
+                const listItem = this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li');
+                for (let i = 0; i < this.option.music.length; i++) {
+                    listItem[i].addEventListener('click', () => {
+                        const musicIndex = parseInt(listItem[i].getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1;
+                        if (musicIndex !== this.playIndex) {
+                            this.setMusic(musicIndex);
+                        }
+                        this.play();
+                    });
+                }
+            }
+
+            // control play progress
+            this.playedBar = this.element.getElementsByClassName('aplayer-played')[0];
+            this.loadedBar = this.element.getElementsByClassName('aplayer-loaded')[0];
+            this.thumb = this.element.getElementsByClassName('aplayer-thumb')[0];
+            this.bar = this.element.getElementsByClassName('aplayer-bar')[0];
+            let barWidth;
+            this.bar.addEventListener('click', (event) => {
+                const e = event || window.event;
+                barWidth = this.bar.clientWidth;
+                const percentage = (e.clientX - getElementViewLeft(this.bar)) / barWidth;
+                this.updateBar('played', percentage, 'width');
+                this.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = this.secondToTime(percentage * this.audio.duration);
+                this.audio.currentTime = parseFloat(this.playedBar.style.width) / 100 * this.audio.duration;
+            });
+
+            this.thumb.addEventListener('mouseover', () => {
+                this.thumb.style.background = this.option.theme;
+            });
+            this.thumb.addEventListener('mouseout', () => {
+                this.thumb.style.background = '#fff';
+            });
+
+            const thumbMove = (event) => {
+                const e = event || window.event;
+                let percentage = (e.clientX - getElementViewLeft(this.bar)) / barWidth;
+                percentage = percentage > 0 ? percentage : 0;
+                percentage = percentage < 1 ? percentage : 1;
+                this.updateBar('played', percentage, 'width');
+                if (this.option.showlrc) {
+                    this.updateLrc(parseFloat(this.playedBar.style.width) / 100 * this.audio.duration);
+                }
+                this.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = this.secondToTime(percentage * this.audio.duration);
+            };
+
+            const thumbUp = () => {
+                document.removeEventListener('mouseup', thumbUp);
+                document.removeEventListener('mousemove', thumbMove);
+                this.audio.currentTime = parseFloat(this.playedBar.style.width) / 100 * this.audio.duration;
+                this.play();
+            };
+
+            this.thumb.addEventListener('mousedown', () => {
+                barWidth = this.bar.clientWidth;
+                clearInterval(this.playedTime);
+                document.addEventListener('mousemove', thumbMove);
+                document.addEventListener('mouseup', thumbUp);
+            });
+
             // control volume
-            this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;
-
-            // loop
-            this.audio.loop = this.playIndex > -1 ? false : this.loop;
-
-            if (this.playIndex > -1) {
-                this.audios[indexMusic] = this.audio;
-            }
-        }
-        else {
-            this.audio = this.audios[indexMusic];
-            this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;
-            this.audio.currentTime = 0;
-        }
-
-        // fill in lrc
-        if (this.option.showlrc) {
-            this.lrc = this.playIndex > -1 ? this.lrcs[indexMusic] : this.lrcs[0];
-            this.element.classList.add('aplayer-withlrc');
-            var lrcHTML = '';
-            this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0];
-            for (var i = 0; i < this.lrc.length; i++) {
-                lrcHTML += '<p>' + this.lrc[i][1] + '</p>';
-            }
-            this.lrcContents.innerHTML = lrcHTML;
-            if (!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)';
-        }
-
-        // set duration time
-        if (this.audio.duration !== 1) {           // compatibility: Android browsers will output 1 at first
-            this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.audio.duration ? this.secondToTime(this.audio.duration) : '00:00';
-        }
-
-        // autoplay
-        if (this.option.autoplay && !this.isMobile) {
-            this.play();
-        }
-        this.option.autoplay = true;  // autoplay next music
-
-        if (this.isMobile) {
-            this.pause();
-        }
-    };
-
-    /**
-     * Play music
-     */
-    APlayer.prototype.play = function () {
-        var _self = this;
-        this.button.classList.remove('aplayer-play');
-        this.button.classList.add('aplayer-pause');
-        this.button.innerHTML = '';
-        setTimeout(function () {
-            _self.button.innerHTML = '<i class="demo-icon aplayer-icon-pause"></i>';
-        }, 100);
-        this.audio.play();
-        if (this.playedTime) {
-            clearInterval(this.playedTime);
-        }
-        this.playedTime = setInterval(function () {
-            _self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration, 'width');
-            if (_self.option.showlrc) {
-                _self.updateLrc.call(_self);
-            }
-            _self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime);
-        }, 100);
-    };
-
-    /**
-     * Pause music
-     */
-    APlayer.prototype.pause = function () {
-        var _self = this;
-        this.button.classList.remove('aplayer-pause');
-        this.button.classList.add('aplayer-play');
-        this.button.innerHTML = '';
-        setTimeout(function () {
-            _self.button.innerHTML = '<i class="demo-icon aplayer-icon-play"></i>';
-        }, 100);
-        this.audio.pause();
-        clearInterval(this.playedTime);
-    };
-
-    /**
-     * Update progress bar, including loading progress bar and play progress bar
-     *
-     * @param {String} type - Point out which bar it is, should be played loaded or volume
-     * @param {Number} percentage
-     * @param {String} direction - Point out the direction of this bar, Should be height or width
-     */
-    APlayer.prototype.updateBar = function (type, percentage, direction) {
-        percentage = percentage > 0 ? percentage : 0;
-        percentage = percentage < 1 ? percentage : 1;
-        this[type + 'Bar'].style[direction] = percentage * 100 + '%';
-    };
-
-    /**
-     * Update lrc
-     *
-     * @param {Number} currentTime
-     */
-    APlayer.prototype.updateLrc = function (currentTime) {
-        if (typeof(arguments[0]) === 'undefined') {
-            currentTime = this.audio.currentTime;
-        }
-        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])) {
-            for (var i = 0; i < this.lrc.length; i++) {
-                if (currentTime >= this.lrc[i][0] && (!this.lrc[i + 1] || currentTime < this.lrc[i + 1][0])) {
-                    this.lrcIndex = i;
-                    this.lrcContents.style.transform = 'translateY(' + -this.lrcIndex * 20 + 'px)';
-                    this.lrcContents.style.webkitTransform = 'translateY(' + -this.lrcIndex * 20 + 'px)';
-                    this.lrcContents.getElementsByClassName('aplayer-lrc-current')[0].classList.remove('aplayer-lrc-current');
-                    this.lrcContents.getElementsByTagName('p')[i].classList.add('aplayer-lrc-current');
+            this.volumeBar = this.element.getElementsByClassName('aplayer-volume')[0];
+            const volumeBarWrap = this.element.getElementsByClassName('aplayer-volume-bar')[0];
+            const volumeicon = this.element.getElementsByClassName('aplayer-time')[0].getElementsByTagName('i')[0];
+            const barHeight = 35;
+            this.element.getElementsByClassName('aplayer-volume-bar-wrap')[0].addEventListener('click', (event) => {
+                const e = event || window.event;
+                let percentage = (barHeight - e.clientY + getElementViewTop(volumeBarWrap)) / barHeight;
+                percentage = percentage > 0 ? percentage : 0;
+                percentage = percentage < 1 ? percentage : 1;
+                this.updateBar('volume', percentage, 'height');
+                this.audio.volume = percentage;
+                if (this.audio.muted) {
+                    this.audio.muted = false;
                 }
-            }
-        }
-    };
-
-    /**
-     * Parse second to 00:00 format
-     *
-     * @param {Number} second
-     * @return {String} 00:00 format
-     */
-    APlayer.prototype.secondToTime = function (second) {
-        var add0 = function (num) {
-            return num < 10 ? '0' + num : '' + num;
-        };
-        var min = parseInt(second / 60);
-        var sec = parseInt(second - min * 60);
-        return add0(min) + ':' + add0(sec);
-    };
-
-    /**
-     * Parse lrc, suppose multiple time tag
-     *
-     * @param {Array} arr - Format:
-     * [mm:ss.xx]lyric
-     * [mm:ss.xxx]lyric
-     * [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric
-     *
-     * @return {Array} [[[time, text], [time, text], [time, text], ...], [[time, text], [time, text], [time, text], ...], ...]
-     */
-    APlayer.prototype.parseLrc = function (arr) {
-        var lrcs = [];
-        for (var k = 0; k < arr.length; k++) {
-            var lyric = arr[k].split('\n');
-            var lrc = [];
-            var lyricLen = lyric.length;
-            for (var i = 0; i < lyricLen; i++) {
-                // match lrc time
-                var lrcTimes = lyric[i].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g);
-                // match lrc text
-                var lrcText = lyric[i].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g, '').replace(/^\s+|\s+$/g, '');
-
-                if (lrcTimes != null) {
-                    // handle multiple time tag
-                    var timeLen = lrcTimes.length;
-                    for (var j = 0; j < timeLen; j++) {
-                        var oneTime = /\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(lrcTimes[j]);
-                        var lrcTime = (oneTime[1]) * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / ((oneTime[3] + '').length === 2 ? 100 : 1000);
-                        lrc.push([lrcTime, lrcText]);
-                    }
+                if (percentage === 1) {
+                    volumeicon.className = 'demo-icon aplayer-icon-volume-up';
+                }
+                else {
+                    volumeicon.className = 'demo-icon aplayer-icon-volume-down';
                 }
-            }
-            // sort by time
-            lrc.sort(function (a, b) {
-                return a[0] - b[0];
             });
-            lrcs.push(lrc);
-        }
-        return lrcs;
-    };
+            volumeicon.addEventListener('click', () => {
+                if (this.audio.muted) {
+                    this.audio.muted = false;
+                    volumeicon.className = this.audio.volume === 1 ? 'demo-icon aplayer-icon-volume-up' : 'demo-icon aplayer-icon-volume-down';
+                    this.updateBar('volume', this.audio.volume, 'height');
+                }
+                else {
+                    this.audio.muted = true;
+                    volumeicon.className = 'demo-icon aplayer-icon-volume-off';
+                    this.updateBar('volume', 0, 'height');
+                }
+            });
+
+            // get element's view position
+            function getElementViewLeft(element) {
+                let actualLeft = element.offsetLeft;
+                let current = element.offsetParent;
+                let elementScrollLeft;
+                while (current !== null) {
+                    actualLeft += current.offsetLeft;
+                    current = current.offsetParent;
+                }
+                elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;
+                return actualLeft - elementScrollLeft;
+            }
+
+            function getElementViewTop(element) {
+                let actualTop = element.offsetTop;
+                let current = element.offsetParent;
+                let elementScrollTop;
+                while (current !== null) {
+                    actualTop += current.offsetTop;
+                    current = current.offsetParent;
+                }
+                elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop;
+                return actualTop - elementScrollTop;
+            }
+
+            // loop control
+            const loopEle = this.element.getElementsByClassName('aplayer-icon-loop')[0];
+            loopEle.addEventListener('click', () => {
+                if (this.loop) {
+                    loopEle.classList.add('aplayer-noloop');
+                    this.loop = false;
+                    this.audio.loop = this.playIndex > -1 ? false : this.loop;
+                }
+                else {
+                    loopEle.classList.remove('aplayer-noloop');
+                    this.loop = true;
+                    this.audio.loop = this.playIndex > -1 ? false : this.loop;
+                }
+            });
+
+            // toggle menu control
+            if (this.playIndex > -1) {
+                this.element.getElementsByClassName('aplayer-icon-menu')[0].addEventListener('click', () => {
+                    const list = this.element.getElementsByClassName('aplayer-list')[0];
+                    if (!list.classList.contains('aplayer-list-hide')) {
+                        list.classList.add('aplayer-list-hide');
+                    }
+                    else {
+                        list.classList.remove('aplayer-list-hide');
+                    }
+                });
+            }
+
+            this.setMusic(0);
+        };
+
+        /**
+         * Set music
+         */
+        setMusic (index) {
+            // get this.music
+            if (this.playIndex > -1 && typeof(index) !== 'undefined') {
+                this.playIndex = index;
+            }
+            const indexMusic = this.playIndex;
+            this.music = this.playIndex > -1 ? this.option.music[indexMusic] : this.option.music;
+
+            // set html
+            if (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;
+            if (this.playIndex > -1) {
+                if (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')[indexMusic].classList.add('aplayer-list-light');
+            }
+
+            // set the previous audio object
+            if (this.audio) {
+                this.pause();
+                this.audio.currentTime = 0;
+            }
+
+            // get this audio object
+            if ((this.playIndex > -1 && !this.audios[indexMusic]) || this.playIndex === -1) {
+                this.audio = document.createElement("audio");
+                this.audio.src = this.music.url;
+                this.audio.preload = this.isMobile ? 'none' : 'metadata';
+
+                // show audio time
+                this.audio.addEventListener('durationchange', () => {
+                    if (this.audio.duration !== 1) {           // compatibility: Android browsers will output 1 at first
+                        this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.secondToTime(this.audio.duration);
+                    }
+                });
+
+                // show audio loaded bar
+                this.audio.addEventListener('progress', () => {
+                    const percentage = this.audio.buffered.length ? this.audio.buffered.end(this.audio.buffered.length - 1) / this.audio.duration : 0;
+                    this.updateBar('loaded', percentage, 'width');
+                });
+
+                // audio download error
+                this.audio.addEventListener('error', () => {
+                    this.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + 'Error happens ╥﹏╥';
+                });
+
+                // multiple music play
+                if (this.playIndex > -1) {
+                    this.audio.addEventListener('ended', () => {
+                        if (this.playIndex < this.option.music.length - 1) {
+                            this.setMusic(++this.playIndex);
+                        }
+                        else if (this.loop) {
+                            this.setMusic(0);
+                        }
+                        else if (!this.loop) {
+                            this.pause();
+                        }
+                    });
+                }
+                else {
+                    this.audio.addEventListener('ended', () => {
+                        if (!this.loop) {
+                            this.pause();
+                        }
+                    });
+                }
+
+                // control volume
+                this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;
+
+                // loop
+                this.audio.loop = this.playIndex > -1 ? false : this.loop;
+
+                if (this.playIndex > -1) {
+                    this.audios[indexMusic] = this.audio;
+                }
+            }
+            else {
+                this.audio = this.audios[indexMusic];
+                this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;
+                this.audio.currentTime = 0;
+            }
+
+            // fill in lrc
+            if (this.option.showlrc) {
+                this.lrc = this.playIndex > -1 ? this.lrcs[indexMusic] : this.lrcs[0];
+                this.element.classList.add('aplayer-withlrc');
+                let lrcHTML = '';
+                this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0];
+                for (let i = 0; i < this.lrc.length; i++) {
+                    lrcHTML += '<p>' + this.lrc[i][1] + '</p>';
+                }
+                this.lrcContents.innerHTML = lrcHTML;
+                if (!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)';
+            }
+
+            // set duration time
+            if (this.audio.duration !== 1) {           // compatibility: Android browsers will output 1 at first
+                this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.audio.duration ? this.secondToTime(this.audio.duration) : '00:00';
+            }
+
+            // autoplay
+            if (this.option.autoplay && !this.isMobile) {
+                this.play();
+            }
+            this.option.autoplay = true;  // autoplay next music
+
+            if (this.isMobile) {
+                this.pause();
+            }
+        };
+
+        /**
+         * Play music
+         */
+        play () {
+            this.button.classList.remove('aplayer-play');
+            this.button.classList.add('aplayer-pause');
+            this.button.innerHTML = '';
+            setTimeout(() => {
+                this.button.innerHTML = '<i class="demo-icon aplayer-icon-pause"></i>';
+            }, 100);
+            this.audio.play();
+            if (this.playedTime) {
+                clearInterval(this.playedTime);
+            }
+            this.playedTime = setInterval(() => {
+                this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');
+                if (this.option.showlrc) {
+                    this.updateLrc();
+                }
+                this.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = this.secondToTime(this.audio.currentTime);
+            }, 100);
+        };
+
+        /**
+         * Pause music
+         */
+        pause () {
+            this.button.classList.remove('aplayer-pause');
+            this.button.classList.add('aplayer-play');
+            this.button.innerHTML = '';
+            setTimeout(() => {
+                this.button.innerHTML = '<i class="demo-icon aplayer-icon-play"></i>';
+            }, 100);
+            this.audio.pause();
+            clearInterval(this.playedTime);
+        };
+    }
 
     if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
         module.exports = APlayer