vue-aplayer-next
Version:
Easy-to-use music player for Vue 3.x
1,189 lines (1,078 loc) • 293 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory((function webpackLoadOptionalExternalModule() { try { return require("hls.js"); } catch(e) {} }()), require("vue"));
else if(typeof define === 'function' && define.amd)
define("VueAPlayer", ["hls.js", "vue"], factory);
else if(typeof exports === 'object')
exports["VueAPlayer"] = factory((function webpackLoadOptionalExternalModule() { try { return require("hls.js"); } catch(e) {} }()), require("vue"));
else
root["VueAPlayer"] = factory(root["Hls"], root["Vue"]);
})(window, function(__WEBPACK_EXTERNAL_MODULE_hls_js__, __WEBPACK_EXTERNAL_MODULE_vue__) {
return /******/ (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] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = 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;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/vue-aplayer.vue");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib/index.js?!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist/index.js?!./src/components/aplayer-controller-progress.vue?vue&type=script&lang=js":
/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib??ref--0!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist??ref--16-0!./src/components/aplayer-controller-progress.vue?vue&type=script&lang=js ***!
\***************************************************************************************************************************************************************************************************************************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ "./src/utils.js");
/* harmony import */ var _aplayer_icon_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./aplayer-icon.vue */ "./src/components/aplayer-icon.vue");
/* harmony default export */ __webpack_exports__["default"] = ({
components: {
Icon: _aplayer_icon_vue__WEBPACK_IMPORTED_MODULE_1__["default"]
},
props: ['loadProgress', 'playProgress', 'theme'],
data: function data() {
return {
thumbHovered: false
};
},
methods: {
onThumbMouseDown: function onThumbMouseDown(e) {
var barWidth = this.$refs.barWrap.clientWidth;
var percentage = (e.clientX - Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getElementViewLeft"])(this.$refs.barWrap)) / barWidth;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this.$emit('dragbegin', percentage);
document.addEventListener('mousemove', this.onDocumentMouseMove);
document.addEventListener('mouseup', this.onDocumentMouseUp);
},
onDocumentMouseMove: function onDocumentMouseMove(e) {
var barWidth = this.$refs.barWrap.clientWidth;
var percentage = (e.clientX - Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getElementViewLeft"])(this.$refs.barWrap)) / barWidth;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this.$emit('dragging', percentage);
},
onDocumentMouseUp: function onDocumentMouseUp(e) {
document.removeEventListener('mouseup', this.onDocumentMouseUp);
document.removeEventListener('mousemove', this.onDocumentMouseMove);
var barWidth = this.$refs.barWrap.clientWidth;
var percentage = (e.clientX - Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getElementViewLeft"])(this.$refs.barWrap)) / barWidth;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this.$emit('dragend', percentage);
},
onThumbTouchStart: function onThumbTouchStart(e) {
var barWidth = this.$refs.barWrap.clientWidth;
var percentage = (e.clientX - Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getElementViewLeft"])(this.$refs.barWrap)) / barWidth;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this.$emit('dragbegin', percentage);
document.addEventListener('touchmove', this.onDocumentTouchMove);
document.addEventListener('touchend', this.onDocumentTouchEnd);
},
onDocumentTouchMove: function onDocumentTouchMove(e) {
var touch = e.changedTouches[0];
var barWidth = this.$refs.barWrap.clientWidth;
var percentage = (touch.clientX - Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getElementViewLeft"])(this.$refs.barWrap)) / barWidth;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this.$emit('dragging', percentage);
},
onDocumentTouchEnd: function onDocumentTouchEnd(e) {
document.removeEventListener('touchend', this.onDocumentTouchEnd);
document.removeEventListener('touchmove', this.onDocumentTouchMove);
var touch = e.changedTouches[0];
var barWidth = this.$refs.barWrap.clientWidth;
var percentage = (touch.clientX - Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getElementViewLeft"])(this.$refs.barWrap)) / barWidth;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this.$emit('dragend', percentage);
}
}
});
/***/ }),
/***/ "./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib/index.js?!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist/index.js?!./src/components/aplayer-controller-volume.vue?vue&type=script&lang=js":
/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib??ref--0!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist??ref--16-0!./src/components/aplayer-controller-volume.vue?vue&type=script&lang=js ***!
\*************************************************************************************************************************************************************************************************************************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _aplayer_iconbutton_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./aplayer-iconbutton.vue */ "./src/components/aplayer-iconbutton.vue");
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ "./src/utils.js");
var barHeight = 40;
/* harmony default export */ __webpack_exports__["default"] = ({
components: {
IconButton: _aplayer_iconbutton_vue__WEBPACK_IMPORTED_MODULE_0__["default"]
},
props: ['volume', 'muted', 'theme'],
computed: {
volumeIcon: function volumeIcon() {
if (this.muted || this.volume <= 0) return 'volume-off';
if (this.volume >= 1) return 'volume-up';
return 'volume-down';
}
},
methods: {
adjustVolume: function adjustVolume(e) {
var percentage = (barHeight - e.clientY + Object(_utils__WEBPACK_IMPORTED_MODULE_1__["getElementViewTop"])(this.$refs.bar)) / barHeight;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this.$emit('setvolume', percentage);
},
onBarMouseDown: function onBarMouseDown() {
document.addEventListener('mousemove', this.onDocumentMouseMove);
document.addEventListener('mouseup', this.onDocumentMouseUp);
},
onDocumentMouseMove: function onDocumentMouseMove(e) {
var percentage = (barHeight - e.clientY + Object(_utils__WEBPACK_IMPORTED_MODULE_1__["getElementViewTop"])(this.$refs.bar)) / barHeight;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this.$emit('setvolume', percentage);
},
onDocumentMouseUp: function onDocumentMouseUp(e) {
document.removeEventListener('mouseup', this.onDocumentMouseUp);
document.removeEventListener('mousemove', this.onDocumentMouseMove);
var percentage = (barHeight - e.clientY + Object(_utils__WEBPACK_IMPORTED_MODULE_1__["getElementViewTop"])(this.$refs.bar)) / barHeight;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this.$emit('setvolume', percentage);
}
}
});
/***/ }),
/***/ "./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib/index.js?!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist/index.js?!./src/components/aplayer-controller.vue?vue&type=script&lang=js":
/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib??ref--0!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist??ref--16-0!./src/components/aplayer-controller.vue?vue&type=script&lang=js ***!
\******************************************************************************************************************************************************************************************************************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _aplayer_iconbutton_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./aplayer-iconbutton.vue */ "./src/components/aplayer-iconbutton.vue");
/* harmony import */ var _aplayer_controller_progress_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./aplayer-controller-progress.vue */ "./src/components/aplayer-controller-progress.vue");
/* harmony import */ var _aplayer_controller_volume_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./aplayer-controller-volume.vue */ "./src/components/aplayer-controller-volume.vue");
/* harmony default export */ __webpack_exports__["default"] = ({
components: {
IconButton: _aplayer_iconbutton_vue__WEBPACK_IMPORTED_MODULE_0__["default"],
VProgress: _aplayer_controller_progress_vue__WEBPACK_IMPORTED_MODULE_1__["default"],
Volume: _aplayer_controller_volume_vue__WEBPACK_IMPORTED_MODULE_2__["default"]
},
props: ['shuffle', 'repeat', 'stat', 'theme', 'volume', 'muted'],
computed: {
loadProgress: function loadProgress() {
if (this.stat.duration === 0) return 0;
return this.stat.loadedTime / this.stat.duration;
},
playProgress: function playProgress() {
if (this.stat.duration === 0) return 0;
return this.stat.playedTime / this.stat.duration;
}
},
methods: {
secondToTime: function secondToTime(second) {
if (Number.isNaN(second)) {
return '00:00';
}
var pad0 = function pad0(num) {
return num < 10 ? "0".concat(num) : "".concat(num);
};
var min = Math.trunc(second / 60);
var sec = Math.trunc(second - min * 60);
var hours = Math.trunc(min / 60);
var minAdjust = Math.trunc(second / 60 - 60 * Math.trunc(second / 60 / 60));
return second >= 3600 ? "".concat(pad0(hours), ":").concat(pad0(minAdjust), ":").concat(pad0(sec)) : "".concat(pad0(min), ":").concat(pad0(sec));
}
}
});
/***/ }),
/***/ "./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib/index.js?!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist/index.js?!./src/components/aplayer-icon.vue?vue&type=script&lang=js":
/*!************************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib??ref--0!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist??ref--16-0!./src/components/aplayer-icon.vue?vue&type=script&lang=js ***!
\************************************************************************************************************************************************************************************************************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var requireAssets = __webpack_require__("./src/assets sync \\.svg$");
var SVGs = requireAssets.keys().reduce(function (svgs, path) {
var inlineSvg = requireAssets(path); // eslint-disable-next-line no-unused-vars
var _inlineSvg$match = inlineSvg.match(/^<svg.+?viewBox="(.+?)".*><path.+?d="(.+?)".*><\/path><\/svg>$/),
_inlineSvg$match2 = _slicedToArray(_inlineSvg$match, 3),
raw = _inlineSvg$match2[0],
viewBox = _inlineSvg$match2[1],
d = _inlineSvg$match2[2];
svgs[path.match(/^.*\/(.+?)\.svg$/)[1]] = {
viewBox: viewBox,
d: d
};
return svgs;
}, {});
/* harmony default export */ __webpack_exports__["default"] = ({
props: ['type'],
computed: {
svg: function svg() {
var icon = this.type;
if (this.type === 'prev' || this.type === 'next') {
// eslint-disable-next-line no-unused-vars
icon = 'skip';
}
return SVGs[this.type] || {};
},
style: function style() {
if (this.type === 'next') {
return {
transform: 'rotate(180deg)'
};
}
return {};
}
}
});
/***/ }),
/***/ "./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib/index.js?!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist/index.js?!./src/components/aplayer-iconbutton.vue?vue&type=script&lang=js":
/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib??ref--0!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist??ref--16-0!./src/components/aplayer-iconbutton.vue?vue&type=script&lang=js ***!
\******************************************************************************************************************************************************************************************************************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _aplayer_icon_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./aplayer-icon.vue */ "./src/components/aplayer-icon.vue");
/* harmony default export */ __webpack_exports__["default"] = ({
components: {
Icon: _aplayer_icon_vue__WEBPACK_IMPORTED_MODULE_0__["default"]
},
props: ['icon']
});
/***/ }),
/***/ "./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib/index.js?!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist/index.js?!./src/components/aplayer-list.vue?vue&type=script&lang=js":
/*!************************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib??ref--0!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist??ref--16-0!./src/components/aplayer-list.vue?vue&type=script&lang=js ***!
\************************************************************************************************************************************************************************************************************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ({
props: {
show: {
type: Boolean,
default: true
},
currentMusic: Object,
musicList: {
type: Array,
default: function _default() {
return [];
}
},
playIndex: {
type: Number,
default: 0
},
theme: String,
listmaxheight: String
},
computed: {
listHeightStyle: function listHeightStyle() {
return {
height: "".concat(33 * this.musicList.length - 1, "px"),
maxHeight: this.listmaxheight || ''
};
}
}
});
/***/ }),
/***/ "./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib/index.js?!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist/index.js?!./src/components/aplayer-lrc.vue?vue&type=script&lang=js":
/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib??ref--0!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist??ref--16-0!./src/components/aplayer-lrc.vue?vue&type=script&lang=js ***!
\***********************************************************************************************************************************************************************************************************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ "./src/utils.js");
/* harmony default export */ __webpack_exports__["default"] = ({
props: {
currentMusic: {
type: Object,
required: true
},
playStat: {
type: Object,
required: true
}
},
data: function data() {
return {
displayLrc: '',
currentLineIndex: 0
};
},
computed: {
lrcLines: function lrcLines() {
return Object(_utils__WEBPACK_IMPORTED_MODULE_0__["parseLrc"])(this.displayLrc);
},
currentLine: function currentLine() {
if (this.currentLineIndex > this.lrcLines.length - 1) {
return null;
}
return this.lrcLines[this.currentLineIndex];
},
transformStyle: function transformStyle() {
// transform: translateY(0); -webkit-transform: translateY(0);
return {
transform: "translateY(".concat(-this.currentLineIndex * 16, "px)"),
webkitTransform: "translateY(".concat(-this.currentLineIndex * 16, "px)")
};
}
},
methods: {
applyLrc: function applyLrc(lrc) {
if (/^https?:\/\//.test(lrc)) {
this.fetchLrc(lrc);
} else {
this.displayLrc = lrc;
}
},
fetchLrc: function fetchLrc(src) {
var _this = this;
fetch(src).then(function (response) {
return response.text();
}).then(function (lrc) {
_this.displayLrc = lrc;
});
},
hideLrc: function hideLrc() {
this.displayLrc = '';
}
},
watch: {
currentMusic: {
immediate: true,
handler: function handler(music) {
this.currentLineIndex = 0;
if (music.lrc) {
this.applyLrc(music.lrc);
} else {
this.hideLrc();
}
}
},
'playStat.playedTime': function playStatPlayedTime(playedTime) {
for (var i = 0; i < this.lrcLines.length; i++) {
var line = this.lrcLines[i];
var nextLine = this.lrcLines[i + 1];
if (playedTime >= line[0] && (!nextLine || playedTime < nextLine[0])) {
this.currentLineIndex = i;
}
}
}
}
});
/***/ }),
/***/ "./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib/index.js?!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist/index.js?!./src/components/aplayer-thumbnail.vue?vue&type=script&lang=js":
/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib??ref--0!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist??ref--16-0!./src/components/aplayer-thumbnail.vue?vue&type=script&lang=js ***!
\*****************************************************************************************************************************************************************************************************************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _aplayer_iconbutton_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./aplayer-iconbutton.vue */ "./src/components/aplayer-iconbutton.vue");
/* harmony default export */ __webpack_exports__["default"] = ({
components: {
IconButton: _aplayer_iconbutton_vue__WEBPACK_IMPORTED_MODULE_0__["default"]
},
props: {
pic: String,
theme: String,
playing: {
type: Boolean,
default: false
},
enableDrag: {
type: Boolean,
default: false
}
},
data: function data() {
return {
hasMovedSinceMouseDown: false,
dragStartX: 0,
dragStartY: 0
};
},
computed: {
currentPicStyleObj: function currentPicStyleObj() {
if (!this.pic) return {};
return {
backgroundImage: "url(".concat(this.pic, ")"),
backgroundColor: this.theme
};
}
},
methods: {
onDragBegin: function onDragBegin(e) {
if (this.enableDrag) {
this.hasMovedSinceMouseDown = false;
this.$emit('dragbegin');
this.dragStartX = e.clientX;
this.dragStartY = e.clientY;
document.addEventListener('mousemove', this.onDocumentMouseMove);
document.addEventListener('mouseup', this.onDocumentMouseUp);
}
},
onDocumentMouseMove: function onDocumentMouseMove(e) {
this.hasMovedSinceMouseDown = true;
this.$emit('dragging', {
offsetLeft: e.clientX - this.dragStartX,
offsetTop: e.clientY - this.dragStartY
});
},
onDocumentMouseUp: function onDocumentMouseUp() {
document.removeEventListener('mouseup', this.onDocumentMouseUp);
document.removeEventListener('mousemove', this.onDocumentMouseMove);
this.$emit('dragend');
},
onClick: function onClick() {
if (!this.hasMovedSinceMouseDown) {
this.$emit('toggleplay');
}
}
}
});
/***/ }),
/***/ "./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib/index.js?!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist/index.js?!./src/vue-aplayer.vue?vue&type=script&lang=js":
/*!************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/.pnpm/babel-loader@8.1.0_jdrp3rdy5c5iyma3ipxolbtjf4/node_modules/babel-loader/lib??ref--0!./node_modules/.pnpm/vue-loader@17.0.0_webpack@4.39.2/node_modules/vue-loader/dist??ref--16-0!./src/vue-aplayer.vue?vue&type=script&lang=js ***!
\************************************************************************************************************************************************************************************************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "vue");
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _components_aplayer_thumbnail_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/aplayer-thumbnail.vue */ "./src/components/aplayer-thumbnail.vue");
/* harmony import */ var _components_aplayer_list_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/aplayer-list.vue */ "./src/components/aplayer-list.vue");
/* harmony import */ var _components_aplayer_controller_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/aplayer-controller.vue */ "./src/components/aplayer-controller.vue");
/* harmony import */ var _components_aplayer_lrc_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/aplayer-lrc.vue */ "./src/components/aplayer-lrc.vue");
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils */ "./src/utils.js");
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
var versionBadgePrinted = false;
var canUseSync = Object(_utils__WEBPACK_IMPORTED_MODULE_5__["versionCompare"])(vue__WEBPACK_IMPORTED_MODULE_0__["version"], '2.3.0') >= 0;
/**
* memorize self-adapting theme for cover image urls
* @type {Object.<url, rgb()>}
*/
var picThemeCache = {}; // mutex playing instance
var activeMutex = null;
var REPEAT = {
NONE: 'none',
MUSIC: 'music',
LIST: 'list',
NO_REPEAT: 'no-repeat',
REPEAT_ONE: 'repeat-one',
REPEAT_ALL: 'repeat-all'
};
var VueAPlayer = {
name: 'APlayer',
disableVersionBadge: false,
components: {
Thumbnail: _components_aplayer_thumbnail_vue__WEBPACK_IMPORTED_MODULE_1__["default"],
Controls: _components_aplayer_controller_vue__WEBPACK_IMPORTED_MODULE_3__["default"],
MusicList: _components_aplayer_list_vue__WEBPACK_IMPORTED_MODULE_2__["default"],
Lyrics: _components_aplayer_lrc_vue__WEBPACK_IMPORTED_MODULE_4__["default"]
},
props: {
music: {
type: Object,
required: true,
validator: function validator(song) {
return !!song.src;
}
},
list: {
type: Array,
default: function _default() {
return [];
}
},
mini: {
type: Boolean,
default: false
},
showLrc: {
type: Boolean,
default: false
},
mutex: {
type: Boolean,
default: true
},
theme: {
type: String,
default: '#41b883'
},
listMaxHeight: String,
/**
* @since 1.4.1
* Fold playlist initially
*/
listFolded: {
type: Boolean,
default: false
},
/**
* @since 1.2.0 Float mode
*/
float: {
type: Boolean,
default: false
},
// Audio attributes as props
// since 1.4.0
// autoplay controls muted preload volume
// autoplay is not observable
/**
* @since 1.4.0
* not observable
*/
autoplay: {
type: Boolean,
default: false
},
/**
* @since 1.4.0
* whether to show native audio controls below Vue-APlayer
* only work in development environment and not mini mode
*
* observable
*/
controls: {
type: Boolean,
default: false
},
/**
* @since 1.4.0
* observable, sync
*/
muted: {
type: Boolean,
default: false
},
/**
* @since 1.4.0
* observable
*/
preload: String,
/**
* @since 1.4.0
* observable, sync
*/
volume: {
type: Number,
default: 0.8,
validator: function validator(value) {
return value >= 0 && value <= 1;
}
},
// play order control
// since 1.5.0
/**
* @since 1.5.0
* @see https://support.apple.com/en-us/HT207230
* twoWay
*/
shuffle: {
type: Boolean,
default: false
},
/**
* @since 1.5.0
* @see https://support.apple.com/en-us/HT207230
* twoWay
*/
repeat: {
type: String,
default: REPEAT.NO_REPEAT
}
},
data: function data() {
return {
internalMusic: this.music,
isPlaying: false,
isSeeking: false,
wasPlayingBeforeSeeking: false,
isMobile: /mobile/i.test(window.navigator.userAgent),
playStat: {
duration: 0,
loadedTime: 0,
playedTime: 0
},
showList: !this.listFolded,
// handle Promise returned from audio.play()
// @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play
audioPlayPromise: Promise.resolve(),
// @since 1.2.0 float mode
floatOriginX: 0,
floatOriginY: 0,
floatOffsetLeft: 0,
floatOffsetTop: 0,
// @since 1.3.0 self adapting theme
selfAdaptingTheme: null,
// @since 1.4.0
// sync muted, volume
internalMuted: this.muted,
internalVolume: this.volume,
// @since 1.4.1
// Loading indicator
isLoading: false,
// @since 1.5.1
// sync shuffle, repeat
internalShuffle: this.shuffle,
internalRepeat: this.repeat,
// for shuffling
shuffledList: [],
version: vue__WEBPACK_IMPORTED_MODULE_0__["version"]
};
},
computed: {
// alias for $refs.audio
audio: function audio() {
return this.$refs.audio;
},
// sync music
currentMusic: {
get: function get() {
return this.internalMusic;
},
set: function set(val) {
canUseSync && this.$emit('update:music', val);
this.internalMusic = val;
}
},
// props wrappers
currentTheme: function currentTheme() {
return this.selfAdaptingTheme || this.currentMusic.theme || this.theme;
},
isFloatMode: function isFloatMode() {
return this.float && !this.isMobile;
},
shouldAutoplay: function shouldAutoplay() {
if (this.isMobile) return false;
return this.autoplay;
},
musicList: function musicList() {
return this.list;
},
shouldShowNativeControls: function shouldShowNativeControls() {
return true && this.controls && !this.mini;
},
// useful
floatStyleObj: function floatStyleObj() {
// transform: translate(floatOffsetLeft, floatOffsetY)
return {
transform: "translate(".concat(this.floatOffsetLeft, "px, ").concat(this.floatOffsetTop, "px)"),
webkitTransform: "translate(".concat(this.floatOffsetLeft, "px, ").concat(this.floatOffsetTop, "px)")
};
},
currentPicStyleObj: function currentPicStyleObj() {
if (this.currentMusic && this.currentMusic.pic) {
return {
backgroundImage: "url(".concat(this.currentMusic.pic, ")")
};
}
return {};
},
loadProgress: function loadProgress() {
if (this.playStat.duration === 0) return 0;
return this.playStat.loadedTime / this.playStat.duration;
},
playProgress: function playProgress() {
if (this.playStat.duration === 0) return 0;
return this.playStat.playedTime / this.playStat.duration;
},
playIndex: {
get: function get() {
return this.shuffledList.indexOf(this.currentMusic);
},
set: function set(val) {
this.currentMusic = this.shuffledList[val % this.shuffledList.length];
}
},
shouldRepeat: function shouldRepeat() {
return this.repeatMode !== REPEAT.NO_REPEAT;
},
// since 1.4.0
// sync muted, volume
isAudioMuted: {
get: function get() {
return this.internalMuted;
},
set: function set(val) {
canUseSync && this.$emit('update:muted', val);
this.internalMuted = val;
}
},
audioVolume: {
get: function get() {
return this.internalVolume;
},
set: function set(val) {
canUseSync && this.$emit('update:volume', val);
this.internalVolume = val;
}
},
// since 1.5.0
// sync shuffle, repeat
shouldShuffle: {
get: function get() {
return this.internalShuffle;
},
set: function set(val) {
canUseSync && this.$emit('update:shuffle', val);
this.internalShuffle = val;
}
},
repeatMode: {
get: function get() {
switch (this.internalRepeat) {
case REPEAT.NONE:
case REPEAT.NO_REPEAT:
return REPEAT.NO_REPEAT;
case REPEAT.MUSIC:
case REPEAT.REPEAT_ONE:
return REPEAT.REPEAT_ONE;
default:
return REPEAT.REPEAT_ALL;
}
},
set: function set(val) {
canUseSync && this.$emit('update:repeat', val);
this.internalRepeat = val;
}
}
},
methods: {
// Float mode
onDragBegin: function onDragBegin() {
this.floatOriginX = this.floatOffsetLeft;
this.floatOriginY = this.floatOffsetTop;
},
onDragAround: function onDragAround(_ref) {
var offsetLeft = _ref.offsetLeft,
offsetTop = _ref.offsetTop;
this.floatOffsetLeft = this.floatOriginX + offsetLeft;
this.floatOffsetTop = this.floatOriginY + offsetTop;
},
// functions
setNextMode: function setNextMode() {
if (this.repeatMode === REPEAT.REPEAT_ALL) {
this.repeatMode = REPEAT.REPEAT_ONE;
} else if (this.repeatMode === REPEAT.REPEAT_ONE) {
this.repeatMode = REPEAT.NO_REPEAT;
} else {
this.repeatMode = REPEAT.REPEAT_ALL;
}
},
thenPlay: function thenPlay() {
var _this = this;
this.$nextTick(function () {
_this.play();
});
},
// controls
// play/pause
toggle: function toggle() {
if (!this.audio.paused) {
this.pause();
} else {
this.play();
}
},
// eslint-disable-next-line consistent-return
play: function play() {
var _this2 = this;
if (this.mutex) {
if (activeMutex && activeMutex !== this) {
activeMutex.pause();
}
activeMutex = this;
} // handle .play() Promise
var audioPlayPromise = this.audio.play();
if (audioPlayPromise) {
return this.audioPlayPromise = new Promise(function (resolve, reject) {
// rejectPlayPromise is to force reject audioPlayPromise if it's still pending when pause() is called
_this2.rejectPlayPromise = reject;
audioPlayPromise.then(function (res) {
_this2.rejectPlayPromise = null;
resolve(res);
}).catch(_utils__WEBPACK_IMPORTED_MODULE_5__["warn"]);
});
}
},
pause: function pause() {
var _this3 = this;
this.audioPlayPromise.then(function () {
_this3.audio.pause();
}) // Avoid force rejection throws Uncaught
.catch(function () {
_this3.audio.pause();
}); // audioPlayPromise is still pending
if (this.rejectPlayPromise) {
// force reject playPromise
this.rejectPlayPromise();
this.rejectPlayPromise = null;
}
},
// progress bar
onProgressDragBegin: function onProgressDragBegin(val) {
this.wasPlayingBeforeSeeking = this.isPlaying;
this.pause();
this.isSeeking = true; // handle load failures
if (!Number.isNaN(this.audio.duration)) {
this.audio.currentTime = this.audio.duration * val;
}
},
onProgressDragging: function onProgressDragging(val) {
if (Number.isNaN(this.audio.duration)) {
this.playStat.playedTime = 0;
} else {
this.audio.currentTime = this.audio.duration * val;
}
},
onProgressDragEnd: function onProgressDragEnd() {
this.isSeeking = false;
if (this.wasPlayingBeforeSeeking) {
this.thenPlay();
}
},
// volume
toggleMute: function toggleMute() {
this.setAudioMuted(!this.audio.muted);
},
setAudioMuted: function setAudioMuted(val) {
this.audio.muted = val;
},
setAudioVolume: function setAudioVolume(val) {
this.audio.volume = val;
if (val > 0) {
this.setAudioMuted(false);
}
},
// playlist
getShuffledList: function getShuffledList() {
if (!this.list.length) {
return [this.internalMusic];
}
var unshuffled = _toConsumableArray(this.list);
if (!this.internalShuffle || unshuffled.length <= 1) {
return unshuffled;
}
var indexOfCurrentMusic = unshuffled.indexOf(this.internalMusic);
if (unshuffled.length === 2 && indexOfCurrentMusic !== -1) {
if (indexOfCurrentMusic === 0) {
return unshuffled;
}
return [this.internalMusic, unshuffled[0]];
} // shuffle list
// @see https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
for (var i = unshuffled.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = unshuffled[i];
unshuffled[i] = unshuffled[j];
unshuffled[j] = tmp;
} // take currentMusic to first
if (indexOfCurrentMusic !== -1) {
indexOfCurrentMusic = unshuffled.indexOf(this.internalMusic);
if (indexOfCurrentMusic !== 0) {
var _ref2 = [unshuffled[indexOfCurrentMusic], unshuffled[0]];
unshuffled[0] = _ref2[0];
unshuffled[indexOfCurrentMusic] = _ref2[1];
}
}
return unshuffled;
},
onSelectSong: function onSelectSong(song) {
if (this.currentMusic === song) {
this.toggle();
} else {
this.currentMusic = song;
this.thenPlay();
}
},
// event handlers
// for keeping up with audio states
onAudioPlay: function onAudioPlay() {
this.isPlaying = true;
},
onAudioPause: function onAudioPause() {
this.isPlaying = false;
},
onAudioWaiting: function onAudioWaiting() {
this.isLoading = true;
},
onAudioCanplay: function onAudioCanplay() {
this.isLoading = false;
},
onAudioDurationChange: function onAudioDurationChange() {
if (this.audio.duration !== 1) {
this.playStat.duration = this.audio.duration;
}
},
onAudioProgress: function onAudioProgress() {
if (this.audio.buffered.length) {
this.playStat.loadedTime = this.audio.buffered.end(this.audio.buffered.length - 1);
} else {
this.playStat.loadedTime = 0;
}
},
onAudioTimeUpdate: function onAudioTimeUpdate() {
this.playStat.playedTime = this.audio.currentTime;
},
onAudioSeeking: function onAudioSeeking() {
this.playStat.playedTime = this.audio.currentTime;
},
onAudioSeeked: function onAudioSeeked() {
this.playStat.playedTime = this.audio.currentTime;
},
onAudioVolumeChange: function onAudioVolumeChange() {
this.audioVolume = this.audio.volume;
this.isAudioMuted = this.audio.muted;
},
onAudioEnded: function onAudioEnded() {
// determine next song according to shuffle and repeat
if (this.repeatMode === REPEAT.REPEAT_ALL) {
if (this.shouldShuffle && this.playIndex === this.shuffledList.length - 1) {
this.shuffledList = this.getShuffledList();
}
this.playIndex++;
this.thenPlay();
} else if (this.repeatMode === REPEAT.REPEAT_ONE) {
this.thenPlay();
} else {
this.playIndex++;
if (this.playIndex !== 0) {
this.thenPlay();
} else if (this.shuffledList.length === 1) {
this.audio.currentTime = 0;
}
}
},
initAudio: function initAudio() {
var _this4 = this;
// since 1.4.0 Audio attributes as props
this.audio.controls = this.shouldShowNativeControls;
this.audio.muted = this.muted;
this.audio.preload = this.preload;
this.audio.volume = this.volume; // since 1.4.0 Emit as many native audio events
// @see https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
var mediaEvents = ['abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'encrypted', 'ended', 'error', 'interruptbegin', 'interruptend', 'loadeddata', 'loadedmetadata', 'loadstart', 'mozaudioavailable', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting'];
mediaEvents.forEach(function (event) {
_this4.audio.addEventListener(event, function (e) {
return _this4.$emit(event, e);
});
}); // event handlers
// they don't emit native media events
this.audio.addEventListener('play', this.onAudioPlay);
this.audio.addEventListener('pause', this.onAudioPause);
this.audio.addEventListener('abort', this.onAudioPause);
this.audio