Files
MollyBlog/templates/default/assets/js/lib/meplayer.js

660 lines
25 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// webpackBootstrap
(function (modules) {
// 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);
})
([(function (module, exports, __webpack_require__) {
(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.MollyPlayer = 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,
coverSrc = musicConf.cover || '../../https://yvling-cdn-1257337367.cos.ap-nanjing.myqcloud.com/MollyBlog/assets/img/music.png', loop = musicConf.loop || false,
autoplay = options.autoplay,
currentThemeClass = theme === _constants.THEME_DEFAULT ? 'meplayer-container' : 'meplayer-container-mini',
containerClass = currentThemeClass + ' ' + (hasLrc ? 'meplayer-haslrc' : '') + ' meplayer-isloading';
target.innerHTML = '<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>';
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('play', handleAudioStart);
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 handleAudioStart() {
utils.addClass(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');
}
lyricArea.style.webkitTransform = 'translateY(-' + tempLrcLines[tempLrcIndex].offsetTop + 'px)';
lyricArea.style.transform = 'translateY(-' + tempLrcLines[tempLrcIndex].offsetTop + '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(event) {
var rect = this.getBoundingClientRect();
var clickPosition = event.clientX - rect.left;
var clickPercent = clickPosition / rect.width;
timePassed.style.width = clickPercent * 100 + '%';
audio.currentTime = (clickPercent * duration).toFixed(0);
}
function play() {
if (audio.paused) {
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;
}
}.call(exports, (function () {
return this;
}())))
}),
(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;
}),
(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;
}),
(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;
}),
(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;
}),
(function (module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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.$ = $;
})]);