diff --git a/docs/uncompiled/index.js b/docs/uncompiled/index.js index 1766a92..c719fe4 100644 --- a/docs/uncompiled/index.js +++ b/docs/uncompiled/index.js @@ -171,7 +171,7 @@ class WFPlayer extends (0, _emitterDefault.default) { return instances; } static get version() { - return "2.2.7"; + return "2.2.8"; } static get env() { return "development"; @@ -203,7 +203,11 @@ class WFPlayer extends (0, _emitterDefault.default) { padding: 5, waveScale: 0.8, waveSize: 1, - pixelRatio: Math.ceil(window.devicePixelRatio) + pixelRatio: Math.ceil(window.devicePixelRatio), + waveBorder: false, + waveBorderWidth: 1, + waveBorderColor: "rgba(255, 255, 255, 0.1)", + useAudioContext: false }; } static get scheme() { @@ -233,7 +237,11 @@ class WFPlayer extends (0, _emitterDefault.default) { padding: "number", waveScale: "number", waveSize: "number", - pixelRatio: "number" + pixelRatio: "number", + waveBorder: "boolean", + waveBorderWidth: "number", + waveBorderColor: "string", + useAudioContext: "boolean" }; } constructor(options = {}){ @@ -256,10 +264,14 @@ class WFPlayer extends (0, _emitterDefault.default) { instances.push(this); } get currentTime() { - return this.options.mediaElement ? this.options.mediaElement.currentTime : this._currentTime; + return this.options.mediaElement?.currentTime || this._currentTime; + } + set currentTime(second) { + this._currentTime = (0, _utils.clamp)(second, 0, this.duration); + if (this.options.mediaElement && this.options.mediaElement.currentTime !== this._currentTime) this.options.mediaElement.currentTime = this._currentTime; } get duration() { - return this.options.mediaElement ? this.options.mediaElement.duration : Infinity; + return this.options.mediaElement?.duration || Infinity; } get playing() { const { mediaElement } = this.options; @@ -319,8 +331,23 @@ class WFPlayer extends (0, _emitterDefault.default) { // String Url this.loader.load(target); this.controller.init(); + if (this.options.useAudioContext) { + this.options.mediaElement = null; + this.on("decode:success", (audiobuffer)=>{ + const offlineAudioContext = this.decoder.audioCtx; + const audioBufferSourceNode = offlineAudioContext.createBufferSource(); + audioBufferSourceNode.connect(offlineAudioContext.destination); + audioBufferSourceNode.buffer = audiobuffer; + }); + } return this; } + play() { + return this.options.mediaElement?.play?.(); + } + pause() { + return this.options.mediaElement?.pause?.(); + } getCurrentTimeFromEvent(event) { const { container } = this.options; const { padding, beginTime, gridGap, pixelRatio } = this.drawer.config; @@ -357,8 +384,7 @@ class WFPlayer extends (0, _emitterDefault.default) { seek(second) { (0, _utils.errorHandle)(typeof second === "number", "seek expects to receive number as a parameter."); cancelAnimationFrame(this._seekTimer); - this._currentTime = (0, _utils.clamp)(second, 0, this.duration); - if (this.options.mediaElement && this.options.mediaElement.currentTime !== this._currentTime) this.options.mediaElement.currentTime = this._currentTime; + this.currentTime = second; this.update(); return this; } @@ -370,9 +396,8 @@ class WFPlayer extends (0, _emitterDefault.default) { const diff = clampSecond - this.currentTime; if (diff === 0) return resolve(this); const step = diff / duration / 100; - const { mediaElement } = this.options; const { playing } = this; - if (playing) mediaElement.pause(); + if (playing) this.pause(); (function loop() { this._seekTimer = requestAnimationFrame(()=>{ if (diff > 0 && this.currentTime < clampSecond || diff < 0 && this.currentTime > clampSecond) { @@ -380,7 +405,7 @@ class WFPlayer extends (0, _emitterDefault.default) { if (!this.isDestroy) loop.call(this); } else { this.seek(clampSecond); - if (playing) mediaElement.play(); + if (playing) this.play(); resolve(this); } }); @@ -433,7 +458,7 @@ if (typeof document !== "undefined") { } if (typeof window !== "undefined") window["WFPlayer"] = WFPlayer; -},{"option-validator":"lEoFj","./emitter":"2ZQK0","./events":"jVQIf","./template":"eG0JW","./drawer":"7NL0G","./decoder":"eDdom","./loader":"6Zr4E","./controller":"5fGZE","bundle-text:./style.less":"4SQ8Q","./utils":"5vF3n","@parcel/transformer-js/src/esmodule-helpers.js":"jPXxM"}],"lEoFj":[function(require,module,exports) { +},{"option-validator":"2tbdu","./emitter":"2ZQK0","./events":"jVQIf","./template":"eG0JW","./drawer":"7NL0G","./decoder":"eDdom","./loader":"6Zr4E","./controller":"5fGZE","bundle-text:./style.less":"fVJDJ","./utils":"5vF3n","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"2tbdu":[function(require,module,exports) { !function(r, t) { module.exports = t(); }(this, function() { @@ -616,7 +641,7 @@ class Emitter { } exports.default = Emitter; -},{"@parcel/transformer-js/src/esmodule-helpers.js":"jPXxM"}],"jPXxM":[function(require,module,exports) { +},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"5dUr6":[function(require,module,exports) { exports.interopDefault = function(a) { return a && a.__esModule ? a : { default: a @@ -629,7 +654,7 @@ exports.defineInteropFlag = function(a) { }; exports.exportAll = function(source, dest) { Object.keys(source).forEach(function(key) { - if (key === "default" || key === "__esModule" || dest.hasOwnProperty(key)) return; + if (key === "default" || key === "__esModule" || Object.prototype.hasOwnProperty.call(dest, key)) return; Object.defineProperty(dest, key, { enumerable: true, get: function() { @@ -667,7 +692,7 @@ class Events { } exports.default = Events; -},{"@parcel/transformer-js/src/esmodule-helpers.js":"jPXxM"}],"eG0JW":[function(require,module,exports) { +},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"eG0JW":[function(require,module,exports) { var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js"); parcelHelpers.defineInteropFlag(exports); var _utils = require("./utils"); @@ -714,7 +739,7 @@ class Template { } exports.default = Template; -},{"./utils":"5vF3n","@parcel/transformer-js/src/esmodule-helpers.js":"jPXxM"}],"5vF3n":[function(require,module,exports) { +},{"./utils":"5vF3n","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"5vF3n":[function(require,module,exports) { var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js"); parcelHelpers.defineInteropFlag(exports); parcelHelpers.export(exports, "WFPlayerError", ()=>WFPlayerError); @@ -763,7 +788,7 @@ function removeClass(el, className) { return el.classList.remove(className); } -},{"@parcel/transformer-js/src/esmodule-helpers.js":"jPXxM"}],"7NL0G":[function(require,module,exports) { +},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"7NL0G":[function(require,module,exports) { var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js"); parcelHelpers.defineInteropFlag(exports); var _utils = require("./utils"); @@ -844,8 +869,8 @@ class Drawer { } exports.default = Drawer; -},{"./utils":"5vF3n","bundle-text:./worker":"hhCcS","./worker":"lPZ5X","@parcel/transformer-js/src/esmodule-helpers.js":"jPXxM"}],"hhCcS":[function(require,module,exports) { -module.exports = "// modules are defined as an array\n// [ module function, map of requires ]\n//\n// map of requires is short require name -> numeric require\n//\n// anything defined in a previous bundle is accessed via the\n// orig method which is the require for previous bundles\n\n(function (modules, entry, mainEntry, parcelRequireName, globalName) {\n /* eslint-disable no-undef */\n var globalObject =\n typeof globalThis !== 'undefined'\n ? globalThis\n : typeof self !== 'undefined'\n ? self\n : typeof window !== 'undefined'\n ? window\n : typeof global !== 'undefined'\n ? global\n : {};\n /* eslint-enable no-undef */\n\n // Save the require from previous bundle to this closure if any\n var previousRequire =\n typeof globalObject[parcelRequireName] === 'function' &&\n globalObject[parcelRequireName];\n\n var cache = previousRequire.cache || {};\n // Do not use `require` to prevent Webpack from trying to bundle this call\n var nodeRequire =\n typeof module !== 'undefined' &&\n typeof module.require === 'function' &&\n module.require.bind(module);\n\n function newRequire(name, jumped) {\n if (!cache[name]) {\n if (!modules[name]) {\n // if we cannot find the module within our internal map or\n // cache jump to the current global require ie. the last bundle\n // that was added to the page.\n var currentRequire =\n typeof globalObject[parcelRequireName] === 'function' &&\n globalObject[parcelRequireName];\n if (!jumped && currentRequire) {\n return currentRequire(name, true);\n }\n\n // If there are other bundles on this page the require from the\n // previous one is saved to 'previousRequire'. Repeat this as\n // many times as there are bundles until the module is found or\n // we exhaust the require chain.\n if (previousRequire) {\n return previousRequire(name, true);\n }\n\n // Try the node require function if it exists.\n if (nodeRequire && typeof name === 'string') {\n return nodeRequire(name);\n }\n\n var err = new Error(\"Cannot find module '\" + name + \"'\");\n err.code = 'MODULE_NOT_FOUND';\n throw err;\n }\n\n localRequire.resolve = resolve;\n localRequire.cache = {};\n\n var module = (cache[name] = new newRequire.Module(name));\n\n modules[name][0].call(\n module.exports,\n localRequire,\n module,\n module.exports,\n this\n );\n }\n\n return cache[name].exports;\n\n function localRequire(x) {\n var res = localRequire.resolve(x);\n return res === false ? {} : newRequire(res);\n }\n\n function resolve(x) {\n var id = modules[name][1][x];\n return id != null ? id : x;\n }\n }\n\n function Module(moduleName) {\n this.id = moduleName;\n this.bundle = newRequire;\n this.exports = {};\n }\n\n newRequire.isParcelRequire = true;\n newRequire.Module = Module;\n newRequire.modules = modules;\n newRequire.cache = cache;\n newRequire.parent = previousRequire;\n newRequire.register = function (id, exports) {\n modules[id] = [\n function (require, module) {\n module.exports = exports;\n },\n {},\n ];\n };\n\n Object.defineProperty(newRequire, 'root', {\n get: function () {\n return globalObject[parcelRequireName];\n },\n });\n\n globalObject[parcelRequireName] = newRequire;\n\n for (var i = 0; i < entry.length; i++) {\n newRequire(entry[i]);\n }\n\n if (mainEntry) {\n // Expose entry point to Node, AMD or browser globals\n // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js\n var mainExports = newRequire(mainEntry);\n\n // CommonJS\n if (typeof exports === 'object' && typeof module !== 'undefined') {\n module.exports = mainExports;\n\n // RequireJS\n } else if (typeof define === 'function' && define.amd) {\n define(function () {\n return mainExports;\n });\n\n //