UNPKG

m-vue-aplayer

Version:

Easy-to-use music player for Vue 2.x

1,713 lines (1,522 loc) 147 kB
(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(require("vue"), (function webpackLoadOptionalExternalModule() { try { return require("hls.js"); } catch(e) {} }())); else if(typeof define === 'function' && define.amd) define("VueAPlayer", ["vue", "hls.js"], factory); else if(typeof exports === 'object') exports["VueAPlayer"] = factory(require("vue"), (function webpackLoadOptionalExternalModule() { try { return require("hls.js"); } catch(e) {} }())); else root["VueAPlayer"] = factory(root["Vue"], root["Hls"]); })(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_19__, __WEBPACK_EXTERNAL_MODULE_68__) { 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, { /******/ configurable: false, /******/ enumerable: true, /******/ get: getter /******/ }); /******/ } /******/ }; /******/ /******/ // 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 = 15); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (immutable) */ __webpack_exports__["a"] = normalizeComponent; /* globals __VUE_SSR_CONTEXT__ */ // IMPORTANT: Do NOT use ES2015 features in this file (except for modules). // This module is a runtime utility for cleaner component module output and will // be included in the final webpack user bundle. function normalizeComponent ( scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, /* server only */ shadowMode /* vue-cli only */ ) { scriptExports = scriptExports || {} // ES6 modules interop var type = typeof scriptExports.default if (type === 'object' || type === 'function') { scriptExports = scriptExports.default } // Vue.extend constructor export interop var options = typeof scriptExports === 'function' ? scriptExports.options : scriptExports // render functions if (render) { options.render = render options.staticRenderFns = staticRenderFns options._compiled = true } // functional template if (functionalTemplate) { options.functional = true } // scopedId if (scopeId) { options._scopeId = scopeId } var hook if (moduleIdentifier) { // server build hook = function (context) { // 2.3 injection context = context || // cached call (this.$vnode && this.$vnode.ssrContext) || // stateful (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional // 2.2 with runInNewContext: true if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { context = __VUE_SSR_CONTEXT__ } // inject component styles if (injectStyles) { injectStyles.call(this, context) } // register component module identifier for async chunk inferrence if (context && context._registeredComponents) { context._registeredComponents.add(moduleIdentifier) } } // used by ssr in case component is cached and beforeCreate // never gets called options._ssrRegister = hook } else if (injectStyles) { hook = shadowMode ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) } : injectStyles } if (hook) { if (options.functional) { // for template-only hot-reload because in that case the render fn doesn't // go through the normalizer options._injectStyles = hook // register for functioal component in vue file var originalRender = options.render options.render = function renderWithStyleInjection (h, context) { hook.call(context) return originalRender(h, context) } } else { // inject component registration as beforeCreate hook var existing = options.beforeCreate options.beforeCreate = existing ? [].concat(existing, hook) : [hook] } } return { exports: scriptExports, options: options } } /***/ }), /* 1 */ /***/ (function(module, exports) { /* MIT License http://www.opensource.org/licenses/mit-license.php Author Tobias Koppers @sokra */ // css base code, injected by the css-loader module.exports = function(useSourceMap) { var list = []; // return the list of modules as css string list.toString = function toString() { return this.map(function (item) { var content = cssWithMappingToString(item, useSourceMap); if(item[2]) { return "@media " + item[2] + "{" + content + "}"; } else { return content; } }).join(""); }; // import a list of modules into the list list.i = function(modules, mediaQuery) { if(typeof modules === "string") modules = [[null, modules, ""]]; var alreadyImportedModules = {}; for(var i = 0; i < this.length; i++) { var id = this[i][0]; if(typeof id === "number") alreadyImportedModules[id] = true; } for(i = 0; i < modules.length; i++) { var item = modules[i]; // skip already imported module // this implementation is not 100% perfect for weird media query combinations // when a module is imported multiple times with different media queries. // I hope this will never occur (Hey this way we have smaller bundles) if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { if(mediaQuery && !item[2]) { item[2] = mediaQuery; } else if(mediaQuery) { item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; } list.push(item); } } }; return list; }; function cssWithMappingToString(item, useSourceMap) { var content = item[1] || ''; var cssMapping = item[3]; if (!cssMapping) { return content; } if (useSourceMap && typeof btoa === 'function') { var sourceMapping = toComment(cssMapping); var sourceURLs = cssMapping.sources.map(function (source) { return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */' }); return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); } return [content].join('\n'); } // Adapted from convert-source-map (MIT) function toComment(sourceMap) { // eslint-disable-next-line no-undef var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))); var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64; return '/*# ' + data + ' */'; } /***/ }), /* 2 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony export (immutable) */ __webpack_exports__["default"] = addStylesClient; /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__listToStyles__ = __webpack_require__(18); /* MIT License http://www.opensource.org/licenses/mit-license.php Author Tobias Koppers @sokra Modified by Evan You @yyx990803 */ var hasDocument = typeof document !== 'undefined' if (typeof DEBUG !== 'undefined' && DEBUG) { if (!hasDocument) { throw new Error( 'vue-style-loader cannot be used in a non-browser environment. ' + "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment." ) } } /* type StyleObject = { id: number; parts: Array<StyleObjectPart> } type StyleObjectPart = { css: string; media: string; sourceMap: ?string } */ var stylesInDom = {/* [id: number]: { id: number, refs: number, parts: Array<(obj?: StyleObjectPart) => void> } */} var head = hasDocument && (document.head || document.getElementsByTagName('head')[0]) var singletonElement = null var singletonCounter = 0 var isProduction = false var noop = function () {} var options = null var ssrIdKey = 'data-vue-ssr-id' // Force single-tag solution on IE6-9, which has a hard limit on the # of <style> // tags it will allow on a page var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase()) function addStylesClient (parentId, list, _isProduction, _options) { isProduction = _isProduction options = _options || {} var styles = Object(__WEBPACK_IMPORTED_MODULE_0__listToStyles__["a" /* default */])(parentId, list) addStylesToDom(styles) return function update (newList) { var mayRemove = [] for (var i = 0; i < styles.length; i++) { var item = styles[i] var domStyle = stylesInDom[item.id] domStyle.refs-- mayRemove.push(domStyle) } if (newList) { styles = Object(__WEBPACK_IMPORTED_MODULE_0__listToStyles__["a" /* default */])(parentId, newList) addStylesToDom(styles) } else { styles = [] } for (var i = 0; i < mayRemove.length; i++) { var domStyle = mayRemove[i] if (domStyle.refs === 0) { for (var j = 0; j < domStyle.parts.length; j++) { domStyle.parts[j]() } delete stylesInDom[domStyle.id] } } } } function addStylesToDom (styles /* Array<StyleObject> */) { for (var i = 0; i < styles.length; i++) { var item = styles[i] var domStyle = stylesInDom[item.id] if (domStyle) { domStyle.refs++ for (var j = 0; j < domStyle.parts.length; j++) { domStyle.parts[j](item.parts[j]) } for (; j < item.parts.length; j++) { domStyle.parts.push(addStyle(item.parts[j])) } if (domStyle.parts.length > item.parts.length) { domStyle.parts.length = item.parts.length } } else { var parts = [] for (var j = 0; j < item.parts.length; j++) { parts.push(addStyle(item.parts[j])) } stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts } } } } function createStyleElement () { var styleElement = document.createElement('style') styleElement.type = 'text/css' head.appendChild(styleElement) return styleElement } function addStyle (obj /* StyleObjectPart */) { var update, remove var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]') if (styleElement) { if (isProduction) { // has SSR styles and in production mode. // simply do nothing. return noop } else { // has SSR styles but in dev mode. // for some reason Chrome can't handle source map in server-rendered // style tags - source maps in <style> only works if the style tag is // created and inserted dynamically. So we remove the server rendered // styles and inject new ones. styleElement.parentNode.removeChild(styleElement) } } if (isOldIE) { // use singleton mode for IE9. var styleIndex = singletonCounter++ styleElement = singletonElement || (singletonElement = createStyleElement()) update = applyToSingletonTag.bind(null, styleElement, styleIndex, false) remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true) } else { // use multi-style-tag mode in all other cases styleElement = createStyleElement() update = applyToTag.bind(null, styleElement) remove = function () { styleElement.parentNode.removeChild(styleElement) } } update(obj) return function updateStyle (newObj /* StyleObjectPart */) { if (newObj) { if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) { return } update(obj = newObj) } else { remove() } } } var replaceText = (function () { var textStore = [] return function (index, replacement) { textStore[index] = replacement return textStore.filter(Boolean).join('\n') } })() function applyToSingletonTag (styleElement, index, remove, obj) { var css = remove ? '' : obj.css if (styleElement.styleSheet) { styleElement.styleSheet.cssText = replaceText(index, css) } else { var cssNode = document.createTextNode(css) var childNodes = styleElement.childNodes if (childNodes[index]) styleElement.removeChild(childNodes[index]) if (childNodes.length) { styleElement.insertBefore(cssNode, childNodes[index]) } else { styleElement.appendChild(cssNode) } } } function applyToTag (styleElement, obj) { var css = obj.css var media = obj.media var sourceMap = obj.sourceMap if (media) { styleElement.setAttribute('media', media) } if (options.ssrId) { styleElement.setAttribute(ssrIdKey, obj.id) } if (sourceMap) { // https://developer.chrome.com/devtools/docs/javascript-debugging // this makes source maps inside style tags work properly in Chrome css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */' // http://stackoverflow.com/a/26603875 css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */' } if (styleElement.styleSheet) { styleElement.styleSheet.cssText = css } else { while (styleElement.firstChild) { styleElement.removeChild(styleElement.firstChild) } styleElement.appendChild(document.createTextNode(css)) } } /***/ }), /* 3 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_aplayer_iconbutton_vue__ = __webpack_require__(7); /* unused harmony namespace reexport */ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_46b44206_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_aplayer_iconbutton_vue__ = __webpack_require__(46); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__ = __webpack_require__(0); var disposed = false function injectStyle (context) { if (disposed) return __webpack_require__(25) } /* script */ /* template */ /* template functional */ var __vue_template_functional__ = false /* styles */ var __vue_styles__ = injectStyle /* scopeId */ var __vue_scopeId__ = null /* moduleIdentifier (server only) */ var __vue_module_identifier__ = null var Component = Object(__WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__["a" /* default */])( __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_aplayer_iconbutton_vue__["a" /* default */], __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_46b44206_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_aplayer_iconbutton_vue__["a" /* render */], __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_46b44206_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_aplayer_iconbutton_vue__["b" /* staticRenderFns */], __vue_template_functional__, __vue_styles__, __vue_scopeId__, __vue_module_identifier__ ) Component.options.__file = "src\\components\\aplayer-iconbutton.vue" /* hot reload */ if (false) {(function () { var hotAPI = require("vue-hot-reload-api") hotAPI.install(require("vue"), false) if (!hotAPI.compatible) return module.hot.accept() if (!module.hot.data) { hotAPI.createRecord("data-v-46b44206", Component.options) } else { hotAPI.reload("data-v-46b44206", Component.options) } module.hot.dispose(function (data) { disposed = true }) })()} /* harmony default export */ __webpack_exports__["a"] = (Component.exports); /***/ }), /* 4 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (immutable) */ __webpack_exports__["c"] = parseLrc; /* harmony export (immutable) */ __webpack_exports__["d"] = versionCompare; /* harmony export (immutable) */ __webpack_exports__["e"] = warn; /* harmony export (immutable) */ __webpack_exports__["a"] = deprecatedProp; /* harmony export (immutable) */ __webpack_exports__["b"] = getElementViewLeft; /* unused harmony export getElementViewTop */ 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"); } }; }(); /** * Parse lrc, suppose multiple time tag * @see https://github.com/MoePlayer/APlayer/blob/master/src/js/lrc.js#L83 * @author DIYgod(https://github.com/DIYgod) * * @param {String} lrc_s - Format: * [mm:ss]lyric * [mm:ss.xx]lyric * [mm:ss.xxx]lyric * [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric * [mm:ss.xx]<mm:ss.xx>lyric * * @return {String} [[time, text], [time, text], [time, text], ...] */ function parseLrc(lrc_s) { if (lrc_s) { lrc_s = lrc_s.replace(/([^\]^\n])\[/g, function (match, p1) { return p1 + '\n['; }); var lyric = lrc_s.split('\n'); var lrc = []; var lyricLen = lyric.length; for (var i = 0; i < lyricLen; i++) { // match lrc time var lrcTimes = lyric[i].match(/\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g); // match lrc text var lrcText = lyric[i].replace(/.*\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g, '').replace(/<(\d{2}):(\d{2})(\.(\d{2,3}))?>/g, '').replace(/^\s+|\s+$/g, ''); if (lrcTimes) { // handle multiple time tag var timeLen = lrcTimes.length; for (var j = 0; j < timeLen; j++) { var oneTime = /\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/.exec(lrcTimes[j]); var min2sec = oneTime[1] * 60; var sec2sec = parseInt(oneTime[2]); var msec2sec = oneTime[4] ? parseInt(oneTime[4]) / ((oneTime[4] + '').length === 2 ? 100 : 1000) : 0; var lrcTime = min2sec + sec2sec + msec2sec; lrc.push([lrcTime, lrcText]); } } } // sort by time lrc.sort(function (a, b) { return a[0] - b[0]; }); return lrc; } else { return []; } } /** * Compare two semantic versions(major.minor.patch) */ function versionCompare(semantic1, semantic2) { if (semantic1 === semantic2) { return 0; } var _semantic1$split$map = semantic1.split('.').map(Number), _semantic1$split$map2 = _slicedToArray(_semantic1$split$map, 3), major1 = _semantic1$split$map2[0], minor1 = _semantic1$split$map2[1], patch1 = _semantic1$split$map2[2]; var _semantic2$split$map = semantic2.split('.').map(Number), _semantic2$split$map2 = _slicedToArray(_semantic2$split$map, 3), major2 = _semantic2$split$map2[0], minor2 = _semantic2$split$map2[1], patch2 = _semantic2$split$map2[2]; if (major1 > major2) { return 1; } else if (major1 === major2) { if (minor1 > minor2) { return 1; } else if (minor1 === minor2) { if (patch1 > patch2) { return 1; } } } return -1; } function warn(message) { return console.warn('[Vue-APlayer] ' + message); } function deprecatedProp(name, sinceVersion, alternative) { return warn('\'' + name + '\' is deprecated since v' + sinceVersion + ', and will be removed in future releases, use \'' + alternative + '\' instead'); } function getElementViewLeft(element) { var actualLeft = element.offsetLeft; var current = element.offsetParent; var elementScrollLeft = void 0; while (current !== null) { actualLeft += current.offsetLeft; current = current.offsetParent; } elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft; return actualLeft - elementScrollLeft; } function getElementViewTop(element) { var actualTop = element.offsetTop; var current = element.offsetParent; var elementScrollTop = void 0; while (current !== null) { actualTop += current.offsetTop; current = current.offsetParent; } elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop; return actualTop - elementScrollTop; } /***/ }), /* 5 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(19); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_vue__); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__components_aplayer_thumbnail_vue__ = __webpack_require__(20); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__components_aplayer_list_vue__ = __webpack_require__(48); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__components_aplayer_controller_vue__ = __webpack_require__(52); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__components_aplayer_lrc_vue__ = __webpack_require__(64); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__utils__ = __webpack_require__(4); 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"); } }; }(); function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // var versionBadgePrinted = false; var canUseSync = Object(__WEBPACK_IMPORTED_MODULE_5__utils__["d" /* versionCompare */])(__WEBPACK_IMPORTED_MODULE_0_vue___default.a.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: __WEBPACK_IMPORTED_MODULE_1__components_aplayer_thumbnail_vue__["a" /* default */], Controls: __WEBPACK_IMPORTED_MODULE_3__components_aplayer_controller_vue__["a" /* default */], MusicList: __WEBPACK_IMPORTED_MODULE_2__components_aplayer_list_vue__["a" /* default */], Lyrics: __WEBPACK_IMPORTED_MODULE_4__components_aplayer_lrc_vue__["a" /* default */] }, props: { music: { type: Object, required: true, validator: function validator(song) { if (song.url) { Object(__WEBPACK_IMPORTED_MODULE_5__utils__["a" /* deprecatedProp */])('music.url', '1.4.0', 'music.src'); } if (song.author) { Object(__WEBPACK_IMPORTED_MODULE_5__utils__["a" /* deprecatedProp */])('music.author', '1.4.1', 'music.artist'); } return song.src || song.url; } }, 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 }, // deprecated props /** * @deprecated since 1.1.2, use listMaxHeight instead */ listmaxheight: { type: String, validator: function validator(value) { if (value) { Object(__WEBPACK_IMPORTED_MODULE_5__utils__["a" /* deprecatedProp */])('listmaxheight', '1.1.2', 'listMaxHeight'); } return true; } }, /** * @deprecated since 1.1.2, use mini instead */ narrow: { type: Boolean, default: false, validator: function validator(value) { if (value) { Object(__WEBPACK_IMPORTED_MODULE_5__utils__["a" /* deprecatedProp */])('narrow', '1.1.2', 'mini'); } return true; } }, /** * @deprecated since 1.2.2 */ showlrc: { type: Boolean, default: false, validator: function validator(value) { if (value) { Object(__WEBPACK_IMPORTED_MODULE_5__utils__["a" /* deprecatedProp */])('showlrc', '1.2.2', 'showLrc'); } return true; } } /** * @deprecated and REMOVED since 1.5.0 */ // mode: { // type: String, // default: 'circulation', // validator (value) { // if (value) { // deprecatedProp('mode', '1.5.0', 'shuffle and repeat') // } // return true // } // }, }, 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: [] }; }, 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; } }, // compatible for deprecated props isMiniMode: function isMiniMode() { return this.mini || this.narrow; }, shouldShowLrc: function shouldShowLrc() { return this.showLrc || this.showlrc; }, // 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 "production " !== 'production' && this.controls && !this.isMiniMode; }, // useful floatStyleObj: function floatStyleObj() { // transform: translate(floatOffsetLeft, floatOffsetY) return { transform: 'translate(' + this.floatOffsetLeft + 'px, ' + this.floatOffsetTop + 'px)', webkitTransform: 'translate(' + this.floatOffsetLeft + 'px, ' + this.floatOffsetTop + 'px)' }; }, currentPicStyleObj: function currentPicStyleObj() { if (this.currentMusic && this.currentMusic.pic) { return { backgroundImage: 'url(' + 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(); } }, 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(__WEBPACK_IMPORTED_MODULE_5__utils__["e" /* 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 (!isNaN(this.audio.duration)) { this.audio.currentTime = this.audio.duration * val; } }, onProgressDragging: function onProgressDragging(val) { if (isNaN(this.audio.duration)) { this.playStat.playedTime = 0; } else { this.audio.currentTime = this.audio.duration * val; } }, onProgressDragEnd: function onProgressDragEnd(val) { 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 = [].concat(_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; } else { 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.addEventListener('waiting', this.onAudioWaiting); this.audio.addEventListener('canplay', this.onAudioCanplay); this.audio.addEventListener('progress', this.onAudioProgress); this.audio.addEventListener('durationchange', this.onAudioDurationChange); this.audio.addEventListener('seeking', this.onAudioSeeking); this.audio.addEventListener('seeked', this.onAudioSeeked); this.audio.addEventListener('timeupdate', this.onAudioTimeUpdate); this.audio.addEventListener('volumechange', this.onAudioVolumeChange); this.audio.addEventListener('ended', this.onAudioEnded); if (this.currentMusic) { this.audio.src = this.currentMusic.src || this.currentMusic.url; } }, setSelfAdaptingTheme: function setSelfAdaptingTheme() { var _this5 = this; // auto theme according to current music cover image if ((this.currentMusic.theme || this.theme) === 'pic') { var pic = this.currentMusic.pic; // use cache if (picThemeCache[pic]) { this.selfAdaptingTheme = picThemeCache[pic]; } else { try { new ColorThief().getColorAsync(pic, function (_ref3) { var _ref4 = _slicedToArray(_ref3, 3), r = _ref4[0], g = _ref4[1], b = _ref4[2]; picThemeCache[pic] = 'rgb(' + r + ', ' + g + ', ' + b + ')'; _this5.selfAdaptingTheme = 'rgb(' + r + ', ' + g + ', ' + b + ')'; }); } catch (e) { Object(__WEBPACK_IMPORTED_MODULE_5__utils__["e" /* warn */])('color-thief is required to support self-adapting theme'); } } } else { this.selfAdaptingTheme = null; } } }, watch: { music: function music(_music) { this.internalMusic = _music; }, currentMusic: { handler: function handler(music) { // async this.setSelfAdaptingTheme(); var src = music.src || music.url; // HLS support if (/\.m3u8(?=(#|\?|$))/.test(src)) { if (this.audio.canPlayType('application/x-mpegURL') || this.audio.canPlayType('application/vnd.apple.mpegURL')) { this.audio.src = src; } else { try { var Hls = __webpack_require__(68); if (Hls.isSupported()) { if (!this.hls) { this.hls = new Hls(); } this.hls.loadSource(src); this.hls.attachMedia(this.audio); } else { Object(__WEBPACK_IMPORTED_MODULE_5__utils__["e" /* warn */])('HLS is not supported on your browser'); this.audio.src = src; } } catch (e) { Object(__WEBPACK_IMPORTED_MODULE_5__utils__["e" /* warn */])('hls.js is required to support m3u8'); this.audio.src = src; } } } else { this.audio.src = src; } // self-adapting theme color } }, // since 1.4.0 // observe controls, muted, preload, volume shouldShowNativeControls: function shouldShowNativeControls(val) { this.audio.controls = val; }, isAudioMuted: function isAudioMuted(val) { this.audio.muted = val; }, preload: function preload(val) { this.audio.preload = val; }, audioVolume: function audioVolume(val) { this.audio.volume = val; }, // sync muted, volume muted: function muted(val) { this.internalMuted = val; }, volume: function volume(val) { this.internalVolume = val; }, // sync shuffle, repeat shuffle: function shuffle(val) { this.internalShuffle = val; }, repeat: function repeat(val) { this.internalRepeat = val; } }, beforeCreate: function beforeCreate() { if (!VueAPlayer.disableVersionBadge && !versionBadgePrinted) { // version badge console.log('\n\n %c Vue-APlayer ' + "1.6.21" + ' %c vue-aplayer.js.org \n', 'color: #fff; background:#41b883; padding:5px 0;', 'color: #fff; background: #35495e; padding:5px 0;'); versionBadgePrinted = true; } }, created: function created() { this.shuffledList = this.getShuffledList(); }, mounted: function mounted() { this.initAudio(); this.setSelfAdaptingTheme(); if (this.autoplay) this.play(); }, beforeDestroy: function beforeDestroy() { if (activeMutex === this) { activeMutex = null; } if (this.hls) { this.hls.destroy(); } } }; /* harmony default export */ __webpack_exports__["a"] = (VueAPlayer); /***/ }), /* 6 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__aplayer_iconbutton_vue__ = __webpack_require__(3); // // // // // // // // // // // // // // // /* harmony default export */ __webpack_exports__["a"] = ({ components: { IconButton: __WEBPACK_IMPORTED_MODULE_0__aplayer_iconbutton_vue__["a" /* 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(' + 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(e) { document.removeEventListener('mouseup', this.onDocumentMouseUp); document.removeEventListener('mousemove', this.onDocumentMouseMove); this.$emit('dragend'); }, onClick: function onClick() { if (!this.hasMovedSinceMouseDown) { this.$emit('toggleplay'); } } } }); /***/ }), /* 7 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__aplayer_icon_vue__ = __webpack_require__(8); // // // // // // // // // /* harmony default export */ __webpack_exports__["a"] = ({ components: { Icon: __WEBPACK_IMPORTED_MODULE_0__aplayer_icon_vue__["a" /* default */] }, props: ['icon'] }); /***/ }), /* 8 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_aplayer_icon_vue__ = __webpack_require__(9); /* unused harmony namespace reexport */ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_e81cbe58_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_aplayer_icon_vue__ = __webpack_require__(45); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__ = __webpack_require__(0); var disposed = false /* script */ /* template */ /* template functional */ var __vue_template_functional__ = false /* styles */ var __vue_styles__ = null /* scopeI