/******/ (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 = '
\n \n
\n
cd-cover
\n
\n
' + musicConf.title + '
\n
' + musicConf.author + '
\n
\n
\n
\n \n
\n
\n
\n
loading
\n
loading
\n
\n
'; 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 += '

' + lyrics[i].text + '

'; } 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.$ = $; /***/ }) /******/ ]);