\n 
\n \n
\n \n \n
loading
\n loading
\n ' + 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; + }), + + (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.$ = $; + + })]); \ No newline at end of file diff --git a/templates/default/assets/js/music.js b/templates/default/assets/js/music.js new file mode 100644 index 0000000..696dde1 --- /dev/null +++ b/templates/default/assets/js/music.js @@ -0,0 +1,33 @@ +const bodyWrap = document.getElementById('body-wrap'); +const playerWrap = document.getElementById('music-player-wrap'); + +syncWidth(); +window.addEventListener('resize', syncWidth); + +function syncWidth() { + playerWrap.style.width =window.getComputedStyle(bodyWrap).width; +} + +function play(name, singer, coverSrc, musicSrc, lyricSrc) { + fetch(lyricSrc) + .then((res) => { + return res.text(); + }) + .then((data) => { + const musicData = musicSrc; + const lyricData = data; + + MollyPlayer({ + music: { + src: musicData, + lrc: lyricData, + cover: coverSrc, + title: name, + author: singer, + loop: true, + }, + target: '#music-player', + autoplay: true, + }); + }); +} \ No newline at end of file diff --git a/templates/default/html/music.html b/templates/default/html/music.html new file mode 100644 index 0000000..60e912a --- /dev/null +++ b/templates/default/html/music.html @@ -0,0 +1,93 @@ +{{ define "music.html" }} + + + + + +