+

2018-10-17 11:14:36 +03:00
parent 75a35947e5
commit 04d60d7e2c
2716 changed files with 431449 additions and 0 deletions
@@ -0,0 +1,8 @@
+/*
+ HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
+*/
+(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
+a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
+c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
+"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
+if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
@@ -0,0 +1,545 @@
+/**
+ * APlayer constructor function
+ *
+ * @param {Object} option - See README
+ * @constructor
+ */
+(function () {
+    function APlayer(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];
+            }
+        }
+
+        // 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);
+            }
+            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;
+
+        // switch to narrow style
+        if (this.option.narrow) {
+            this.element.classList.add('aplayer-narrow');
+        }
+
+        var _self = this;
+
+        // 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);
+            }
+        });
+
+        // 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);
+                    }
+                    _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');
+                }
+                else {
+                    list.classList.remove('aplayer-list-hide');
+                }
+            });
+        }
+
+        this.setMusic(0);
+    };
+
+    /**
+     * 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');
+            }
+            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
+            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();
+                    }
+                });
+            }
+            else {
+                this.audio.addEventListener('ended', function () {
+                    if (!_self.loop) {
+                        _self.pause();
+                    }
+                });
+            }
+
+            // control volume
+            this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;
+
+            // 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');
+                }
+            }
+        }
+    };
+
+    /**
+     * 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]);
+                    }
+                }
+            }
+            // sort by time
+            lrc.sort(function (a, b) {
+                return a[0] - b[0];
+            });
+            lrcs.push(lrc);
+        }
+        return lrcs;
+    };
+
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = APlayer
+    }
+    else {
+        window.APlayer = APlayer;
+    }
+})();
@@ -0,0 +1,424 @@
+$aplayer-height: 66px;
+$lrc-height: 40px;
+$aplayer-height-lrc: $aplayer-height + $lrc-height;
+
+@font-face {
+    font-family: 'aplayer-fontello';
+    src: url('font/aplayer-fontello.eot?72550380');
+    src: url('font/aplayer-fontello.eot?72550380#iefix') format('embedded-opentype'),
+    url('font/aplayer-fontello.woff?72550380') format('woff'),
+    url('font/aplayer-fontello.ttf?72550380') format('truetype'),
+    url('font/aplayer-fontello.svg?72550380#fontello') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.aplayer-narrow {
+    width: $aplayer-height;
+    .aplayer-info {
+        display: none;
+    }
+}
+
+.aplayer-withlrc {
+    &.aplayer-narrow {
+        width: $aplayer-height-lrc;
+    }
+    &.aplayer .aplayer-pic {
+        height: $aplayer-height-lrc;
+        width: $aplayer-height-lrc;
+    }
+    &.aplayer .aplayer-info {
+        margin-left: $aplayer-height-lrc;
+        height: $aplayer-height-lrc;
+    }
+    &.aplayer .aplayer-lrc {
+        display: block;
+    }
+}
+
+.aplayer {
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 5px;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+    border-radius: 2px;
+    overflow: hidden;
+    user-select: none;
+    line-height: initial;
+
+    [class^="aplayer-icon-"]:before, [class*=" aplayer-icon-"]:before {
+        font-family: "aplayer-fontello";
+        font-style: normal;
+        font-weight: normal;
+        display: inline-block;
+        text-decoration: inherit;
+        width: 1em;
+        text-align: center;
+        font-variant: normal;
+        text-transform: none;
+        line-height: 1em;
+    }
+
+    .aplayer-icon-play:before {
+        content: '\e806';
+    }
+
+    .aplayer-icon-pause:before {
+        content: '\e807';
+    }
+
+    .aplayer-icon-to-start:before {
+        content: '\e808';
+    }
+
+    .aplayer-icon-to-end:before {
+        content: '\e809';
+    }
+
+    .aplayer-icon-loop:before {
+        content: '\e803';
+    }
+
+    .aplayer-icon-menu:before {
+        content: '\e80b';
+    }
+
+    .aplayer-icon-volume-off:before {
+        content: '\e800';
+    }
+
+    .aplayer-icon-volume-down:before {
+        content: '\e801';
+    }
+
+    .aplayer-icon-volume-up:before {
+        content: '\e802';
+    }
+
+    .aplayer-lrc-content {
+        display: none;
+    }
+
+    .aplayer-pic {
+        position: relative;
+        float: left;
+        height: $aplayer-height;
+        width: $aplayer-height;
+        background-image: url(./default.jpg);
+        background-size: 100%;
+        transition: all 0.3s ease;
+
+        .aplayer-button {
+            position: absolute;
+            color: #fff;
+            border-radius: 50%;
+            opacity: 0.8;
+            cursor: pointer;
+            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+            background: rgba(0, 0, 0, 0.2);
+            transition: all 0.1s ease;
+            &:hover {
+                opacity: 1;
+            }
+        }
+
+        .aplayer-hide {
+            display: none;
+        }
+
+        .aplayer-play {
+            width: 26px;
+            height: 26px;
+            border: 2px solid #fff;
+            bottom: 50%;
+            right: 50%;
+            margin: 0 -15px -15px 0;
+            .aplayer-icon-play {
+                position: absolute;
+                top: 2px;
+                left: 4px;
+                font-size: 20px;
+                line-height: 23px;
+            }
+        }
+
+        .aplayer-pause {
+            width: 16px;
+            height: 16px;
+            border: 2px solid #fff;
+            bottom: 4px;
+            right: 4px;
+            .aplayer-icon-pause {
+                position: absolute;
+                top: 1px;
+                left: 2px;
+                font-size: 12px;
+                line-height: 14px;
+            }
+        }
+    }
+
+    .aplayer-info {
+        margin-left: $aplayer-height;
+        padding: 14px 7px 0 10px;
+        height: $aplayer-height;
+        box-sizing: border-box;
+
+        .aplayer-music {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            margin-bottom: 17px;
+
+            .aplayer-title {
+                font-size: 14px;
+            }
+
+            .aplayer-author {
+                font-size: 12px;
+                color: #666;
+            }
+        }
+
+        .aplayer-controller {
+            position: relative;
+
+            .aplayer-bar-wrap {
+                margin: 0 140px 0 5px;
+
+                .aplayer-bar {
+                    position: relative;
+                    height: 2px;
+                    width: 100%;
+                    background: #cdcdcd;
+                    cursor: pointer !important;
+
+                    .aplayer-loaded {
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        bottom: 0;
+                        background: #aaa;
+                        height: 2px;
+                        transition: all 0.5s ease;
+                    }
+
+                    .aplayer-played {
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        bottom: 0;
+                        height: 2px;
+
+                        .aplayer-thumb {
+                            position: absolute;
+                            top: 0;
+                            right: 5px;
+                            margin-top: -4px;
+                            margin-right: -10px;
+                            height: 8px;
+                            width: 8px;
+                            border-radius: 50%;
+                            background: #fff;
+                            cursor: pointer !important;
+                        }
+                    }
+                }
+            }
+
+            .aplayer-time {
+                position: absolute;
+                right: 0;
+                bottom: -5px;
+                height: 17px;
+                color: #999;
+                font-size: 11px;
+
+                i {
+                    color: #666;
+                    font-size: 15px;
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+
+                    &.aplayer-icon-loop {
+                        margin: 2px;
+                    }
+                    &.aplayer-noloop {
+                        color: #ddd;
+                        &:hover {
+                            color: #bbb;
+                        }
+                    }
+
+                    &:hover {
+                        color: #000;
+                    }
+                }
+            }
+
+            .aplayer-volume-wrap {
+                position: relative;
+                display: inline-block;
+                margin-left: 7px;
+                cursor: pointer !important;
+
+                &:hover .aplayer-volume-bar-wrap {
+                    display: block;
+                }
+
+                .aplayer-volume-bar-wrap {
+                    display: none;
+                    position: absolute;
+                    bottom: 17px;
+                    right: -5px;
+                    width: 25px;
+                    height: 40px;
+                    z-index: 99;
+
+                    .aplayer-volume-bar {
+                        position: absolute;
+                        bottom: 0;
+                        right: 10px;
+                        width: 5px;
+                        height: 35px;
+                        background: #aaa;
+
+                        .aplayer-volume {
+                            position: absolute;
+                            bottom: 0;
+                            right: 0;
+                            width: 5px;
+                            transition: all 0.1s ease;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .aplayer-lrc {
+        display: none;
+        position: relative;
+        height: $lrc-height;
+        background: #fff;
+        text-align: center;
+        overflow: hidden;
+        margin: -10px 0 10px;
+
+        &:before {
+            position: absolute;
+            top: 0;
+            z-index: 1;
+            display: block;
+            overflow: hidden;
+            width: 100%;
+            height: 10%;
+            content: ' ';
+            background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
+            background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
+            background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
+            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
+        }
+
+        &:after {
+            position: absolute;
+            bottom: 0;
+            z-index: 1;
+            display: block;
+            overflow: hidden;
+            width: 100%;
+            height: 33%;
+            content: ' ';
+            background: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
+            background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
+            background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
+            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
+        }
+
+        p {
+            font-size: 12px;
+            color: #666;
+            line-height: 20px !important;
+            height: 20px !important;
+            padding: 0 !important;
+            margin: 0 !important;
+            transition: all 0.5s ease-out;
+            opacity: 0.4;
+            overflow: hidden;
+
+            &.aplayer-lrc-current {
+                opacity: 1;
+            }
+        }
+
+        .aplayer-lrc-contents {
+            width: 100%;
+            transition: all 0.5s ease-out;
+        }
+    }
+
+    .aplayer-list {
+        max-height: 300px;
+        overflow: auto;
+        transition: all 0.5s ease;
+
+        &.aplayer-list-hide {
+            max-height: 0;
+        }
+
+        ol {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+
+            li {
+                position: relative;
+                height: 32px;
+                line-height: 32px;
+                padding: 0 15px;
+                font-size: 12px;
+                border-top: 1px solid #e9e9e9;
+                cursor: pointer;
+                transition: all 0.2s ease;
+
+                &:hover {
+                    background: #efefef;
+                }
+
+                &.aplayer-list-light {
+                    background: #e9e9e9;
+
+                    .aplayer-list-cur {
+                        display: inline-block;
+                    }
+                }
+
+                .aplayer-list-cur {
+                    display: none;
+                    width: 3px;
+                    height: 22px;
+                    position: absolute;
+                    left: 0;
+                    top: 5px;
+                    cursor: pointer;
+                }
+                .aplayer-list-index {
+                    color: #666;
+                    margin-right: 12px;
+                    cursor: pointer;
+                }
+                .aplayer-list-author {
+                    color: #666;
+                    float: right;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+}
+
+@keyframes aplayer-roll {
+    0%{left:0}
+    100%{left: -100%}
+}
@@ -0,0 +1,20 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2016 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="volume-off" unicode="&#xe800;" d="m429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z" horiz-adv-x="428.6" />
+<glyph glyph-name="volume-down" unicode="&#xe801;" d="m429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z m214-304q0-42-24-79t-63-52q-5-3-14-3-14 0-25 10t-10 26q0 12 6 20t17 14 19 12 16 20 6 32-6 32-16 20-19 12-17 14-6 20q0 15 10 26t25 10q9 0 14-3 39-15 63-52t24-79z" horiz-adv-x="642.9" />
+<glyph glyph-name="volume-up" unicode="&#xe802;" d="m429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z m214-304q0-42-24-79t-63-52q-5-3-14-3-14 0-25 10t-10 26q0 12 6 20t17 14 19 12 16 20 6 32-6 32-16 20-19 12-17 14-6 20q0 15 10 26t25 10q9 0 14-3 39-15 63-52t24-79z m143 0q0-85-48-158t-125-105q-8-3-14-3-15 0-26 11t-10 25q0 22 21 33 32 16 43 25 41 30 64 75t23 97-23 97-64 75q-11 9-43 25-21 11-21 33 0 14 10 25t25 11q7 0 15-3 78-33 125-105t48-158z m143 0q0-128-71-236t-189-158q-7-3-14-3-15 0-26 11t-10 25q0 20 22 33 4 2 12 6t13 6q25 14 45 28 69 51 108 127t38 161-38 161-108 127q-20 14-45 28-4 3-13 6t-12 6q-22 13-22 33 0 14 10 25t26 11q7 0 14-3 118-51 189-158t71-236z" horiz-adv-x="928.6" />
+<glyph glyph-name="loop" unicode="&#xe803;" d="m800 540q42 0 71-29t29-71l0-290q0-40-29-70t-71-30l-700 0q-40 0-70 30t-30 70l0 290q0 42 30 71t70 29l250 0 0 110 200-180-200-180 0 110-210 0 0-210 620 0 0 210-150 0 0 140 190 0z" horiz-adv-x="900" />
+<glyph glyph-name="play" unicode="&#xe806;" d="m486 376q14-10 14-26 0-14-14-24l-428-266q-24-16-41-6t-17 40l0 514q0 30 17 40t41-6z" horiz-adv-x="500" />
+<glyph glyph-name="pause" unicode="&#xe807;" d="m440 700q90 0 90-64l0-570q0-66-90-66t-90 66l0 570q0 64 90 64z m-350 0q90 0 90-64l0-570q0-66-90-66t-90 66l0 570q0 64 90 64z" horiz-adv-x="530" />
+<glyph glyph-name="to-start" unicode="&#xe808;" d="m174 350q0 14 14 24l364 228q20 14 34 5t14-35l0-442q0-26-14-35t-34 5l-364 228q-14 10-14 22z m-174 234q0 58 76 58 74 0 74-58l0-466q0-58-74-58-76 0-76 58l0 466z" horiz-adv-x="600" />
+<glyph glyph-name="to-end" unicode="&#xe809;" d="m412 374q14-10 14-24 0-12-14-22l-362-228q-22-14-36-5t-14 35l0 442q0 26 14 35t36-5z m114 268q74 0 74-58l0-466q0-58-74-58-76 0-76 58l0 466q0 58 76 58z" horiz-adv-x="600" />
+<glyph glyph-name="menu" unicode="&#xe80b;" d="m650 400q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z m-600 100q-20 0-35 15t-15 35 14 35 36 15l600 0q22 0 36-15t14-35-15-35-35-15l-600 0z m600-300q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z" horiz-adv-x="700" />
+</font>
+</defs>
+</svg>