mePlayer/dist/meplayer.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};

/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {

/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId])
/******/ 			return installedModules[moduleId].exports;

/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			exports: {},
/******/ 			id: moduleId,
/******/ 			loaded: false
/******/ 		};

/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/ 		// Flag the module as loaded
/******/ 		module.loaded = true;

/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}


/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;

/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;

/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";

/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

	/* WEBPACK VAR INJECTION */(function(global) {'use strict';

	var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

	var _constants = __webpack_require__(1);

	var _lyric = __webpack_require__(2);

	var lyric = _interopRequireWildcard(_lyric);

	var _utils = __webpack_require__(3);

	var utils = _interopRequireWildcard(_utils);

	var _spectrum = __webpack_require__(4);

	var spectrum = _interopRequireWildcard(_spectrum);

	var _selector = __webpack_require__(5);

	var selector = _interopRequireWildcard(_selector);

	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

	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,
	      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 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');
	        }

	        lyricArea.style.webkitTransform = 'translateY(-' + 20 * tempLrcIndex + 'px)';
	        lyricArea.style.transform = 'translateY(-' + 20 * tempLrcIndex + 'px)';
	      }
	    }
	  }

	  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 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 pause() {
	    if (!audio.paused) {
	      utils.removeClass(meplayerContainer, 'meplayer-isplaying');
	      audio.pause();
	    }
	  }

	  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);
	      }
	    }
	  }
	};

	if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
	  module.exports = root.mePlayer;
	}
	/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))

/***/ }),
/* 1 */
/***/ (function(module, exports) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	  value: true
	});
	/*
	 * 全局常量声明
	 */

	var THEME_DEFAULT = 'default';
	var THEME_MINI = 'mini';
	var LYRIC_CURRENT_CLASS = 'meplayer-lyric-current';
	var LYRIC_NEXT_CLASS = 'meplayer-lyric-next';

	exports.THEME_DEFAULT = THEME_DEFAULT;
	exports.THEME_MINI = THEME_MINI;
	exports.LYRIC_CURRENT_CLASS = LYRIC_CURRENT_CLASS;
	exports.LYRIC_NEXT_CLASS = LYRIC_NEXT_CLASS;

/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	  value: true
	});
	exports.currentIndex = exports.renderTo = exports.parse = undefined;

	var _constants = __webpack_require__(1);

	var lyrics;

	// 歌词解析脚本
	// 修改自：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
	        });
	      }
	    }
	  }
	  lrc.sort(function (a, b) {
	    return a.time - b.time;
	  });

	  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;
	}

	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;
	    }
	  }
	  return i;
	}

	exports.parse = parse;
	exports.renderTo = renderTo;
	exports.currentIndex = currentIndex;

/***/ }),
/* 3 */
/***/ (function(module, exports) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	  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 (existingIndex >= 0) classes.splice(existingIndex, 1);else classes.push(className);

	    el.className = classes.join(' ');
	  }
	}

	function addClass(el, 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'), ' ');
	}

	function getAbsLeft(el) {
	  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;
	}

	exports.toggleClass = toggleClass;
	exports.addClass = addClass;
	exports.removeClass = removeClass;
	exports.getAbsLeft = getAbsLeft;
	exports.parseSec = parseSec;

/***/ }),
/* 4 */
/***/ (function(module, exports) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	  value: true
	});
	/*
	 * 频谱动画模拟
	 * */
	var canvas,
	    ctx,
	    specItems = [],
	    needStop = false,
	    timer = null,
	    random = Math.random;

	function randHeight() {
	  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;
	  };
	};

	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);
	  }
	}

	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);
	  }
	}

	function draw() {
	  needStop = false;
	  loop();
	}

	function stop() {
	  needStop = true;
	}

	exports.init = init;
	exports.draw = draw;
	exports.stop = stop;

/***/ }),
/* 5 */
/***/ (function(module, exports) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	  value: true
	});
	/**
	 * 元素选择器辅助工具模块
	 * init  : 设定容器
	 * select: 传入选择器则返回元素，传入选择器数组则返回对应的元素数组
	 * $     : 辅助功能，使得无论传入选择器字符串还是元素本身，都能返回正确的元素
	 */

	var container;

	function init(element) {
	  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;
	        }
	      }
	    }

	    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;
	}

	exports.init = init;
	exports.select = select;
	exports.$ = $;

/***/ })
/******/ ]);