release

dist/meplayer.js

@@ -73,222 +73,226 @@
 	var root = (typeof window === 'undefined' ? 'undefined' : _typeof(window)) == 'object' && window.window === window ? window : (typeof global === 'undefined' ? 'undefined' : _typeof(global)) == 'object' && global.global === global ? global : undefined;
 
 	root.mePlayer = function (options) {
-	    // 检查必填选项
-	    if (!(options.music && options.music.src)) {
-	        console.error('必须指定音乐地址哦~');
-	        return;
-	    }
-
-	    var musicConf = options.music,
-	        target = selector.$(options.target) || document.querySelector('.meplayer'),
-	        theme = options.theme || _constants.THEME_DEFAULT,
-	        hasLrc = musicConf.lrc ? true : false,
-	        coverSrc = musicConf.cover || 'https://unsplash.it/78/?random',
-	        loop = musicConf.loop || false,
-	        currentThemeClass = theme === _constants.THEME_DEFAULT ? 'meplayer-container' : 'meplayer-container-mini',
-	        containerClass = currentThemeClass + ' ' + (hasLrc ? 'meplayer-haslrc' : '') + ' meplayer-isloading',
-	        playerHTMLContent = '<div class="' + containerClass + '">\n                             <audio src=' + musicConf.src + ' preload="auto"></audio>\n                             <div class="meplayer-info">\n                             <div class="meplayer-info-cover"><img src=' + coverSrc + ' alt="cd-cover"></div>\n                             <div class="meplayer-meta">\n                             <div class="meplayer-meta-title">' + musicConf.title + '</div>\n                             <div class="meplayer-meta-author">' + musicConf.author + '</div>\n                             <div class="meplayer-meta-time-tick"><span class="meplayer-meta-time-tick-text"></span></div>\n                             </div>\n                             </div>\n                             <canvas class="meplayer-spectrum"></canvas>\n                             <div class="meplayer-lyric"><div class="meplayer-lyric-area"></div></div>\n                             <div class="meplayer-control"><div class="meplayer-control-play"><i class="icon-play"></i><i class="icon-pause"></i></div></div>\n                             <div class="meplayer-volume-bg"><div class="meplayer-volume"><i class="icon-volume"></i><div class="meplayer-volume-progress"></div></div></div>\n                             <div class="meplayer-duration"><i class="icon-clock"></i><span class="meplayer-duration-text">loading</span></div>\n                             <div class="meplayer-loadingsign"><i class="icon-spin animate-spin"></i>loading</div>\n                             <div class="meplayer-timeline-bg"><div class="meplayer-timeline"><div class="meplayer-timeline-passed"></div></div></div>\n                             </div>';
-
-	    target.innerHTML = playerHTMLContent;
-
-	    var meplayerContainer = target.querySelector('.' + currentThemeClass),
-	        _selector$init$select = selector.init(meplayerContainer).select(['audio', '.meplayer-control-play', '.meplayer-meta-time-tick-text', '.meplayer-duration', '.meplayer-timeline', '.meplayer-timeline-passed', '.meplayer-volume', '.meplayer-volume-progress', '.meplayer-lyric-area', '.meplayer-spectrum']),
-	        _selector$init$select2 = _slicedToArray(_selector$init$select, 10),
-	        audio = _selector$init$select2[0],
-	        playBtn = _selector$init$select2[1],
-	        timeTick = _selector$init$select2[2],
-	        timeCount = _selector$init$select2[3],
-	        timeLine = _selector$init$select2[4],
-	        timePassed = _selector$init$select2[5],
-	        volumeArea = _selector$init$select2[6],
-	        volumeProgress = _selector$init$select2[7],
-	        lyricArea = _selector$init$select2[8],
-	        canvas = _selector$init$select2[9],
-	        duration;
-
-
-	    if (hasLrc) {
-	        lyric.parse(musicConf.lrc).renderTo(lyricArea);
-	    } else {
-	        // 频谱动画初始化
-	        spectrum.init(canvas);
-	    }
-
-	    eventInit();
-
-	    // 重定义meplayer
-	    root.mePlayer = {
-	        play: play,
-	        pause: pause,
-	        toggleTheme: toggleTheme
-	    };
+	  // 检查必填选项
+	  if (!(options.music && options.music.src)) {
+	    console.error('必须指定音乐地址哦~');
+	    return;
+	  }
+
+	  var musicConf = options.music,
+	      target = selector.$(options.target) || document.querySelector('.meplayer'),
+	      theme = options.theme || _constants.THEME_DEFAULT,
+	      hasLrc = musicConf.lrc ? true : false,
+	      coverSrc = musicConf.cover || 'https://unsplash.it/78/?random',
+	      loop = musicConf.loop || false,
+	      autoplay = options.autoplay,
+	      currentThemeClass = theme === _constants.THEME_DEFAULT ? 'meplayer-container' : 'meplayer-container-mini',
+	      containerClass = currentThemeClass + ' ' + (hasLrc ? 'meplayer-haslrc' : '') + ' meplayer-isloading',
+	      playerHTMLContent = '<div class="' + containerClass + '">\n                             <audio src=' + musicConf.src + ' preload="auto"></audio>\n                             <div class="meplayer-info">\n                             <div class="meplayer-info-cover"><img src=' + coverSrc + ' alt="cd-cover"></div>\n                             <div class="meplayer-meta">\n                             <div class="meplayer-meta-title">' + musicConf.title + '</div>\n                             <div class="meplayer-meta-author">' + musicConf.author + '</div>\n                             <div class="meplayer-meta-time-tick"><span class="meplayer-meta-time-tick-text"></span></div>\n                             </div>\n                             </div>\n                             <canvas class="meplayer-spectrum"></canvas>\n                             <div class="meplayer-lyric"><div class="meplayer-lyric-area"></div></div>\n                             <div class="meplayer-control"><div class="meplayer-control-play"><i class="icon-play"></i><i class="icon-pause"></i></div></div>\n                             <div class="meplayer-volume-bg"><div class="meplayer-volume"><i class="icon-volume"></i><div class="meplayer-volume-progress"></div></div></div>\n                             <div class="meplayer-duration"><i class="icon-clock"></i><span class="meplayer-duration-text">loading</span></div>\n                             <div class="meplayer-loadingsign"><i class="icon-spin animate-spin"></i>loading</div>\n                             <div class="meplayer-timeline-bg"><div class="meplayer-timeline"><div class="meplayer-timeline-passed"></div></div></div>\n                             </div>';
+
+	  target.innerHTML = playerHTMLContent;
+
+	  var meplayerContainer = target.querySelector('.' + currentThemeClass),
+	      _selector$init$select = selector.init(meplayerContainer).select(['audio', '.meplayer-control-play', '.meplayer-meta-time-tick-text', '.meplayer-duration', '.meplayer-timeline', '.meplayer-timeline-passed', '.meplayer-volume', '.meplayer-volume-progress', '.meplayer-lyric-area', '.meplayer-spectrum']),
+	      _selector$init$select2 = _slicedToArray(_selector$init$select, 10),
+	      audio = _selector$init$select2[0],
+	      playBtn = _selector$init$select2[1],
+	      timeTick = _selector$init$select2[2],
+	      timeCount = _selector$init$select2[3],
+	      timeLine = _selector$init$select2[4],
+	      timePassed = _selector$init$select2[5],
+	      volumeArea = _selector$init$select2[6],
+	      volumeProgress = _selector$init$select2[7],
+	      lyricArea = _selector$init$select2[8],
+	      canvas = _selector$init$select2[9],
+	      duration;
+
+
+	  if (hasLrc) {
+	    lyric.parse(musicConf.lrc).renderTo(lyricArea);
+	  } else {
+	    // 频谱动画初始化
+	    spectrum.init(canvas);
+	  }
+
+	  eventInit();
+
+	  if (autoplay) {
+	    handlePlayClick();
+	  }
+
+	  // 重定义meplayer
+	  root.mePlayer = {
+	    play: play,
+	    pause: pause,
+	    toggleTheme: toggleTheme
 
 	    // 给播放器绑定各种事件
-	    function eventInit() {
-	        audio.addEventListener('ended', handleAudioEnd);
-	        audio.addEventListener('canplaythrough', handleCanPlayThrough);
-	        audio.addEventListener('durationchange', handleDurationChange);
-	        audio.addEventListener('timeupdate', handleTimeUpdate);
-	        playBtn.addEventListener('click', handlePlayClick);
-	        timeLine.addEventListener('click', handleTimeLineClick);
+	  };function eventInit() {
+	    audio.addEventListener('ended', handleAudioEnd);
+	    audio.addEventListener('canplaythrough', handleCanPlayThrough);
+	    audio.addEventListener('durationchange', handleDurationChange);
+	    audio.addEventListener('timeupdate', handleTimeUpdate);
+	    playBtn.addEventListener('click', handlePlayClick);
+	    timeLine.addEventListener('click', handleTimeLineClick);
+	  }
+
+	  function handleAudioEnd() {
+	    if (loop) {
+	      audio.play();
+	    } else {
+	      utils.removeClass(meplayerContainer, 'meplayer-isplaying');
 	    }
-
-	    function handleAudioEnd() {
-	        if (loop) {
-	            audio.play();
-	        } else {
-	            utils.removeClass(meplayerContainer, 'meplayer-isplaying');
+	  }
+
+	  function handleCanPlayThrough() {
+	    duration = this.duration;
+	    setTimeout(function () {
+	      utils.removeClass(meplayerContainer, 'meplayer-isloading');
+	      timeCount.querySelector('.meplayer-duration-text').innerText = utils.parseSec(duration.toFixed(0));
+	    }, 1000);
+	  }
+
+	  function handleDurationChange() {
+	    duration = this.duration;
+	  }
+
+	  function handleTimeUpdate() {
+	    var curTime = audio.currentTime;
+	    var curTimeForLrc = audio.currentTime.toFixed(3);
+	    var playPercent = 100 * (curTime / duration);
+
+	    timePassed.style.width = playPercent.toFixed(2) + '%';
+	    timeTick.innerText = utils.parseSec(curTime);
+
+	    if (hasLrc && theme === _constants.THEME_DEFAULT) {
+	      var tempLrcIndex = lyric.currentIndex(curTimeForLrc);
+	      var tempLrcLines = lyricArea.querySelectorAll('p');
+	      var tempLrcLinePre = tempLrcLines[tempLrcIndex - 1];
+	      var tempLrcLine = tempLrcLines[tempLrcIndex];
+	      var tempLrcLineNext = tempLrcLines[tempLrcIndex + 1];
+
+	      if (!tempLrcLine.className.includes('meplayer-lyric-current')) {
+	        utils.removeClass(lyricArea.querySelector('.meplayer-lyric-current'), 'meplayer-lyric-current');
+	        if (lyricArea.querySelector('.meplayer-lyric-pre')) {
+	          utils.removeClass(lyricArea.querySelector('.meplayer-lyric-pre'), 'meplayer-lyric-pre');
+	        }
+	        if (lyricArea.querySelector('.meplayer-lyric-next')) {
+	          utils.removeClass(lyricArea.querySelector('.meplayer-lyric-next'), 'meplayer-lyric-next');
+	        }
+	        utils.addClass(tempLrcLine, 'meplayer-lyric-current');
+	        if (tempLrcLinePre) {
+	          utils.addClass(tempLrcLinePre, 'meplayer-lyric-pre');
+	        }
+	        if (tempLrcLineNext) {
+	          utils.addClass(tempLrcLineNext, 'meplayer-lyric-next');
 	        }
-	    }
 
-	    function handleCanPlayThrough() {
-	        duration = this.duration;
-	        setTimeout(function () {
-	            utils.removeClass(meplayerContainer, 'meplayer-isloading');
-	            timeCount.querySelector('.meplayer-duration-text').innerText = utils.parseSec(duration.toFixed(0));
-	        }, 1000);
+	        lyricArea.style.webkitTransform = 'translateY(-' + 20 * tempLrcIndex + 'px)';
+	        lyricArea.style.transform = 'translateY(-' + 20 * tempLrcIndex + 'px)';
+	      }
 	    }
-
-	    function handleDurationChange() {
-	        duration = this.duration;
+	  }
+
+	  function handlePlayClick() {
+	    var _handleMouseWheel;
+
+	    if (audio.paused) {
+	      audio.play();
+	      if (theme === _constants.THEME_DEFAULT && !hasLrc) {
+	        spectrum.draw();
+	      }
+	      // 播放状态中可以用滑轮调节音量
+	      meplayerContainer.addEventListener('mousewheel', function handleMouseWheel() {
+	        var timer = null;
+	        var step = 0.05;
+	        _handleMouseWheel = function _handleMouseWheel(event) {
+	          if (timer) {
+	            clearTimeout(timer);
+	          }
+	          if (!meplayerContainer.className.includes('meplayer-adjusting-volume')) {
+	            utils.addClass(meplayerContainer, 'meplayer-adjusting-volume');
+	          }
+	          if (event.wheelDeltaY < 0 && audio.volume > step) {
+	            audio.volume -= step;
+	          }
+	          if (event.wheelDeltaY > 0 && audio.volume < 1 - step) {
+	            audio.volume += step;
+	          }
+	          if (theme === _constants.THEME_DEFAULT) {
+	            volumeProgress.style.width = audio.volume * 100 + '%';
+	          } else {
+	            volumeArea.querySelector('i').style.opacity = audio.volume;
+	          }
+	          event.preventDefault();
+
+	          timer = setTimeout(function () {
+	            utils.removeClass(meplayerContainer, 'meplayer-adjusting-volume');
+	          }, 1000);
+	        };
+	        return _handleMouseWheel;
+	      }());
+	    } else {
+	      audio.pause();
+	      spectrum.stop();
+	      meplayerContainer.removeEventListener('mousewheel', _handleMouseWheel);
 	    }
-
-	    function handleTimeUpdate() {
-	        var curTime = audio.currentTime;
-	        var curTimeForLrc = audio.currentTime.toFixed(3);
-	        var playPercent = 100 * (curTime / duration);
-
-	        timePassed.style.width = playPercent.toFixed(2) + '%';
-	        timeTick.innerText = utils.parseSec(curTime);
-
-	        if (hasLrc && theme === _constants.THEME_DEFAULT) {
-	            var tempLrcIndex = lyric.currentIndex(curTimeForLrc);
-	            var tempLrcLines = lyricArea.querySelectorAll('p');
-	            var tempLrcLinePre = tempLrcLines[tempLrcIndex - 1];
-	            var tempLrcLine = tempLrcLines[tempLrcIndex];
-	            var tempLrcLineNext = tempLrcLines[tempLrcIndex + 1];
-
-	            if (!tempLrcLine.className.includes('meplayer-lyric-current')) {
-	                utils.removeClass(lyricArea.querySelector('.meplayer-lyric-current'), 'meplayer-lyric-current');
-	                if (lyricArea.querySelector('.meplayer-lyric-pre')) {
-	                    utils.removeClass(lyricArea.querySelector('.meplayer-lyric-pre'), 'meplayer-lyric-pre');
-	                }
-	                if (lyricArea.querySelector('.meplayer-lyric-next')) {
-	                    utils.removeClass(lyricArea.querySelector('.meplayer-lyric-next'), 'meplayer-lyric-next');
-	                }
-	                utils.addClass(tempLrcLine, 'meplayer-lyric-current');
-	                if (tempLrcLinePre) {
-	                    utils.addClass(tempLrcLinePre, 'meplayer-lyric-pre');
-	                }
-	                if (tempLrcLineNext) {
-	                    utils.addClass(tempLrcLineNext, 'meplayer-lyric-next');
-	                }
-
-	                lyricArea.style.webkitTransform = 'translateY(-' + 20 * tempLrcIndex + 'px)';
-	                lyricArea.style.transform = 'translateY(-' + 20 * tempLrcIndex + 'px)';
-	            }
-	        }
+	    utils.toggleClass(meplayerContainer, 'meplayer-isplaying');
+	  }
+
+	  function handleTimeLineClick() {
+	    var clickPercent = (event.pageX - utils.getAbsLeft(this)) / this.offsetWidth;
+	    timePassed.style.width = clickPercent * 100 + '%';
+	    audio.currentTime = (clickPercent * duration).toFixed(0);
+	  }
+
+	  function play() {
+	    if (audio.paused) {
+	      utils.addClass(meplayerContainer, 'meplayer-isplaying');
+	      audio.play();
 	    }
+	  }
 
-	    function handlePlayClick() {
-	        var _handleMouseWheel;
-
-	        if (audio.paused) {
-	            audio.play();
-	            if (theme === _constants.THEME_DEFAULT && !hasLrc) {
-	                spectrum.draw();
-	            }
-	            // 播放状态中可以用滑轮调节音量
-	            meplayerContainer.addEventListener('mousewheel', function handleMouseWheel() {
-	                var timer = null;
-	                var step = 0.05;
-	                _handleMouseWheel = function _handleMouseWheel(event) {
-	                    if (timer) {
-	                        clearTimeout(timer);
-	                    }
-	                    if (!meplayerContainer.className.includes('meplayer-adjusting-volume')) {
-	                        utils.addClass(meplayerContainer, 'meplayer-adjusting-volume');
-	                    }
-	                    if (event.wheelDeltaY < 0 && audio.volume > step) {
-	                        audio.volume -= step;
-	                    }
-	                    if (event.wheelDeltaY > 0 && audio.volume < 1 - step) {
-	                        audio.volume += step;
-	                    }
-	                    if (theme === _constants.THEME_DEFAULT) {
-	                        volumeProgress.style.width = audio.volume * 100 + '%';
-	                    } else {
-	                        volumeArea.querySelector('i').style.opacity = audio.volume;
-	                    }
-	                    event.preventDefault();
-
-	                    timer = setTimeout(function () {
-	                        utils.removeClass(meplayerContainer, 'meplayer-adjusting-volume');
-	                    }, 1000);
-	                };
-	                return _handleMouseWheel;
-	            }());
-	        } else {
-	            audio.pause();
-	            spectrum.stop();
-	            meplayerContainer.removeEventListener('mousewheel', _handleMouseWheel);
-	        }
-	        utils.toggleClass(meplayerContainer, 'meplayer-isplaying');
+	  function pause() {
+	    if (!audio.paused) {
+	      utils.removeClass(meplayerContainer, 'meplayer-isplaying');
+	      audio.pause();
 	    }
+	  }
 
-	    function handleTimeLineClick() {
-	        var clickPercent = (event.pageX - utils.getAbsLeft(this)) / this.offsetWidth;
-	        timePassed.style.width = clickPercent * 100 + '%';
-	        audio.currentTime = (clickPercent * duration).toFixed(0);
-	    }
+	  function toggleTheme() {
+	    var step = 0.03;
+	    var count = 0;
+	    var maxCount = 200;
 
-	    function play() {
-	        if (audio.paused) {
-	            utils.addClass(meplayerContainer, 'meplayer-isplaying');
-	            audio.play();
-	        }
-	    }
+	    utils.addClass(meplayerContainer, 'meplayer-changing-theme');
 
-	    function pause() {
-	        if (!audio.paused) {
-	            utils.removeClass(meplayerContainer, 'meplayer-isplaying');
-	            audio.pause();
-	        }
-	    }
+	    theme = theme === _constants.THEME_DEFAULT ? _constants.THEME_MINI : _constants.THEME_DEFAULT;
 
-	    function toggleTheme() {
-	        var step = 0.03;
-	        var count = 0;
-	        var maxCount = 200;
-
-	        utils.addClass(meplayerContainer, 'meplayer-changing-theme');
-
-	        theme = theme === _constants.THEME_DEFAULT ? _constants.THEME_MINI : _constants.THEME_DEFAULT;
-
-	        loop();
-
-	        function loop() {
-	            count++;
-	            meplayerContainer.style.opacity -= step;
-	            if (meplayerContainer.style.opacity <= 0) {
-	                step *= -1;
-	                meplayerContainer.style.opacity = 0;
-	                utils.toggleClass(meplayerContainer, 'meplayer-container-mini');
-	                utils.toggleClass(meplayerContainer, 'meplayer-container');
-	            }
-	            if (meplayerContainer.style.opacity < 1 && count < maxCount) {
-	                requestAnimationFrame(loop);
-	            } else {
-	                setTimeout(function () {
-	                    utils.removeClass(meplayerContainer, 'meplayer-changing-theme');
-	                }, 500);
-	            }
-	        }
+	    loop();
+
+	    function loop() {
+	      count++;
+	      meplayerContainer.style.opacity -= step;
+	      if (meplayerContainer.style.opacity <= 0) {
+	        step *= -1;
+	        meplayerContainer.style.opacity = 0;
+	        utils.toggleClass(meplayerContainer, 'meplayer-container-mini');
+	        utils.toggleClass(meplayerContainer, 'meplayer-container');
+	      }
+	      if (meplayerContainer.style.opacity < 1 && count < maxCount) {
+	        requestAnimationFrame(loop);
+	      } else {
+	        setTimeout(function () {
+	          utils.removeClass(meplayerContainer, 'meplayer-changing-theme');
+	        }, 500);
+	      }
 	    }
+	  }
 	};
 
 	if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
-	    module.exports = root.mePlayer;
+	  module.exports = root.mePlayer;
 	}
 	/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
 
@@ -322,7 +326,7 @@
 	'use strict';
 
 	Object.defineProperty(exports, "__esModule", {
-	    value: true
+	  value: true
 	});
 	exports.currentIndex = exports.renderTo = exports.parse = undefined;
 
@@ -333,62 +337,62 @@
 	// 歌词解析脚本
 	// 修改自：https://github.com/DIYgod/APlayer
 	function parse(text) {
-	    var lyric = text.split('\n');
-	    var lrc = [];
-	    var len = lyric.length;
-	    var reg1 = /\[(\d{2}):(\d{2})\.(\d{2,3})]/g;
-	    var reg2 = /\[(\d{2}):(\d{2})\.(\d{2,3})]/;
-	    for (var i = 0; i < len; i++) {
-	        var time = lyric[i].match(reg1);
-	        var lrcText = lyric[i].replace(reg1, '').replace(/^\s+|\s+$/g, '');
-	        // 排除空行
-	        if (!lrcText) {
-	            continue;
-	        }
-	        if (time != null) {
-	            var timeLen = time.length;
-	            for (var j = 0; j < timeLen; j++) {
-	                var oneTime = reg2.exec(time[j]);
-	                var lrcTime = oneTime[1] * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / ((oneTime[3] + '').length === 2 ? 100 : 1000);
-	                lrc.push({
-	                    time: lrcTime,
-	                    text: lrcText
-	                });
-	            }
-	        }
+	  var lyric = text.split('\n');
+	  var lrc = [];
+	  var len = lyric.length;
+	  var reg1 = /\[(\d{2}):(\d{2})\.(\d{2,3})]/g;
+	  var reg2 = /\[(\d{2}):(\d{2})\.(\d{2,3})]/;
+	  for (var i = 0; i < len; i++) {
+	    var time = lyric[i].match(reg1);
+	    var lrcText = lyric[i].replace(reg1, '').replace(/^\s+|\s+$/g, '');
+	    // 排除空行
+	    if (!lrcText) {
+	      continue;
+	    }
+	    if (time != null) {
+	      var timeLen = time.length;
+	      for (var j = 0; j < timeLen; j++) {
+	        var oneTime = reg2.exec(time[j]);
+	        var lrcTime = oneTime[1] * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / ((oneTime[3] + '').length === 2 ? 100 : 1000);
+	        lrc.push({
+	          time: lrcTime,
+	          text: lrcText
+	        });
+	      }
 	    }
-	    lrc.sort(function (a, b) {
-	        return a.time - b.time;
-	    });
+	  }
+	  lrc.sort(function (a, b) {
+	    return a.time - b.time;
+	  });
 
-	    lyrics = lrc;
-	    return this;
+	  lyrics = lrc;
+	  return this;
 	}
 
 	// 歌词文本解析成DOM结构
 	function renderTo(target) {
-	    if (!lyrics) {
-	        console.error('未指定歌词文本！');
-	        return;
-	    }
-	    var lyricHTML = '';
-	    for (var i = 0; i < lyrics.length; i++) {
-	        lyricHTML += '<p>' + lyrics[i].text + '</p>';
-	    }
-	    target.innerHTML = lyricHTML;
-	    target.querySelector('p').className = _constants.LYRIC_CURRENT_CLASS;
-	    target.querySelector('p + p').className = _constants.LYRIC_NEXT_CLASS;
-	    return this;
+	  if (!lyrics) {
+	    console.error('未指定歌词文本！');
+	    return;
+	  }
+	  var lyricHTML = '';
+	  for (var i = 0; i < lyrics.length; i++) {
+	    lyricHTML += '<p>' + lyrics[i].text + '</p>';
+	  }
+	  target.innerHTML = lyricHTML;
+	  target.querySelector('p').className = _constants.LYRIC_CURRENT_CLASS;
+	  target.querySelector('p + p').className = _constants.LYRIC_NEXT_CLASS;
+	  return this;
 	}
 
 	function currentIndex(time) {
-	    if (time < lyrics[0].time) return 0;
-	    for (var i = 0, l = lyrics.length; i < l; i++) {
-	        if (time >= lyrics[i].time && (!lyrics[i + 1] || time <= lyrics[i + 1].time)) {
-	            break;
-	        }
+	  if (time < lyrics[0].time) return 0;
+	  for (var i = 0, l = lyrics.length; i < l; i++) {
+	    if (time >= lyrics[i].time && (!lyrics[i + 1] || time <= lyrics[i + 1].time)) {
+	      break;
 	    }
-	    return i;
+	  }
+	  return i;
 	}
 
 	exports.parse = parse;
@@ -402,44 +406,44 @@
 	'use strict';
 
 	Object.defineProperty(exports, "__esModule", {
-	    value: true
+	  value: true
 	});
 	function toggleClass(el, className) {
-	    if (el.classList) {
-	        el.classList.toggle(className);
-	    } else {
-	        var classes = el.className.split(' ');
-	        var existingIndex = classes.indexOf(className);
+	  if (el.classList) {
+	    el.classList.toggle(className);
+	  } else {
+	    var classes = el.className.split(' ');
+	    var existingIndex = classes.indexOf(className);
 
-	        if (existingIndex >= 0) classes.splice(existingIndex, 1);else classes.push(className);
+	    if (existingIndex >= 0) classes.splice(existingIndex, 1);else classes.push(className);
 
-	        el.className = classes.join(' ');
-	    }
+	    el.className = classes.join(' ');
+	  }
 	}
 
 	function addClass(el, className) {
-	    if (el.classList) el.classList.add(className);else el.className += ' ' + className;
+	  if (el.classList) el.classList.add(className);else el.className += ' ' + className;
 	}
 
 	function removeClass(el, className) {
-	    if (el.classList) el.classList.remove(className);else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+	  if (el.classList) el.classList.remove(className);else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
 	}
 
 	function getAbsLeft(el) {
-	    var left = el.offsetLeft;
-	    while (el.offsetParent) {
-	        el = el.offsetParent;
-	        left += el.offsetLeft;
-	    }
-	    return left;
+	  var left = el.offsetLeft;
+	  while (el.offsetParent) {
+	    el = el.offsetParent;
+	    left += el.offsetLeft;
+	  }
+	  return left;
 	}
 
 	function parseSec(sec) {
-	    var tempMin = sec / 60 | 0;
-	    var tempSec = sec % 60 | 0;
-	    var curMin = tempMin < 10 ? '0' + tempMin : tempMin;
-	    var curSec = tempSec < 10 ? '0' + tempSec : tempSec;
-	    return curMin + ':' + curSec;
+	  var tempMin = sec / 60 | 0;
+	  var tempSec = sec % 60 | 0;
+	  var curMin = tempMin < 10 ? '0' + tempMin : tempMin;
+	  var curSec = tempSec < 10 ? '0' + tempSec : tempSec;
+	  return curMin + ':' + curSec;
 	}
 
 	exports.toggleClass = toggleClass;
@@ -455,7 +459,7 @@
 	'use strict';
 
 	Object.defineProperty(exports, "__esModule", {
-	    value: true
+	  value: true
 	});
 	/*
 	 * 频谱动画模拟
@@ -468,79 +472,79 @@
 	    random = Math.random;
 
 	function randHeight() {
-	    if (random() > 0.8) {
-	        return random() * 8 + 11;
-	    } else {
-	        return random() * 6 + 2;
-	    }
+	  if (random() > 0.8) {
+	    return random() * 8 + 11;
+	  } else {
+	    return random() * 6 + 2;
+	  }
 	}
 
 	var randHeightGenerator = function randHeightGenerator(base) {
-	    var max = base * 1.5 > 28 ? 28 : base * 1.5,
-	        min = 1,
-	        direction = random() > 0.5 ? 1 : -1,
-	        tempHeight = base,
-	        curStep;
-	    return function () {
-	        curStep = direction;
-	        tempHeight += curStep;
-	        if (tempHeight >= max) {
-	            direction *= -1;
-	            tempHeight = max;
-	        } else if (tempHeight <= min) {
-	            direction *= -1;
-	            tempHeight = min;
-	        }
-	        if (random() > 0.9) {
-	            direction *= -1;
-	        }
-	        return tempHeight;
-	    };
+	  var max = base * 1.5 > 28 ? 28 : base * 1.5,
+	      min = 1,
+	      direction = random() > 0.5 ? 1 : -1,
+	      tempHeight = base,
+	      curStep;
+	  return function () {
+	    curStep = direction;
+	    tempHeight += curStep;
+	    if (tempHeight >= max) {
+	      direction *= -1;
+	      tempHeight = max;
+	    } else if (tempHeight <= min) {
+	      direction *= -1;
+	      tempHeight = min;
+	    }
+	    if (random() > 0.9) {
+	      direction *= -1;
+	    }
+	    return tempHeight;
+	  };
 	};
 
 	function loop() {
-	    ctx.clearRect(0, -canvas.height / 2, canvas.width, canvas.height);
-	    for (var i = 0; i < specItems.length; i++) {
-	        var item = specItems[i];
-	        var height = item.getHeight();
-	        ctx.fillRect(i + specItems[i].xSpace, -height / 2, specItems[i].width, height);
-	    }
-
-	    if (!needStop) {
-	        timer = requestAnimationFrame(loop);
-	    }
+	  ctx.clearRect(0, -canvas.height / 2, canvas.width, canvas.height);
+	  for (var i = 0; i < specItems.length; i++) {
+	    var item = specItems[i];
+	    var height = item.getHeight();
+	    ctx.fillRect(i + specItems[i].xSpace, -height / 2, specItems[i].width, height);
+	  }
+
+	  if (!needStop) {
+	    timer = requestAnimationFrame(loop);
+	  }
 	}
 
 	function init(canvasElem) {
-	    var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 220;
-	    var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 30;
-	    var color = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '#D94240';
-
-	    canvas = canvasElem;
-	    canvas.width = width;
-	    canvas.height = height;
-	    ctx = canvas.getContext('2d');
-	    ctx.fillStyle = color;
-	    ctx.translate(0, height / 2);
-
-	    for (var i = 0; i < 64; i++) {
-	        var xSpace = i == 0 ? 0 : 5 * i;
-	        var tempItem = {
-	            xSpace: xSpace,
-	            width: 1,
-	            getHeight: randHeightGenerator(randHeight())
-	        };
-	        specItems.push(tempItem);
-	    }
+	  var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 220;
+	  var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 30;
+	  var color = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '#D94240';
+
+	  canvas = canvasElem;
+	  canvas.width = width;
+	  canvas.height = height;
+	  ctx = canvas.getContext('2d');
+	  ctx.fillStyle = color;
+	  ctx.translate(0, height / 2);
+
+	  for (var i = 0; i < 64; i++) {
+	    var xSpace = i == 0 ? 0 : 5 * i;
+	    var tempItem = {
+	      xSpace: xSpace,
+	      width: 1,
+	      getHeight: randHeightGenerator(randHeight())
+	    };
+	    specItems.push(tempItem);
+	  }
 	}
 
 	function draw() {
-	    needStop = false;
-	    loop();
+	  needStop = false;
+	  loop();
 	}
 
 	function stop() {
-	    needStop = true;
+	  needStop = true;
 	}
 
 	exports.init = init;
@@ -554,7 +558,7 @@
 	'use strict';
 
 	Object.defineProperty(exports, "__esModule", {
-	    value: true
+	  value: true
 	});
 	/**
 	 * 元素选择器辅助工具模块
@@ -566,56 +570,56 @@
 	var container;
 
 	function init(element) {
-	    container = $(element);
-	    return this;
+	  container = $(element);
+	  return this;
 	}
 
 	function select(element) {
-	    var result;
-	    if (Array.isArray(element)) {
-	        var tempResults = [];
-	        var _iteratorNormalCompletion = true;
-	        var _didIteratorError = false;
-	        var _iteratorError = undefined;
-
-	        try {
-	            for (var _iterator = element[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-	                var value = _step.value;
-
-	                tempResults.push($(value, container));
-	            }
-	        } catch (err) {
-	            _didIteratorError = true;
-	            _iteratorError = err;
-	        } finally {
-	            try {
-	                if (!_iteratorNormalCompletion && _iterator.return) {
-	                    _iterator.return();
-	                }
-	            } finally {
-	                if (_didIteratorError) {
-	                    throw _iteratorError;
-	                }
-	            }
+	  var result;
+	  if (Array.isArray(element)) {
+	    var tempResults = [];
+	    var _iteratorNormalCompletion = true;
+	    var _didIteratorError = false;
+	    var _iteratorError = undefined;
+
+	    try {
+	      for (var _iterator = element[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+	        var value = _step.value;
+
+	        tempResults.push($(value, container));
+	      }
+	    } catch (err) {
+	      _didIteratorError = true;
+	      _iteratorError = err;
+	    } finally {
+	      try {
+	        if (!_iteratorNormalCompletion && _iterator.return) {
+	          _iterator.return();
 	        }
-
-	        result = tempResults;
-	    } else {
-	        result = $(element, container);
+	      } finally {
+	        if (_didIteratorError) {
+	          throw _iteratorError;
+	        }
+	      }
 	    }
-	    return result;
+
+	    result = tempResults;
+	  } else {
+	    result = $(element, container);
+	  }
+	  return result;
 	}
 
 	function $(element, context) {
-	    var result;
-	    context = context || document;
-	    if (typeof element === 'string') {
-	        result = context.querySelector(element);
-	    } else if (element.toString().includes('HTMLDivElement')) {
-	        result = element;
-	    }
-
-	    return result;
+	  var result;
+	  context = context || document;
+	  if (typeof element === 'string') {
+	    result = context.querySelector(element);
+	  } else if (element.toString().includes('HTMLDivElement')) {
+	    result = element;
+	  }
+
+	  return result;
 	}
 
 	exports.init = init;