1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | (function webpackUniversalModuleDefinition(root, factory) {
|
7 | if(typeof exports === 'object' && typeof module === 'object')
|
8 | module.exports = factory();
|
9 | else if(typeof define === 'function' && define.amd)
|
10 | define("WaveSurfer", [], factory);
|
11 | else if(typeof exports === 'object')
|
12 | exports["WaveSurfer"] = factory();
|
13 | else
|
14 | root["WaveSurfer"] = factory();
|
15 | })(self, () => {
|
16 | return (() => {
|
17 | var __webpack_modules__ = ({
|
18 |
|
19 | "./src/drawer.canvasentry.js":
|
20 |
|
21 |
|
22 |
|
23 | ((module, exports, __webpack_require__) => {
|
24 |
|
25 | "use strict";
|
26 |
|
27 |
|
28 | Object.defineProperty(exports, "__esModule", ({
|
29 | value: true
|
30 | }));
|
31 | exports["default"] = void 0;
|
32 | var _style = _interopRequireDefault(__webpack_require__( "./src/util/style.js"));
|
33 | var _getId = _interopRequireDefault(__webpack_require__( "./src/util/get-id.js"));
|
34 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
35 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
36 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
37 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 | var CanvasEntry = function () {
|
46 | function CanvasEntry() {
|
47 | _classCallCheck(this, CanvasEntry);
|
48 | |
49 |
|
50 |
|
51 |
|
52 |
|
53 | this.wave = null;
|
54 | |
55 |
|
56 |
|
57 |
|
58 |
|
59 | this.waveCtx = null;
|
60 | |
61 |
|
62 |
|
63 |
|
64 |
|
65 | this.progress = null;
|
66 | |
67 |
|
68 |
|
69 |
|
70 |
|
71 | this.progressCtx = null;
|
72 | |
73 |
|
74 |
|
75 |
|
76 |
|
77 | this.start = 0;
|
78 | |
79 |
|
80 |
|
81 |
|
82 |
|
83 | this.end = 1;
|
84 | |
85 |
|
86 |
|
87 |
|
88 |
|
89 | this.id = (0, _getId.default)(typeof this.constructor.name !== 'undefined' ? this.constructor.name.toLowerCase() + '_' : 'canvasentry_');
|
90 | |
91 |
|
92 |
|
93 |
|
94 |
|
95 | this.canvasContextAttributes = {};
|
96 | }
|
97 |
|
98 | |
99 |
|
100 |
|
101 |
|
102 |
|
103 | _createClass(CanvasEntry, [{
|
104 | key: "initWave",
|
105 | value: function initWave(element) {
|
106 | this.wave = element;
|
107 | this.waveCtx = this.wave.getContext('2d', this.canvasContextAttributes);
|
108 | }
|
109 |
|
110 | |
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 | }, {
|
117 | key: "initProgress",
|
118 | value: function initProgress(element) {
|
119 | this.progress = element;
|
120 | this.progressCtx = this.progress.getContext('2d', this.canvasContextAttributes);
|
121 | }
|
122 |
|
123 | |
124 |
|
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 | }, {
|
132 | key: "updateDimensions",
|
133 | value: function updateDimensions(elementWidth, totalWidth, width, height) {
|
134 |
|
135 |
|
136 | this.start = this.wave.offsetLeft / totalWidth || 0;
|
137 | this.end = this.start + elementWidth / totalWidth;
|
138 |
|
139 |
|
140 | this.wave.width = width;
|
141 | this.wave.height = height;
|
142 | var elementSize = {
|
143 | width: elementWidth + 'px'
|
144 | };
|
145 | (0, _style.default)(this.wave, elementSize);
|
146 | if (this.hasProgressCanvas) {
|
147 |
|
148 | this.progress.width = width;
|
149 | this.progress.height = height;
|
150 | (0, _style.default)(this.progress, elementSize);
|
151 | }
|
152 | }
|
153 |
|
154 | |
155 |
|
156 |
|
157 | }, {
|
158 | key: "clearWave",
|
159 | value: function clearWave() {
|
160 |
|
161 | this.waveCtx.clearRect(0, 0, this.waveCtx.canvas.width, this.waveCtx.canvas.height);
|
162 |
|
163 |
|
164 | if (this.hasProgressCanvas) {
|
165 | this.progressCtx.clearRect(0, 0, this.progressCtx.canvas.width, this.progressCtx.canvas.height);
|
166 | }
|
167 | }
|
168 |
|
169 | |
170 |
|
171 |
|
172 |
|
173 |
|
174 |
|
175 |
|
176 | }, {
|
177 | key: "setFillStyles",
|
178 | value: function setFillStyles(waveColor, progressColor) {
|
179 | this.waveCtx.fillStyle = this.getFillStyle(this.waveCtx, waveColor);
|
180 | if (this.hasProgressCanvas) {
|
181 | this.progressCtx.fillStyle = this.getFillStyle(this.progressCtx, progressColor);
|
182 | }
|
183 | }
|
184 |
|
185 | |
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 | }, {
|
201 | key: "getFillStyle",
|
202 | value: function getFillStyle(ctx, color) {
|
203 | if (typeof color == 'string' || color instanceof CanvasGradient) {
|
204 | return color;
|
205 | }
|
206 | var waveGradient = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
|
207 | color.forEach(function (value, index) {
|
208 | return waveGradient.addColorStop(index / color.length, value);
|
209 | });
|
210 | return waveGradient;
|
211 | }
|
212 |
|
213 | |
214 |
|
215 |
|
216 |
|
217 |
|
218 | }, {
|
219 | key: "applyCanvasTransforms",
|
220 | value: function applyCanvasTransforms(vertical) {
|
221 | if (vertical) {
|
222 |
|
223 | this.waveCtx.setTransform(0, 1, 1, 0, 0, 0);
|
224 | if (this.hasProgressCanvas) {
|
225 | this.progressCtx.setTransform(0, 1, 1, 0, 0, 0);
|
226 | }
|
227 | }
|
228 | }
|
229 |
|
230 | |
231 |
|
232 |
|
233 |
|
234 |
|
235 |
|
236 |
|
237 |
|
238 |
|
239 | }, {
|
240 | key: "fillRects",
|
241 | value: function fillRects(x, y, width, height, radius) {
|
242 | this.fillRectToContext(this.waveCtx, x, y, width, height, radius);
|
243 | if (this.hasProgressCanvas) {
|
244 | this.fillRectToContext(this.progressCtx, x, y, width, height, radius);
|
245 | }
|
246 | }
|
247 |
|
248 | |
249 |
|
250 |
|
251 |
|
252 |
|
253 |
|
254 |
|
255 |
|
256 |
|
257 |
|
258 | }, {
|
259 | key: "fillRectToContext",
|
260 | value: function fillRectToContext(ctx, x, y, width, height, radius) {
|
261 | if (!ctx) {
|
262 | return;
|
263 | }
|
264 | if (radius) {
|
265 | this.drawRoundedRect(ctx, x, y, width, height, radius);
|
266 | } else {
|
267 | ctx.fillRect(x, y, width, height);
|
268 | }
|
269 | }
|
270 |
|
271 | |
272 |
|
273 |
|
274 |
|
275 |
|
276 |
|
277 |
|
278 |
|
279 |
|
280 |
|
281 |
|
282 |
|
283 |
|
284 | }, {
|
285 | key: "drawRoundedRect",
|
286 | value: function drawRoundedRect(ctx, x, y, width, height, radius) {
|
287 | if (height === 0) {
|
288 | return;
|
289 | }
|
290 |
|
291 |
|
292 | if (height < 0) {
|
293 | height *= -1;
|
294 | y -= height;
|
295 | }
|
296 | ctx.beginPath();
|
297 | ctx.moveTo(x + radius, y);
|
298 | ctx.lineTo(x + width - radius, y);
|
299 | ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
|
300 | ctx.lineTo(x + width, y + height - radius);
|
301 | ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
|
302 | ctx.lineTo(x + radius, y + height);
|
303 | ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
|
304 | ctx.lineTo(x, y + radius);
|
305 | ctx.quadraticCurveTo(x, y, x + radius, y);
|
306 | ctx.closePath();
|
307 | ctx.fill();
|
308 | }
|
309 |
|
310 | |
311 |
|
312 |
|
313 |
|
314 |
|
315 |
|
316 |
|
317 |
|
318 |
|
319 |
|
320 |
|
321 |
|
322 | }, {
|
323 | key: "drawLines",
|
324 | value: function drawLines(peaks, absmax, halfH, offsetY, start, end) {
|
325 | this.drawLineToContext(this.waveCtx, peaks, absmax, halfH, offsetY, start, end);
|
326 | if (this.hasProgressCanvas) {
|
327 | this.drawLineToContext(this.progressCtx, peaks, absmax, halfH, offsetY, start, end);
|
328 | }
|
329 | }
|
330 |
|
331 | |
332 |
|
333 |
|
334 |
|
335 |
|
336 |
|
337 |
|
338 |
|
339 |
|
340 |
|
341 |
|
342 |
|
343 |
|
344 | }, {
|
345 | key: "drawLineToContext",
|
346 | value: function drawLineToContext(ctx, peaks, absmax, halfH, offsetY, start, end) {
|
347 | if (!ctx) {
|
348 | return;
|
349 | }
|
350 | var length = peaks.length / 2;
|
351 | var first = Math.round(length * this.start);
|
352 |
|
353 |
|
354 |
|
355 | var last = Math.round(length * this.end) + 1;
|
356 | var canvasStart = first;
|
357 | var canvasEnd = last;
|
358 | var scale = this.wave.width / (canvasEnd - canvasStart - 1);
|
359 |
|
360 |
|
361 | var halfOffset = halfH + offsetY;
|
362 | var absmaxHalf = absmax / halfH;
|
363 | ctx.beginPath();
|
364 | ctx.moveTo((canvasStart - first) * scale, halfOffset);
|
365 | ctx.lineTo((canvasStart - first) * scale, halfOffset - Math.round((peaks[2 * canvasStart] || 0) / absmaxHalf));
|
366 | var i, peak, h;
|
367 | for (i = canvasStart; i < canvasEnd; i++) {
|
368 | peak = peaks[2 * i] || 0;
|
369 | h = Math.round(peak / absmaxHalf);
|
370 | ctx.lineTo((i - first) * scale + this.halfPixel, halfOffset - h);
|
371 | }
|
372 |
|
373 |
|
374 |
|
375 | var j = canvasEnd - 1;
|
376 | for (j; j >= canvasStart; j--) {
|
377 | peak = peaks[2 * j + 1] || 0;
|
378 | h = Math.round(peak / absmaxHalf);
|
379 | ctx.lineTo((j - first) * scale + this.halfPixel, halfOffset - h);
|
380 | }
|
381 | ctx.lineTo((canvasStart - first) * scale, halfOffset - Math.round((peaks[2 * canvasStart + 1] || 0) / absmaxHalf));
|
382 | ctx.closePath();
|
383 | ctx.fill();
|
384 | }
|
385 |
|
386 | |
387 |
|
388 |
|
389 | }, {
|
390 | key: "destroy",
|
391 | value: function destroy() {
|
392 | this.waveCtx = null;
|
393 | this.wave = null;
|
394 | this.progressCtx = null;
|
395 | this.progress = null;
|
396 | }
|
397 |
|
398 | |
399 |
|
400 |
|
401 |
|
402 |
|
403 |
|
404 |
|
405 |
|
406 |
|
407 |
|
408 |
|
409 |
|
410 |
|
411 | }, {
|
412 | key: "getImage",
|
413 | value: function getImage(format, quality, type) {
|
414 | var _this = this;
|
415 | if (type === 'blob') {
|
416 | return new Promise(function (resolve) {
|
417 | _this.wave.toBlob(resolve, format, quality);
|
418 | });
|
419 | } else if (type === 'dataURL') {
|
420 | return this.wave.toDataURL(format, quality);
|
421 | }
|
422 | }
|
423 | }]);
|
424 | return CanvasEntry;
|
425 | }();
|
426 | exports["default"] = CanvasEntry;
|
427 | module.exports = exports.default;
|
428 |
|
429 | }),
|
430 |
|
431 | "./src/drawer.js":
|
432 |
|
433 |
|
434 |
|
435 | ((module, exports, __webpack_require__) => {
|
436 |
|
437 | "use strict";
|
438 |
|
439 |
|
440 | function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
441 | Object.defineProperty(exports, "__esModule", ({
|
442 | value: true
|
443 | }));
|
444 | exports["default"] = void 0;
|
445 | var util = _interopRequireWildcard(__webpack_require__( "./src/util/index.js"));
|
446 | function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
447 | function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
448 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
449 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
450 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
451 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
452 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
453 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
454 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
455 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
456 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
457 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
458 |
|
459 |
|
460 |
|
461 |
|
462 |
|
463 | var Drawer = function (_util$Observer) {
|
464 | _inherits(Drawer, _util$Observer);
|
465 | var _super = _createSuper(Drawer);
|
466 | |
467 |
|
468 |
|
469 |
|
470 | function Drawer(container, params) {
|
471 | var _this;
|
472 | _classCallCheck(this, Drawer);
|
473 | _this = _super.call(this);
|
474 | _this.container = util.withOrientation(container, params.vertical);
|
475 | |
476 |
|
477 |
|
478 | _this.params = params;
|
479 | |
480 |
|
481 |
|
482 |
|
483 | _this.width = 0;
|
484 | |
485 |
|
486 |
|
487 |
|
488 | _this.height = params.height * _this.params.pixelRatio;
|
489 | _this.lastPos = 0;
|
490 | |
491 |
|
492 |
|
493 |
|
494 | _this.wrapper = null;
|
495 | return _this;
|
496 | }
|
497 |
|
498 | |
499 |
|
500 |
|
501 |
|
502 |
|
503 |
|
504 |
|
505 | _createClass(Drawer, [{
|
506 | key: "style",
|
507 | value: function style(el, styles) {
|
508 | return util.style(el, styles);
|
509 | }
|
510 |
|
511 | |
512 |
|
513 |
|
514 |
|
515 | }, {
|
516 | key: "createWrapper",
|
517 | value: function createWrapper() {
|
518 | this.wrapper = util.withOrientation(this.container.appendChild(document.createElement('wave')), this.params.vertical);
|
519 | this.style(this.wrapper, {
|
520 | display: 'block',
|
521 | position: 'relative',
|
522 | userSelect: 'none',
|
523 | webkitUserSelect: 'none',
|
524 | height: this.params.height + 'px'
|
525 | });
|
526 | if (this.params.fillParent || this.params.scrollParent) {
|
527 | this.style(this.wrapper, {
|
528 | width: '100%',
|
529 | cursor: this.params.hideCursor ? 'none' : 'auto',
|
530 | overflowX: this.params.hideScrollbar ? 'hidden' : 'auto',
|
531 | overflowY: 'hidden'
|
532 | });
|
533 | }
|
534 | this.setupWrapperEvents();
|
535 | }
|
536 |
|
537 | |
538 |
|
539 |
|
540 |
|
541 |
|
542 |
|
543 |
|
544 | }, {
|
545 | key: "handleEvent",
|
546 | value: function handleEvent(e, noPrevent) {
|
547 | !noPrevent && e.preventDefault();
|
548 | var clientX = util.withOrientation(e.targetTouches ? e.targetTouches[0] : e, this.params.vertical).clientX;
|
549 | var bbox = this.wrapper.getBoundingClientRect();
|
550 | var nominalWidth = this.width;
|
551 | var parentWidth = this.getWidth();
|
552 | var progressPixels = this.getProgressPixels(bbox, clientX);
|
553 | var progress;
|
554 | if (!this.params.fillParent && nominalWidth < parentWidth) {
|
555 | progress = progressPixels * (this.params.pixelRatio / nominalWidth) || 0;
|
556 | } else {
|
557 | progress = (progressPixels + this.wrapper.scrollLeft) / this.wrapper.scrollWidth || 0;
|
558 | }
|
559 | return util.clamp(progress, 0, 1);
|
560 | }
|
561 | }, {
|
562 | key: "getProgressPixels",
|
563 | value: function getProgressPixels(wrapperBbox, clientX) {
|
564 | if (this.params.rtl) {
|
565 | return wrapperBbox.right - clientX;
|
566 | } else {
|
567 | return clientX - wrapperBbox.left;
|
568 | }
|
569 | }
|
570 | }, {
|
571 | key: "setupWrapperEvents",
|
572 | value: function setupWrapperEvents() {
|
573 | var _this2 = this;
|
574 | this.wrapper.addEventListener('click', function (e) {
|
575 | var orientedEvent = util.withOrientation(e, _this2.params.vertical);
|
576 | var scrollbarHeight = _this2.wrapper.offsetHeight - _this2.wrapper.clientHeight;
|
577 | if (scrollbarHeight !== 0) {
|
578 |
|
579 | var bbox = _this2.wrapper.getBoundingClientRect();
|
580 | if (orientedEvent.clientY >= bbox.bottom - scrollbarHeight) {
|
581 |
|
582 | return;
|
583 | }
|
584 | }
|
585 | if (_this2.params.interact) {
|
586 | _this2.fireEvent('click', e, _this2.handleEvent(e));
|
587 | }
|
588 | });
|
589 | this.wrapper.addEventListener('dblclick', function (e) {
|
590 | if (_this2.params.interact) {
|
591 | _this2.fireEvent('dblclick', e, _this2.handleEvent(e));
|
592 | }
|
593 | });
|
594 | this.wrapper.addEventListener('scroll', function (e) {
|
595 | return _this2.fireEvent('scroll', e);
|
596 | });
|
597 | }
|
598 |
|
599 | |
600 |
|
601 |
|
602 |
|
603 |
|
604 |
|
605 |
|
606 |
|
607 |
|
608 |
|
609 |
|
610 | }, {
|
611 | key: "drawPeaks",
|
612 | value: function drawPeaks(peaks, length, start, end) {
|
613 | if (!this.setWidth(length)) {
|
614 | this.clearWave();
|
615 | }
|
616 | this.params.barWidth ? this.drawBars(peaks, 0, start, end) : this.drawWave(peaks, 0, start, end);
|
617 | }
|
618 |
|
619 | |
620 |
|
621 |
|
622 | }, {
|
623 | key: "resetScroll",
|
624 | value: function resetScroll() {
|
625 | if (this.wrapper !== null) {
|
626 | this.wrapper.scrollLeft = 0;
|
627 | }
|
628 | }
|
629 |
|
630 | |
631 |
|
632 |
|
633 |
|
634 |
|
635 | }, {
|
636 | key: "recenter",
|
637 | value: function recenter(percent) {
|
638 | var position = this.wrapper.scrollWidth * percent;
|
639 | this.recenterOnPosition(position, true);
|
640 | }
|
641 |
|
642 | |
643 |
|
644 |
|
645 |
|
646 |
|
647 |
|
648 |
|
649 | }, {
|
650 | key: "recenterOnPosition",
|
651 | value: function recenterOnPosition(position, immediate) {
|
652 | var scrollLeft = this.wrapper.scrollLeft;
|
653 | var half = ~~(this.wrapper.clientWidth / 2);
|
654 | var maxScroll = this.wrapper.scrollWidth - this.wrapper.clientWidth;
|
655 | var target = position - half;
|
656 | var offset = target - scrollLeft;
|
657 | if (maxScroll == 0) {
|
658 |
|
659 | return;
|
660 | }
|
661 |
|
662 |
|
663 | if (!immediate && -half <= offset && offset < half) {
|
664 |
|
665 | var rate = this.params.autoCenterRate;
|
666 |
|
667 |
|
668 | rate /= half;
|
669 | rate *= maxScroll;
|
670 | offset = Math.max(-rate, Math.min(rate, offset));
|
671 | target = scrollLeft + offset;
|
672 | }
|
673 |
|
674 |
|
675 | target = Math.max(0, Math.min(maxScroll, target));
|
676 |
|
677 | if (target != scrollLeft) {
|
678 | this.wrapper.scrollLeft = target;
|
679 | }
|
680 | }
|
681 |
|
682 | |
683 |
|
684 |
|
685 |
|
686 |
|
687 | }, {
|
688 | key: "getScrollX",
|
689 | value: function getScrollX() {
|
690 | var x = 0;
|
691 | if (this.wrapper) {
|
692 | var pixelRatio = this.params.pixelRatio;
|
693 | x = Math.round(this.wrapper.scrollLeft * pixelRatio);
|
694 |
|
695 |
|
696 |
|
697 |
|
698 |
|
699 |
|
700 | if (this.params.scrollParent) {
|
701 | var maxScroll = ~~(this.wrapper.scrollWidth * pixelRatio - this.getWidth());
|
702 | x = Math.min(maxScroll, Math.max(0, x));
|
703 | }
|
704 | }
|
705 | return x;
|
706 | }
|
707 |
|
708 | |
709 |
|
710 |
|
711 |
|
712 |
|
713 | }, {
|
714 | key: "getWidth",
|
715 | value: function getWidth() {
|
716 | return Math.round(this.container.clientWidth * this.params.pixelRatio);
|
717 | }
|
718 |
|
719 | |
720 |
|
721 |
|
722 |
|
723 |
|
724 |
|
725 | }, {
|
726 | key: "setWidth",
|
727 | value: function setWidth(width) {
|
728 | if (this.width == width) {
|
729 | return false;
|
730 | }
|
731 | this.width = width;
|
732 | if (this.params.fillParent || this.params.scrollParent) {
|
733 | this.style(this.wrapper, {
|
734 | width: ''
|
735 | });
|
736 | } else {
|
737 | var newWidth = ~~(this.width / this.params.pixelRatio) + 'px';
|
738 | this.style(this.wrapper, {
|
739 | width: newWidth
|
740 | });
|
741 | }
|
742 | this.updateSize();
|
743 | return true;
|
744 | }
|
745 |
|
746 | |
747 |
|
748 |
|
749 |
|
750 |
|
751 |
|
752 | }, {
|
753 | key: "setHeight",
|
754 | value: function setHeight(height) {
|
755 | if (height == this.height) {
|
756 | return false;
|
757 | }
|
758 | this.height = height;
|
759 | this.style(this.wrapper, {
|
760 | height: ~~(this.height / this.params.pixelRatio) + 'px'
|
761 | });
|
762 | this.updateSize();
|
763 | return true;
|
764 | }
|
765 |
|
766 | |
767 |
|
768 |
|
769 |
|
770 |
|
771 | }, {
|
772 | key: "progress",
|
773 | value: function progress(_progress) {
|
774 | var minPxDelta = 1 / this.params.pixelRatio;
|
775 | var pos = Math.round(_progress * this.width) * minPxDelta;
|
776 | if (pos < this.lastPos || pos - this.lastPos >= minPxDelta) {
|
777 | this.lastPos = pos;
|
778 | if (this.params.scrollParent && this.params.autoCenter) {
|
779 | var newPos = ~~(this.wrapper.scrollWidth * _progress);
|
780 | this.recenterOnPosition(newPos, this.params.autoCenterImmediately);
|
781 | }
|
782 | this.updateProgress(pos);
|
783 | }
|
784 | }
|
785 |
|
786 | |
787 |
|
788 |
|
789 | }, {
|
790 | key: "destroy",
|
791 | value: function destroy() {
|
792 | this.unAll();
|
793 | if (this.wrapper) {
|
794 | if (this.wrapper.parentNode == this.container.domElement) {
|
795 | this.container.removeChild(this.wrapper.domElement);
|
796 | }
|
797 | this.wrapper = null;
|
798 | }
|
799 | }
|
800 |
|
801 |
|
802 |
|
803 | |
804 |
|
805 |
|
806 |
|
807 |
|
808 | }, {
|
809 | key: "updateCursor",
|
810 | value: function updateCursor() {}
|
811 |
|
812 | |
813 |
|
814 |
|
815 |
|
816 |
|
817 | }, {
|
818 | key: "updateSize",
|
819 | value: function updateSize() {}
|
820 |
|
821 | |
822 |
|
823 |
|
824 |
|
825 |
|
826 |
|
827 |
|
828 |
|
829 |
|
830 |
|
831 |
|
832 |
|
833 |
|
834 | }, {
|
835 | key: "drawBars",
|
836 | value: function drawBars(peaks, channelIndex, start, end) {}
|
837 |
|
838 | |
839 |
|
840 |
|
841 |
|
842 |
|
843 |
|
844 |
|
845 |
|
846 |
|
847 |
|
848 |
|
849 |
|
850 |
|
851 | }, {
|
852 | key: "drawWave",
|
853 | value: function drawWave(peaks, channelIndex, start, end) {}
|
854 |
|
855 | |
856 |
|
857 |
|
858 |
|
859 |
|
860 | }, {
|
861 | key: "clearWave",
|
862 | value: function clearWave() {}
|
863 |
|
864 | |
865 |
|
866 |
|
867 |
|
868 |
|
869 |
|
870 | }, {
|
871 | key: "updateProgress",
|
872 | value: function updateProgress(position) {}
|
873 | }]);
|
874 | return Drawer;
|
875 | }(util.Observer);
|
876 | exports["default"] = Drawer;
|
877 | module.exports = exports.default;
|
878 |
|
879 | }),
|
880 |
|
881 | "./src/drawer.multicanvas.js":
|
882 |
|
883 |
|
884 |
|
885 | ((module, exports, __webpack_require__) => {
|
886 |
|
887 | "use strict";
|
888 |
|
889 |
|
890 | function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
891 | Object.defineProperty(exports, "__esModule", ({
|
892 | value: true
|
893 | }));
|
894 | exports["default"] = void 0;
|
895 | var _drawer = _interopRequireDefault(__webpack_require__( "./src/drawer.js"));
|
896 | var util = _interopRequireWildcard(__webpack_require__( "./src/util/index.js"));
|
897 | var _drawer2 = _interopRequireDefault(__webpack_require__( "./src/drawer.canvasentry.js"));
|
898 | function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
899 | function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
900 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
901 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
902 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
903 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
904 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
905 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
906 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
907 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
908 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
909 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
910 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
911 |
|
912 |
|
913 |
|
914 |
|
915 |
|
916 |
|
917 |
|
918 | var MultiCanvas = function (_Drawer) {
|
919 | _inherits(MultiCanvas, _Drawer);
|
920 | var _super = _createSuper(MultiCanvas);
|
921 | |
922 |
|
923 |
|
924 |
|
925 | function MultiCanvas(container, params) {
|
926 | var _this;
|
927 | _classCallCheck(this, MultiCanvas);
|
928 | _this = _super.call(this, container, params);
|
929 |
|
930 | |
931 |
|
932 |
|
933 | _this.maxCanvasWidth = params.maxCanvasWidth;
|
934 |
|
935 | |
936 |
|
937 |
|
938 | _this.maxCanvasElementWidth = Math.round(params.maxCanvasWidth / params.pixelRatio);
|
939 |
|
940 | |
941 |
|
942 |
|
943 |
|
944 |
|
945 |
|
946 | _this.hasProgressCanvas = params.waveColor != params.progressColor;
|
947 |
|
948 | |
949 |
|
950 |
|
951 | _this.halfPixel = 0.5 / params.pixelRatio;
|
952 |
|
953 | |
954 |
|
955 |
|
956 |
|
957 |
|
958 | _this.canvases = [];
|
959 |
|
960 | |
961 |
|
962 |
|
963 | _this.progressWave = null;
|
964 |
|
965 | |
966 |
|
967 |
|
968 |
|
969 |
|
970 | _this.EntryClass = _drawer2.default;
|
971 |
|
972 | |
973 |
|
974 |
|
975 |
|
976 |
|
977 | _this.canvasContextAttributes = params.drawingContextAttributes;
|
978 |
|
979 | |
980 |
|
981 |
|
982 |
|
983 |
|
984 |
|
985 | _this.overlap = 2 * Math.ceil(params.pixelRatio / 2);
|
986 |
|
987 | |
988 |
|
989 |
|
990 |
|
991 |
|
992 | _this.barRadius = params.barRadius || 0;
|
993 |
|
994 | |
995 |
|
996 |
|
997 |
|
998 |
|
999 | _this.vertical = params.vertical;
|
1000 | return _this;
|
1001 | }
|
1002 |
|
1003 | |
1004 |
|
1005 |
|
1006 | _createClass(MultiCanvas, [{
|
1007 | key: "init",
|
1008 | value: function init() {
|
1009 | this.createWrapper();
|
1010 | this.createElements();
|
1011 | }
|
1012 |
|
1013 | |
1014 |
|
1015 |
|
1016 |
|
1017 | }, {
|
1018 | key: "createElements",
|
1019 | value: function createElements() {
|
1020 | this.progressWave = util.withOrientation(this.wrapper.appendChild(document.createElement('wave')), this.params.vertical);
|
1021 | this.style(this.progressWave, {
|
1022 | position: 'absolute',
|
1023 | zIndex: 3,
|
1024 | left: 0,
|
1025 | top: 0,
|
1026 | bottom: 0,
|
1027 | overflow: 'hidden',
|
1028 | width: '0',
|
1029 | display: 'none',
|
1030 | boxSizing: 'border-box',
|
1031 | borderRightStyle: 'solid',
|
1032 | pointerEvents: 'none'
|
1033 | });
|
1034 | this.addCanvas();
|
1035 | this.updateCursor();
|
1036 | }
|
1037 |
|
1038 | |
1039 |
|
1040 |
|
1041 | }, {
|
1042 | key: "updateCursor",
|
1043 | value: function updateCursor() {
|
1044 | this.style(this.progressWave, {
|
1045 | borderRightWidth: this.params.cursorWidth + 'px',
|
1046 | borderRightColor: this.params.cursorColor
|
1047 | });
|
1048 | }
|
1049 |
|
1050 | |
1051 |
|
1052 |
|
1053 | }, {
|
1054 | key: "updateSize",
|
1055 | value: function updateSize() {
|
1056 | var _this2 = this;
|
1057 | var totalWidth = Math.round(this.width / this.params.pixelRatio);
|
1058 | var requiredCanvases = Math.ceil(totalWidth / (this.maxCanvasElementWidth + this.overlap));
|
1059 |
|
1060 |
|
1061 | while (this.canvases.length < requiredCanvases) {
|
1062 | this.addCanvas();
|
1063 | }
|
1064 |
|
1065 |
|
1066 | while (this.canvases.length > requiredCanvases) {
|
1067 | this.removeCanvas();
|
1068 | }
|
1069 | var canvasWidth = this.maxCanvasWidth + this.overlap;
|
1070 | var lastCanvas = this.canvases.length - 1;
|
1071 | this.canvases.forEach(function (entry, i) {
|
1072 | if (i == lastCanvas) {
|
1073 | canvasWidth = _this2.width - _this2.maxCanvasWidth * lastCanvas;
|
1074 | }
|
1075 | _this2.updateDimensions(entry, canvasWidth, _this2.height);
|
1076 | entry.clearWave();
|
1077 | });
|
1078 | }
|
1079 |
|
1080 | |
1081 |
|
1082 |
|
1083 |
|
1084 | }, {
|
1085 | key: "addCanvas",
|
1086 | value: function addCanvas() {
|
1087 | var entry = new this.EntryClass();
|
1088 | entry.canvasContextAttributes = this.canvasContextAttributes;
|
1089 | entry.hasProgressCanvas = this.hasProgressCanvas;
|
1090 | entry.halfPixel = this.halfPixel;
|
1091 | var leftOffset = this.maxCanvasElementWidth * this.canvases.length;
|
1092 |
|
1093 |
|
1094 | var wave = util.withOrientation(this.wrapper.appendChild(document.createElement('canvas')), this.params.vertical);
|
1095 | this.style(wave, {
|
1096 | position: 'absolute',
|
1097 | zIndex: 2,
|
1098 | left: leftOffset + 'px',
|
1099 | top: 0,
|
1100 | bottom: 0,
|
1101 | height: '100%',
|
1102 | pointerEvents: 'none'
|
1103 | });
|
1104 | entry.initWave(wave);
|
1105 |
|
1106 |
|
1107 | if (this.hasProgressCanvas) {
|
1108 | var progress = util.withOrientation(this.progressWave.appendChild(document.createElement('canvas')), this.params.vertical);
|
1109 | this.style(progress, {
|
1110 | position: 'absolute',
|
1111 | left: leftOffset + 'px',
|
1112 | top: 0,
|
1113 | bottom: 0,
|
1114 | height: '100%'
|
1115 | });
|
1116 | entry.initProgress(progress);
|
1117 | }
|
1118 | this.canvases.push(entry);
|
1119 | }
|
1120 |
|
1121 | |
1122 |
|
1123 |
|
1124 |
|
1125 | }, {
|
1126 | key: "removeCanvas",
|
1127 | value: function removeCanvas() {
|
1128 | var lastEntry = this.canvases[this.canvases.length - 1];
|
1129 |
|
1130 |
|
1131 | lastEntry.wave.parentElement.removeChild(lastEntry.wave.domElement);
|
1132 |
|
1133 |
|
1134 | if (this.hasProgressCanvas) {
|
1135 | lastEntry.progress.parentElement.removeChild(lastEntry.progress.domElement);
|
1136 | }
|
1137 |
|
1138 |
|
1139 | if (lastEntry) {
|
1140 | lastEntry.destroy();
|
1141 | lastEntry = null;
|
1142 | }
|
1143 | this.canvases.pop();
|
1144 | }
|
1145 |
|
1146 | |
1147 |
|
1148 |
|
1149 |
|
1150 |
|
1151 |
|
1152 |
|
1153 | }, {
|
1154 | key: "updateDimensions",
|
1155 | value: function updateDimensions(entry, width, height) {
|
1156 | var elementWidth = Math.round(width / this.params.pixelRatio);
|
1157 | var totalWidth = Math.round(this.width / this.params.pixelRatio);
|
1158 |
|
1159 |
|
1160 | entry.updateDimensions(elementWidth, totalWidth, width, height);
|
1161 |
|
1162 |
|
1163 | this.style(this.progressWave, {
|
1164 | display: 'block'
|
1165 | });
|
1166 | }
|
1167 |
|
1168 | |
1169 |
|
1170 |
|
1171 | }, {
|
1172 | key: "clearWave",
|
1173 | value: function clearWave() {
|
1174 | var _this3 = this;
|
1175 | util.frame(function () {
|
1176 | _this3.canvases.forEach(function (entry) {
|
1177 | return entry.clearWave();
|
1178 | });
|
1179 | })();
|
1180 | }
|
1181 |
|
1182 | |
1183 |
|
1184 |
|
1185 |
|
1186 |
|
1187 |
|
1188 |
|
1189 |
|
1190 |
|
1191 |
|
1192 |
|
1193 |
|
1194 |
|
1195 | }, {
|
1196 | key: "drawBars",
|
1197 | value: function drawBars(peaks, channelIndex, start, end) {
|
1198 | var _this4 = this;
|
1199 | return this.prepareDraw(peaks, channelIndex, start, end, function (_ref) {
|
1200 | var absmax = _ref.absmax,
|
1201 | hasMinVals = _ref.hasMinVals,
|
1202 | height = _ref.height,
|
1203 | offsetY = _ref.offsetY,
|
1204 | halfH = _ref.halfH,
|
1205 | peaks = _ref.peaks,
|
1206 | ch = _ref.channelIndex;
|
1207 |
|
1208 |
|
1209 | if (start === undefined) {
|
1210 | return;
|
1211 | }
|
1212 |
|
1213 | var peakIndexScale = hasMinVals ? 2 : 1;
|
1214 | var length = peaks.length / peakIndexScale;
|
1215 | var bar = _this4.params.barWidth * _this4.params.pixelRatio;
|
1216 | var gap = _this4.params.barGap === null ? Math.max(_this4.params.pixelRatio, ~~(bar / 2)) : Math.max(_this4.params.pixelRatio, _this4.params.barGap * _this4.params.pixelRatio);
|
1217 | var step = bar + gap;
|
1218 | var scale = length / _this4.width;
|
1219 | var first = start;
|
1220 | var last = end;
|
1221 | var peakIndex = first;
|
1222 | for (peakIndex; peakIndex < last; peakIndex += step) {
|
1223 |
|
1224 | var peak = 0;
|
1225 | var peakIndexRange = Math.floor(peakIndex * scale) * peakIndexScale;
|
1226 | var peakIndexEnd = Math.floor((peakIndex + step) * scale) * peakIndexScale;
|
1227 | do {
|
1228 |
|
1229 | var newPeak = Math.abs(peaks[peakIndexRange]);
|
1230 | if (newPeak > peak) {
|
1231 | peak = newPeak;
|
1232 | }
|
1233 |
|
1234 | peakIndexRange += peakIndexScale;
|
1235 | } while (peakIndexRange < peakIndexEnd);
|
1236 |
|
1237 |
|
1238 | var h = Math.round(peak / absmax * halfH);
|
1239 |
|
1240 |
|
1241 |
|
1242 | if (_this4.params.barMinHeight) {
|
1243 | h = Math.max(h, _this4.params.barMinHeight);
|
1244 | }
|
1245 | _this4.fillRect(peakIndex + _this4.halfPixel, halfH - h + offsetY, bar + _this4.halfPixel, h * 2, _this4.barRadius, ch);
|
1246 | }
|
1247 | });
|
1248 | }
|
1249 |
|
1250 | |
1251 |
|
1252 |
|
1253 |
|
1254 |
|
1255 |
|
1256 |
|
1257 |
|
1258 |
|
1259 |
|
1260 |
|
1261 |
|
1262 |
|
1263 | }, {
|
1264 | key: "drawWave",
|
1265 | value: function drawWave(peaks, channelIndex, start, end) {
|
1266 | var _this5 = this;
|
1267 | return this.prepareDraw(peaks, channelIndex, start, end, function (_ref2) {
|
1268 | var absmax = _ref2.absmax,
|
1269 | hasMinVals = _ref2.hasMinVals,
|
1270 | height = _ref2.height,
|
1271 | offsetY = _ref2.offsetY,
|
1272 | halfH = _ref2.halfH,
|
1273 | peaks = _ref2.peaks,
|
1274 | channelIndex = _ref2.channelIndex;
|
1275 | if (!hasMinVals) {
|
1276 | var reflectedPeaks = [];
|
1277 | var len = peaks.length;
|
1278 | var i = 0;
|
1279 | for (i; i < len; i++) {
|
1280 | reflectedPeaks[2 * i] = peaks[i];
|
1281 | reflectedPeaks[2 * i + 1] = -peaks[i];
|
1282 | }
|
1283 | peaks = reflectedPeaks;
|
1284 | }
|
1285 |
|
1286 |
|
1287 |
|
1288 | if (start !== undefined) {
|
1289 | _this5.drawLine(peaks, absmax, halfH, offsetY, start, end, channelIndex);
|
1290 | }
|
1291 |
|
1292 |
|
1293 | _this5.fillRect(0, halfH + offsetY - _this5.halfPixel, _this5.width, _this5.halfPixel, _this5.barRadius, channelIndex);
|
1294 | });
|
1295 | }
|
1296 |
|
1297 | |
1298 |
|
1299 |
|
1300 |
|
1301 |
|
1302 |
|
1303 |
|
1304 |
|
1305 |
|
1306 |
|
1307 |
|
1308 |
|
1309 |
|
1310 | }, {
|
1311 | key: "drawLine",
|
1312 | value: function drawLine(peaks, absmax, halfH, offsetY, start, end, channelIndex) {
|
1313 | var _this6 = this;
|
1314 | var _ref3 = this.params.splitChannelsOptions.channelColors[channelIndex] || {},
|
1315 | waveColor = _ref3.waveColor,
|
1316 | progressColor = _ref3.progressColor;
|
1317 | this.canvases.forEach(function (entry, i) {
|
1318 | _this6.setFillStyles(entry, waveColor, progressColor);
|
1319 | _this6.applyCanvasTransforms(entry, _this6.params.vertical);
|
1320 | entry.drawLines(peaks, absmax, halfH, offsetY, start, end);
|
1321 | });
|
1322 | }
|
1323 |
|
1324 | |
1325 |
|
1326 |
|
1327 |
|
1328 |
|
1329 |
|
1330 |
|
1331 |
|
1332 |
|
1333 |
|
1334 | }, {
|
1335 | key: "fillRect",
|
1336 | value: function fillRect(x, y, width, height, radius, channelIndex) {
|
1337 | var startCanvas = Math.floor(x / this.maxCanvasWidth);
|
1338 | var endCanvas = Math.min(Math.ceil((x + width) / this.maxCanvasWidth) + 1, this.canvases.length);
|
1339 | var i = startCanvas;
|
1340 | for (i; i < endCanvas; i++) {
|
1341 | var entry = this.canvases[i];
|
1342 | var leftOffset = i * this.maxCanvasWidth;
|
1343 | var intersection = {
|
1344 | x1: Math.max(x, i * this.maxCanvasWidth),
|
1345 | y1: y,
|
1346 | x2: Math.min(x + width, i * this.maxCanvasWidth + entry.wave.width),
|
1347 | y2: y + height
|
1348 | };
|
1349 | if (intersection.x1 < intersection.x2) {
|
1350 | var _ref4 = this.params.splitChannelsOptions.channelColors[channelIndex] || {},
|
1351 | waveColor = _ref4.waveColor,
|
1352 | progressColor = _ref4.progressColor;
|
1353 | this.setFillStyles(entry, waveColor, progressColor);
|
1354 | this.applyCanvasTransforms(entry, this.params.vertical);
|
1355 | entry.fillRects(intersection.x1 - leftOffset, intersection.y1, intersection.x2 - intersection.x1, intersection.y2 - intersection.y1, radius);
|
1356 | }
|
1357 | }
|
1358 | }
|
1359 |
|
1360 | |
1361 |
|
1362 |
|
1363 |
|
1364 |
|
1365 |
|
1366 | }, {
|
1367 | key: "hideChannel",
|
1368 | value: function hideChannel(channelIndex) {
|
1369 | return this.params.splitChannels && this.params.splitChannelsOptions.filterChannels.includes(channelIndex);
|
1370 | }
|
1371 |
|
1372 | |
1373 |
|
1374 |
|
1375 |
|
1376 |
|
1377 |
|
1378 |
|
1379 |
|
1380 |
|
1381 |
|
1382 |
|
1383 |
|
1384 |
|
1385 |
|
1386 |
|
1387 |
|
1388 |
|
1389 | }, {
|
1390 | key: "prepareDraw",
|
1391 | value: function prepareDraw(peaks, channelIndex, start, end, fn, drawIndex, normalizedMax) {
|
1392 | var _this7 = this;
|
1393 | return util.frame(function () {
|
1394 |
|
1395 | if (peaks[0] instanceof Array) {
|
1396 | var channels = peaks;
|
1397 | if (_this7.params.splitChannels) {
|
1398 | var filteredChannels = channels.filter(function (c, i) {
|
1399 | return !_this7.hideChannel(i);
|
1400 | });
|
1401 | if (!_this7.params.splitChannelsOptions.overlay) {
|
1402 | _this7.setHeight(Math.max(filteredChannels.length, 1) * _this7.params.height * _this7.params.pixelRatio);
|
1403 | }
|
1404 | var overallAbsMax;
|
1405 | if (_this7.params.splitChannelsOptions && _this7.params.splitChannelsOptions.relativeNormalization) {
|
1406 |
|
1407 | overallAbsMax = util.max(channels.map(function (channelPeaks) {
|
1408 | return util.absMax(channelPeaks);
|
1409 | }));
|
1410 | }
|
1411 | return channels.forEach(function (channelPeaks, i) {
|
1412 | return _this7.prepareDraw(channelPeaks, i, start, end, fn, filteredChannels.indexOf(channelPeaks), overallAbsMax);
|
1413 | });
|
1414 | }
|
1415 | peaks = channels[0];
|
1416 | }
|
1417 |
|
1418 |
|
1419 | if (_this7.hideChannel(channelIndex)) {
|
1420 | return;
|
1421 | }
|
1422 |
|
1423 |
|
1424 |
|
1425 |
|
1426 | var absmax = 1 / _this7.params.barHeight;
|
1427 | if (_this7.params.normalize) {
|
1428 | absmax = normalizedMax === undefined ? util.absMax(peaks) : normalizedMax;
|
1429 | }
|
1430 |
|
1431 |
|
1432 |
|
1433 | var hasMinVals = [].some.call(peaks, function (val) {
|
1434 | return val < 0;
|
1435 | });
|
1436 | var height = _this7.params.height * _this7.params.pixelRatio;
|
1437 | var halfH = height / 2;
|
1438 | var offsetY = height * drawIndex || 0;
|
1439 |
|
1440 |
|
1441 | if (_this7.params.splitChannelsOptions && _this7.params.splitChannelsOptions.overlay) {
|
1442 | offsetY = 0;
|
1443 | }
|
1444 | return fn({
|
1445 | absmax: absmax,
|
1446 | hasMinVals: hasMinVals,
|
1447 | height: height,
|
1448 | offsetY: offsetY,
|
1449 | halfH: halfH,
|
1450 | peaks: peaks,
|
1451 | channelIndex: channelIndex
|
1452 | });
|
1453 | })();
|
1454 | }
|
1455 |
|
1456 | |
1457 |
|
1458 |
|
1459 |
|
1460 |
|
1461 |
|
1462 |
|
1463 | }, {
|
1464 | key: "setFillStyles",
|
1465 | value: function setFillStyles(entry) {
|
1466 | var waveColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.params.waveColor;
|
1467 | var progressColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.params.progressColor;
|
1468 | entry.setFillStyles(waveColor, progressColor);
|
1469 | }
|
1470 |
|
1471 | |
1472 |
|
1473 |
|
1474 |
|
1475 |
|
1476 |
|
1477 | }, {
|
1478 | key: "applyCanvasTransforms",
|
1479 | value: function applyCanvasTransforms(entry) {
|
1480 | var vertical = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
1481 | entry.applyCanvasTransforms(vertical);
|
1482 | }
|
1483 |
|
1484 | |
1485 |
|
1486 |
|
1487 |
|
1488 |
|
1489 |
|
1490 |
|
1491 |
|
1492 |
|
1493 |
|
1494 |
|
1495 |
|
1496 |
|
1497 |
|
1498 | }, {
|
1499 | key: "getImage",
|
1500 | value: function getImage(format, quality, type) {
|
1501 | if (type === 'blob') {
|
1502 | return Promise.all(this.canvases.map(function (entry) {
|
1503 | return entry.getImage(format, quality, type);
|
1504 | }));
|
1505 | } else if (type === 'dataURL') {
|
1506 | var images = this.canvases.map(function (entry) {
|
1507 | return entry.getImage(format, quality, type);
|
1508 | });
|
1509 | return images.length > 1 ? images : images[0];
|
1510 | }
|
1511 | }
|
1512 |
|
1513 | |
1514 |
|
1515 |
|
1516 |
|
1517 |
|
1518 | }, {
|
1519 | key: "updateProgress",
|
1520 | value: function updateProgress(position) {
|
1521 | this.style(this.progressWave, {
|
1522 | width: position + 'px'
|
1523 | });
|
1524 | }
|
1525 | }]);
|
1526 | return MultiCanvas;
|
1527 | }(_drawer.default);
|
1528 | exports["default"] = MultiCanvas;
|
1529 | module.exports = exports.default;
|
1530 |
|
1531 | }),
|
1532 |
|
1533 | "./src/mediaelement-webaudio.js":
|
1534 |
|
1535 |
|
1536 |
|
1537 | ((module, exports, __webpack_require__) => {
|
1538 |
|
1539 | "use strict";
|
1540 |
|
1541 |
|
1542 | function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
1543 | Object.defineProperty(exports, "__esModule", ({
|
1544 | value: true
|
1545 | }));
|
1546 | exports["default"] = void 0;
|
1547 | var _mediaelement = _interopRequireDefault(__webpack_require__( "./src/mediaelement.js"));
|
1548 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
1549 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
1550 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
1551 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
1552 | function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
|
1553 | function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
|
1554 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
1555 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
1556 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
1557 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
1558 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
1559 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
1560 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
1561 |
|
1562 |
|
1563 |
|
1564 |
|
1565 |
|
1566 |
|
1567 |
|
1568 |
|
1569 |
|
1570 | var MediaElementWebAudio = function (_MediaElement) {
|
1571 | _inherits(MediaElementWebAudio, _MediaElement);
|
1572 | var _super = _createSuper(MediaElementWebAudio);
|
1573 | |
1574 |
|
1575 |
|
1576 |
|
1577 |
|
1578 | function MediaElementWebAudio(params) {
|
1579 | var _this;
|
1580 | _classCallCheck(this, MediaElementWebAudio);
|
1581 | _this = _super.call(this, params);
|
1582 |
|
1583 | _this.params = params;
|
1584 |
|
1585 | _this.sourceMediaElement = null;
|
1586 | return _this;
|
1587 | }
|
1588 |
|
1589 | |
1590 |
|
1591 |
|
1592 | _createClass(MediaElementWebAudio, [{
|
1593 | key: "init",
|
1594 | value: function init() {
|
1595 | this.setPlaybackRate(this.params.audioRate);
|
1596 | this.createTimer();
|
1597 | this.createVolumeNode();
|
1598 | this.createScriptNode();
|
1599 | this.createAnalyserNode();
|
1600 | }
|
1601 | |
1602 |
|
1603 |
|
1604 |
|
1605 |
|
1606 |
|
1607 |
|
1608 |
|
1609 |
|
1610 | }, {
|
1611 | key: "_load",
|
1612 | value: function _load(media, peaks, preload) {
|
1613 | _get(_getPrototypeOf(MediaElementWebAudio.prototype), "_load", this).call(this, media, peaks, preload);
|
1614 | this.createMediaElementSource(media);
|
1615 | }
|
1616 |
|
1617 | |
1618 |
|
1619 |
|
1620 |
|
1621 |
|
1622 |
|
1623 | }, {
|
1624 | key: "createMediaElementSource",
|
1625 | value: function createMediaElementSource(mediaElement) {
|
1626 | this.sourceMediaElement = this.ac.createMediaElementSource(mediaElement);
|
1627 | this.sourceMediaElement.connect(this.analyser);
|
1628 | }
|
1629 | }, {
|
1630 | key: "play",
|
1631 | value: function play(start, end) {
|
1632 | this.resumeAudioContext();
|
1633 | return _get(_getPrototypeOf(MediaElementWebAudio.prototype), "play", this).call(this, start, end);
|
1634 | }
|
1635 |
|
1636 | |
1637 |
|
1638 |
|
1639 |
|
1640 | }, {
|
1641 | key: "destroy",
|
1642 | value: function destroy() {
|
1643 | _get(_getPrototypeOf(MediaElementWebAudio.prototype), "destroy", this).call(this);
|
1644 | this.destroyWebAudio();
|
1645 | }
|
1646 | }]);
|
1647 | return MediaElementWebAudio;
|
1648 | }(_mediaelement.default);
|
1649 | exports["default"] = MediaElementWebAudio;
|
1650 | module.exports = exports.default;
|
1651 |
|
1652 | }),
|
1653 |
|
1654 | "./src/mediaelement.js":
|
1655 |
|
1656 |
|
1657 |
|
1658 | ((module, exports, __webpack_require__) => {
|
1659 |
|
1660 | "use strict";
|
1661 |
|
1662 |
|
1663 | function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
1664 | Object.defineProperty(exports, "__esModule", ({
|
1665 | value: true
|
1666 | }));
|
1667 | exports["default"] = void 0;
|
1668 | var _webaudio = _interopRequireDefault(__webpack_require__( "./src/webaudio.js"));
|
1669 | var util = _interopRequireWildcard(__webpack_require__( "./src/util/index.js"));
|
1670 | function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
1671 | function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
1672 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
1673 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
1674 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
1675 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
1676 | function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
|
1677 | function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
|
1678 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
1679 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
1680 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
1681 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
1682 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
1683 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
1684 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
1685 |
|
1686 |
|
1687 |
|
1688 | var MediaElement = function (_WebAudio) {
|
1689 | _inherits(MediaElement, _WebAudio);
|
1690 | var _super = _createSuper(MediaElement);
|
1691 | |
1692 |
|
1693 |
|
1694 |
|
1695 |
|
1696 | function MediaElement(params) {
|
1697 | var _this;
|
1698 | _classCallCheck(this, MediaElement);
|
1699 | _this = _super.call(this, params);
|
1700 |
|
1701 | _this.params = params;
|
1702 |
|
1703 | |
1704 |
|
1705 |
|
1706 |
|
1707 |
|
1708 | _this.media = {
|
1709 | currentTime: 0,
|
1710 | duration: 0,
|
1711 | paused: true,
|
1712 | playbackRate: 1,
|
1713 | play: function play() {},
|
1714 | pause: function pause() {},
|
1715 | volume: 0
|
1716 | };
|
1717 |
|
1718 |
|
1719 | _this.mediaType = params.mediaType.toLowerCase();
|
1720 |
|
1721 | _this.elementPosition = params.elementPosition;
|
1722 |
|
1723 | _this.peaks = null;
|
1724 |
|
1725 | _this.playbackRate = 1;
|
1726 |
|
1727 | _this.volume = 1;
|
1728 |
|
1729 | _this.isMuted = false;
|
1730 |
|
1731 | _this.buffer = null;
|
1732 |
|
1733 | _this.onPlayEnd = null;
|
1734 |
|
1735 | _this.mediaListeners = {};
|
1736 | return _this;
|
1737 | }
|
1738 |
|
1739 | |
1740 |
|
1741 |
|
1742 | _createClass(MediaElement, [{
|
1743 | key: "init",
|
1744 | value: function init() {
|
1745 | this.setPlaybackRate(this.params.audioRate);
|
1746 | this.createTimer();
|
1747 | }
|
1748 |
|
1749 | |
1750 |
|
1751 |
|
1752 | }, {
|
1753 | key: "_setupMediaListeners",
|
1754 | value: function _setupMediaListeners() {
|
1755 | var _this2 = this;
|
1756 | this.mediaListeners.error = function () {
|
1757 | _this2.fireEvent('error', 'Error loading media element');
|
1758 | };
|
1759 | this.mediaListeners.canplay = function () {
|
1760 | _this2.fireEvent('canplay');
|
1761 | };
|
1762 | this.mediaListeners.ended = function () {
|
1763 | _this2.fireEvent('finish');
|
1764 | };
|
1765 |
|
1766 |
|
1767 | this.mediaListeners.play = function () {
|
1768 | _this2.fireEvent('play');
|
1769 | };
|
1770 | this.mediaListeners.pause = function () {
|
1771 | _this2.fireEvent('pause');
|
1772 | };
|
1773 | this.mediaListeners.seeked = function (event) {
|
1774 | _this2.fireEvent('seek');
|
1775 | };
|
1776 | this.mediaListeners.volumechange = function (event) {
|
1777 | _this2.isMuted = _this2.media.muted;
|
1778 | if (_this2.isMuted) {
|
1779 | _this2.volume = 0;
|
1780 | } else {
|
1781 | _this2.volume = _this2.media.volume;
|
1782 | }
|
1783 | _this2.fireEvent('volume');
|
1784 | };
|
1785 |
|
1786 |
|
1787 | Object.keys(this.mediaListeners).forEach(function (id) {
|
1788 | _this2.media.removeEventListener(id, _this2.mediaListeners[id]);
|
1789 | _this2.media.addEventListener(id, _this2.mediaListeners[id]);
|
1790 | });
|
1791 | }
|
1792 |
|
1793 | |
1794 |
|
1795 |
|
1796 | }, {
|
1797 | key: "createTimer",
|
1798 | value: function createTimer() {
|
1799 | var _this3 = this;
|
1800 | var onAudioProcess = function onAudioProcess() {
|
1801 | if (_this3.isPaused()) {
|
1802 | return;
|
1803 | }
|
1804 | _this3.fireEvent('audioprocess', _this3.getCurrentTime());
|
1805 |
|
1806 |
|
1807 | util.frame(onAudioProcess)();
|
1808 | };
|
1809 | this.on('play', onAudioProcess);
|
1810 |
|
1811 |
|
1812 |
|
1813 | this.on('pause', function () {
|
1814 | _this3.fireEvent('audioprocess', _this3.getCurrentTime());
|
1815 | });
|
1816 | }
|
1817 |
|
1818 | |
1819 |
|
1820 |
|
1821 |
|
1822 |
|
1823 |
|
1824 |
|
1825 |
|
1826 |
|
1827 |
|
1828 |
|
1829 | }, {
|
1830 | key: "load",
|
1831 | value: function load(url, container, peaks, preload) {
|
1832 | var media = document.createElement(this.mediaType);
|
1833 | media.controls = this.params.mediaControls;
|
1834 | media.autoplay = this.params.autoplay || false;
|
1835 | media.preload = preload == null ? 'auto' : preload;
|
1836 | media.src = url;
|
1837 | media.style.width = '100%';
|
1838 | var prevMedia = container.querySelector(this.mediaType);
|
1839 | if (prevMedia) {
|
1840 | container.removeChild(prevMedia);
|
1841 | }
|
1842 | container.appendChild(media);
|
1843 | this._load(media, peaks, preload);
|
1844 | }
|
1845 |
|
1846 | |
1847 |
|
1848 |
|
1849 |
|
1850 |
|
1851 |
|
1852 | }, {
|
1853 | key: "loadElt",
|
1854 | value: function loadElt(elt, peaks) {
|
1855 | elt.controls = this.params.mediaControls;
|
1856 | elt.autoplay = this.params.autoplay || false;
|
1857 | this._load(elt, peaks, elt.preload);
|
1858 | }
|
1859 |
|
1860 | |
1861 |
|
1862 |
|
1863 |
|
1864 |
|
1865 |
|
1866 |
|
1867 |
|
1868 |
|
1869 |
|
1870 |
|
1871 | }, {
|
1872 | key: "_load",
|
1873 | value: function _load(media, peaks, preload) {
|
1874 |
|
1875 | if (!(media instanceof HTMLMediaElement) || typeof media.addEventListener === 'undefined') {
|
1876 | throw new Error('media parameter is not a valid media element');
|
1877 | }
|
1878 |
|
1879 |
|
1880 |
|
1881 |
|
1882 |
|
1883 |
|
1884 | if (typeof media.load == 'function' && !(peaks && preload == 'none')) {
|
1885 |
|
1886 |
|
1887 |
|
1888 | media.load();
|
1889 | }
|
1890 | this.media = media;
|
1891 | this._setupMediaListeners();
|
1892 | this.peaks = peaks;
|
1893 | this.onPlayEnd = null;
|
1894 | this.buffer = null;
|
1895 | this.isMuted = media.muted;
|
1896 | this.setPlaybackRate(this.playbackRate);
|
1897 | this.setVolume(this.volume);
|
1898 | }
|
1899 |
|
1900 | |
1901 |
|
1902 |
|
1903 |
|
1904 |
|
1905 | }, {
|
1906 | key: "isPaused",
|
1907 | value: function isPaused() {
|
1908 | return !this.media || this.media.paused;
|
1909 | }
|
1910 |
|
1911 | |
1912 |
|
1913 |
|
1914 |
|
1915 |
|
1916 | }, {
|
1917 | key: "getDuration",
|
1918 | value: function getDuration() {
|
1919 | if (this.explicitDuration) {
|
1920 | return this.explicitDuration;
|
1921 | }
|
1922 | var duration = (this.buffer || this.media).duration;
|
1923 | if (duration >= Infinity) {
|
1924 |
|
1925 | duration = this.media.seekable.end(0);
|
1926 | }
|
1927 | return duration;
|
1928 | }
|
1929 |
|
1930 | |
1931 |
|
1932 |
|
1933 |
|
1934 |
|
1935 |
|
1936 | }, {
|
1937 | key: "getCurrentTime",
|
1938 | value: function getCurrentTime() {
|
1939 | return this.media && this.media.currentTime;
|
1940 | }
|
1941 |
|
1942 | |
1943 |
|
1944 |
|
1945 |
|
1946 |
|
1947 | }, {
|
1948 | key: "getPlayedPercents",
|
1949 | value: function getPlayedPercents() {
|
1950 | return this.getCurrentTime() / this.getDuration() || 0;
|
1951 | }
|
1952 |
|
1953 | |
1954 |
|
1955 |
|
1956 |
|
1957 |
|
1958 | }, {
|
1959 | key: "getPlaybackRate",
|
1960 | value: function getPlaybackRate() {
|
1961 | return this.playbackRate || this.media.playbackRate;
|
1962 | }
|
1963 |
|
1964 | |
1965 |
|
1966 |
|
1967 |
|
1968 |
|
1969 | }, {
|
1970 | key: "setPlaybackRate",
|
1971 | value: function setPlaybackRate(value) {
|
1972 | this.playbackRate = value || 1;
|
1973 | this.media.playbackRate = this.playbackRate;
|
1974 | }
|
1975 |
|
1976 | |
1977 |
|
1978 |
|
1979 |
|
1980 |
|
1981 | }, {
|
1982 | key: "seekTo",
|
1983 | value: function seekTo(start) {
|
1984 | if (start != null && !isNaN(start)) {
|
1985 | this.media.currentTime = start;
|
1986 | }
|
1987 | this.clearPlayEnd();
|
1988 | }
|
1989 |
|
1990 | |
1991 |
|
1992 |
|
1993 |
|
1994 |
|
1995 |
|
1996 |
|
1997 |
|
1998 |
|
1999 | }, {
|
2000 | key: "play",
|
2001 | value: function play(start, end) {
|
2002 | this.seekTo(start);
|
2003 | var promise = this.media.play();
|
2004 | end && this.setPlayEnd(end);
|
2005 | return promise;
|
2006 | }
|
2007 |
|
2008 | |
2009 |
|
2010 |
|
2011 |
|
2012 |
|
2013 |
|
2014 | }, {
|
2015 | key: "pause",
|
2016 | value: function pause() {
|
2017 | var promise;
|
2018 | if (this.media) {
|
2019 | promise = this.media.pause();
|
2020 | }
|
2021 | this.clearPlayEnd();
|
2022 | return promise;
|
2023 | }
|
2024 |
|
2025 | |
2026 |
|
2027 |
|
2028 |
|
2029 |
|
2030 | }, {
|
2031 | key: "setPlayEnd",
|
2032 | value: function setPlayEnd(end) {
|
2033 | var _this4 = this;
|
2034 | this.clearPlayEnd();
|
2035 | this._onPlayEnd = function (time) {
|
2036 | if (time >= end) {
|
2037 | _this4.pause();
|
2038 | _this4.seekTo(end);
|
2039 | }
|
2040 | };
|
2041 | this.on('audioprocess', this._onPlayEnd);
|
2042 | }
|
2043 |
|
2044 |
|
2045 | }, {
|
2046 | key: "clearPlayEnd",
|
2047 | value: function clearPlayEnd() {
|
2048 | if (this._onPlayEnd) {
|
2049 | this.un('audioprocess', this._onPlayEnd);
|
2050 | this._onPlayEnd = null;
|
2051 | }
|
2052 | }
|
2053 |
|
2054 | |
2055 |
|
2056 |
|
2057 |
|
2058 |
|
2059 |
|
2060 |
|
2061 |
|
2062 |
|
2063 |
|
2064 | }, {
|
2065 | key: "getPeaks",
|
2066 | value: function getPeaks(length, first, last) {
|
2067 | if (this.buffer) {
|
2068 | return _get(_getPrototypeOf(MediaElement.prototype), "getPeaks", this).call(this, length, first, last);
|
2069 | }
|
2070 | return this.peaks || [];
|
2071 | }
|
2072 |
|
2073 | |
2074 |
|
2075 |
|
2076 |
|
2077 |
|
2078 |
|
2079 |
|
2080 | }, {
|
2081 | key: "setSinkId",
|
2082 | value: function setSinkId(deviceId) {
|
2083 | if (deviceId) {
|
2084 | if (!this.media.setSinkId) {
|
2085 | return Promise.reject(new Error('setSinkId is not supported in your browser'));
|
2086 | }
|
2087 | return this.media.setSinkId(deviceId);
|
2088 | }
|
2089 | return Promise.reject(new Error('Invalid deviceId: ' + deviceId));
|
2090 | }
|
2091 |
|
2092 | |
2093 |
|
2094 |
|
2095 |
|
2096 |
|
2097 | }, {
|
2098 | key: "getVolume",
|
2099 | value: function getVolume() {
|
2100 | return this.volume;
|
2101 | }
|
2102 |
|
2103 | |
2104 |
|
2105 |
|
2106 |
|
2107 |
|
2108 | }, {
|
2109 | key: "setVolume",
|
2110 | value: function setVolume(value) {
|
2111 | this.volume = value;
|
2112 |
|
2113 | if (this.media.volume !== this.volume) {
|
2114 | this.media.volume = this.volume;
|
2115 | }
|
2116 | }
|
2117 |
|
2118 | |
2119 |
|
2120 |
|
2121 |
|
2122 |
|
2123 |
|
2124 | }, {
|
2125 | key: "setMute",
|
2126 | value: function setMute(muted) {
|
2127 |
|
2128 |
|
2129 | this.isMuted = this.media.muted = muted;
|
2130 | }
|
2131 |
|
2132 | |
2133 |
|
2134 |
|
2135 |
|
2136 | }, {
|
2137 | key: "destroy",
|
2138 | value: function destroy() {
|
2139 | var _this5 = this;
|
2140 | this.pause();
|
2141 | this.unAll();
|
2142 | this.destroyed = true;
|
2143 |
|
2144 |
|
2145 | Object.keys(this.mediaListeners).forEach(function (id) {
|
2146 | if (_this5.media) {
|
2147 | _this5.media.removeEventListener(id, _this5.mediaListeners[id]);
|
2148 | }
|
2149 | });
|
2150 | if (this.params.removeMediaElementOnDestroy && this.media && this.media.parentNode) {
|
2151 | this.media.parentNode.removeChild(this.media);
|
2152 | }
|
2153 | this.media = null;
|
2154 | }
|
2155 | }]);
|
2156 | return MediaElement;
|
2157 | }(_webaudio.default);
|
2158 | exports["default"] = MediaElement;
|
2159 | module.exports = exports.default;
|
2160 |
|
2161 | }),
|
2162 |
|
2163 | "./src/peakcache.js":
|
2164 |
|
2165 |
|
2166 |
|
2167 | ((module, exports) => {
|
2168 |
|
2169 | "use strict";
|
2170 |
|
2171 |
|
2172 | Object.defineProperty(exports, "__esModule", ({
|
2173 | value: true
|
2174 | }));
|
2175 | exports["default"] = void 0;
|
2176 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
2177 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
2178 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
2179 |
|
2180 |
|
2181 |
|
2182 |
|
2183 |
|
2184 | var PeakCache = function () {
|
2185 | |
2186 |
|
2187 |
|
2188 | function PeakCache() {
|
2189 | _classCallCheck(this, PeakCache);
|
2190 | this.clearPeakCache();
|
2191 | }
|
2192 |
|
2193 | |
2194 |
|
2195 |
|
2196 | _createClass(PeakCache, [{
|
2197 | key: "clearPeakCache",
|
2198 | value: function clearPeakCache() {
|
2199 | |
2200 |
|
2201 |
|
2202 |
|
2203 |
|
2204 |
|
2205 | this.peakCacheRanges = [];
|
2206 | |
2207 |
|
2208 |
|
2209 |
|
2210 |
|
2211 | this.peakCacheLength = -1;
|
2212 | }
|
2213 |
|
2214 | |
2215 |
|
2216 |
|
2217 |
|
2218 |
|
2219 |
|
2220 |
|
2221 |
|
2222 | }, {
|
2223 | key: "addRangeToPeakCache",
|
2224 | value: function addRangeToPeakCache(length, start, end) {
|
2225 | if (length != this.peakCacheLength) {
|
2226 | this.clearPeakCache();
|
2227 | this.peakCacheLength = length;
|
2228 | }
|
2229 |
|
2230 |
|
2231 | var uncachedRanges = [];
|
2232 | var i = 0;
|
2233 |
|
2234 | while (i < this.peakCacheRanges.length && this.peakCacheRanges[i] < start) {
|
2235 | i++;
|
2236 | }
|
2237 |
|
2238 |
|
2239 |
|
2240 |
|
2241 | if (i % 2 == 0) {
|
2242 | uncachedRanges.push(start);
|
2243 | }
|
2244 | while (i < this.peakCacheRanges.length && this.peakCacheRanges[i] <= end) {
|
2245 | uncachedRanges.push(this.peakCacheRanges[i]);
|
2246 | i++;
|
2247 | }
|
2248 |
|
2249 | if (i % 2 == 0) {
|
2250 | uncachedRanges.push(end);
|
2251 | }
|
2252 |
|
2253 |
|
2254 | uncachedRanges = uncachedRanges.filter(function (item, pos, arr) {
|
2255 | if (pos == 0) {
|
2256 | return item != arr[pos + 1];
|
2257 | } else if (pos == arr.length - 1) {
|
2258 | return item != arr[pos - 1];
|
2259 | }
|
2260 | return item != arr[pos - 1] && item != arr[pos + 1];
|
2261 | });
|
2262 |
|
2263 |
|
2264 |
|
2265 |
|
2266 | this.peakCacheRanges = this.peakCacheRanges.concat(uncachedRanges);
|
2267 | this.peakCacheRanges = this.peakCacheRanges.sort(function (a, b) {
|
2268 | return a - b;
|
2269 | }).filter(function (item, pos, arr) {
|
2270 | if (pos == 0) {
|
2271 | return item != arr[pos + 1];
|
2272 | } else if (pos == arr.length - 1) {
|
2273 | return item != arr[pos - 1];
|
2274 | }
|
2275 | return item != arr[pos - 1] && item != arr[pos + 1];
|
2276 | });
|
2277 |
|
2278 |
|
2279 |
|
2280 | var uncachedRangePairs = [];
|
2281 | for (i = 0; i < uncachedRanges.length; i += 2) {
|
2282 | uncachedRangePairs.push([uncachedRanges[i], uncachedRanges[i + 1]]);
|
2283 | }
|
2284 | return uncachedRangePairs;
|
2285 | }
|
2286 |
|
2287 | |
2288 |
|
2289 |
|
2290 |
|
2291 |
|
2292 | }, {
|
2293 | key: "getCacheRanges",
|
2294 | value: function getCacheRanges() {
|
2295 | var peakCacheRangePairs = [];
|
2296 | var i;
|
2297 | for (i = 0; i < this.peakCacheRanges.length; i += 2) {
|
2298 | peakCacheRangePairs.push([this.peakCacheRanges[i], this.peakCacheRanges[i + 1]]);
|
2299 | }
|
2300 | return peakCacheRangePairs;
|
2301 | }
|
2302 | }]);
|
2303 | return PeakCache;
|
2304 | }();
|
2305 | exports["default"] = PeakCache;
|
2306 | module.exports = exports.default;
|
2307 |
|
2308 | }),
|
2309 |
|
2310 | "./src/util/absMax.js":
|
2311 |
|
2312 |
|
2313 |
|
2314 | ((module, exports, __webpack_require__) => {
|
2315 |
|
2316 | "use strict";
|
2317 |
|
2318 |
|
2319 | Object.defineProperty(exports, "__esModule", ({
|
2320 | value: true
|
2321 | }));
|
2322 | exports["default"] = absMax;
|
2323 | var _max = _interopRequireDefault(__webpack_require__( "./src/util/max.js"));
|
2324 | var _min = _interopRequireDefault(__webpack_require__( "./src/util/min.js"));
|
2325 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
2326 |
|
2327 |
|
2328 |
|
2329 |
|
2330 |
|
2331 |
|
2332 |
|
2333 |
|
2334 | function absMax(values) {
|
2335 | var max = (0, _max.default)(values);
|
2336 | var min = (0, _min.default)(values);
|
2337 | return -min > max ? -min : max;
|
2338 | }
|
2339 | module.exports = exports.default;
|
2340 |
|
2341 | }),
|
2342 |
|
2343 | "./src/util/clamp.js":
|
2344 |
|
2345 |
|
2346 |
|
2347 | ((module, exports) => {
|
2348 |
|
2349 | "use strict";
|
2350 |
|
2351 |
|
2352 | Object.defineProperty(exports, "__esModule", ({
|
2353 | value: true
|
2354 | }));
|
2355 | exports["default"] = clamp;
|
2356 |
|
2357 |
|
2358 |
|
2359 |
|
2360 |
|
2361 |
|
2362 |
|
2363 |
|
2364 | function clamp(val, min, max) {
|
2365 | return Math.min(Math.max(min, val), max);
|
2366 | }
|
2367 | module.exports = exports.default;
|
2368 |
|
2369 | }),
|
2370 |
|
2371 | "./src/util/fetch.js":
|
2372 |
|
2373 |
|
2374 |
|
2375 | ((module, exports, __webpack_require__) => {
|
2376 |
|
2377 | "use strict";
|
2378 |
|
2379 |
|
2380 | Object.defineProperty(exports, "__esModule", ({
|
2381 | value: true
|
2382 | }));
|
2383 | exports["default"] = fetchFile;
|
2384 | var _observer = _interopRequireDefault(__webpack_require__( "./src/util/observer.js"));
|
2385 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
2386 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
2387 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
2388 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
2389 | var ProgressHandler = function () {
|
2390 | |
2391 |
|
2392 |
|
2393 |
|
2394 |
|
2395 |
|
2396 |
|
2397 | function ProgressHandler(instance, contentLength, response) {
|
2398 | _classCallCheck(this, ProgressHandler);
|
2399 | this.instance = instance;
|
2400 | this.instance._reader = response.body.getReader();
|
2401 | this.total = parseInt(contentLength, 10);
|
2402 | this.loaded = 0;
|
2403 | }
|
2404 |
|
2405 | |
2406 |
|
2407 |
|
2408 |
|
2409 |
|
2410 |
|
2411 |
|
2412 | _createClass(ProgressHandler, [{
|
2413 | key: "start",
|
2414 | value: function start(controller) {
|
2415 | var _this = this;
|
2416 | var read = function read() {
|
2417 |
|
2418 |
|
2419 | _this.instance._reader.read().then(function (_ref) {
|
2420 | var done = _ref.done,
|
2421 | value = _ref.value;
|
2422 |
|
2423 |
|
2424 |
|
2425 | if (done) {
|
2426 |
|
2427 | if (_this.total === 0) {
|
2428 | _this.instance.onProgress.call(_this.instance, {
|
2429 | loaded: _this.loaded,
|
2430 | total: _this.total,
|
2431 | lengthComputable: false
|
2432 | });
|
2433 | }
|
2434 |
|
2435 | controller.close();
|
2436 | return;
|
2437 | }
|
2438 | _this.loaded += value.byteLength;
|
2439 | _this.instance.onProgress.call(_this.instance, {
|
2440 | loaded: _this.loaded,
|
2441 | total: _this.total,
|
2442 | lengthComputable: !(_this.total === 0)
|
2443 | });
|
2444 |
|
2445 | controller.enqueue(value);
|
2446 | read();
|
2447 | }).catch(function (error) {
|
2448 | controller.error(error);
|
2449 | });
|
2450 | };
|
2451 | read();
|
2452 | }
|
2453 | }]);
|
2454 | return ProgressHandler;
|
2455 | }();
|
2456 |
|
2457 |
|
2458 |
|
2459 |
|
2460 |
|
2461 |
|
2462 |
|
2463 |
|
2464 |
|
2465 |
|
2466 |
|
2467 |
|
2468 |
|
2469 |
|
2470 |
|
2471 |
|
2472 |
|
2473 |
|
2474 |
|
2475 |
|
2476 |
|
2477 |
|
2478 |
|
2479 |
|
2480 |
|
2481 |
|
2482 |
|
2483 |
|
2484 |
|
2485 |
|
2486 |
|
2487 |
|
2488 |
|
2489 |
|
2490 |
|
2491 |
|
2492 |
|
2493 |
|
2494 |
|
2495 |
|
2496 |
|
2497 | function fetchFile(options) {
|
2498 | if (!options) {
|
2499 | throw new Error('fetch options missing');
|
2500 | } else if (!options.url) {
|
2501 | throw new Error('fetch url missing');
|
2502 | }
|
2503 | var instance = new _observer.default();
|
2504 | var fetchHeaders = new Headers();
|
2505 | var fetchRequest = new Request(options.url);
|
2506 |
|
2507 |
|
2508 | instance.controller = new AbortController();
|
2509 |
|
2510 |
|
2511 | if (options && options.requestHeaders) {
|
2512 |
|
2513 | options.requestHeaders.forEach(function (header) {
|
2514 | fetchHeaders.append(header.key, header.value);
|
2515 | });
|
2516 | }
|
2517 |
|
2518 |
|
2519 | var responseType = options.responseType || 'json';
|
2520 | var fetchOptions = {
|
2521 | method: options.method || 'GET',
|
2522 | headers: fetchHeaders,
|
2523 | mode: options.mode || 'cors',
|
2524 | credentials: options.credentials || 'same-origin',
|
2525 | cache: options.cache || 'default',
|
2526 | redirect: options.redirect || 'follow',
|
2527 | referrer: options.referrer || 'client',
|
2528 | signal: instance.controller.signal
|
2529 | };
|
2530 | fetch(fetchRequest, fetchOptions).then(function (response) {
|
2531 |
|
2532 | instance.response = response;
|
2533 | var progressAvailable = true;
|
2534 | if (!response.body) {
|
2535 |
|
2536 |
|
2537 | progressAvailable = false;
|
2538 | }
|
2539 |
|
2540 |
|
2541 | var contentLength = response.headers.get('content-length');
|
2542 | if (contentLength === null) {
|
2543 |
|
2544 |
|
2545 |
|
2546 | progressAvailable = false;
|
2547 | }
|
2548 | if (!progressAvailable) {
|
2549 |
|
2550 | return response;
|
2551 | }
|
2552 |
|
2553 |
|
2554 | instance.onProgress = function (e) {
|
2555 | instance.fireEvent('progress', e);
|
2556 | };
|
2557 | return new Response(new ReadableStream(new ProgressHandler(instance, contentLength, response)), fetchOptions);
|
2558 | }).then(function (response) {
|
2559 | var errMsg;
|
2560 | if (response.ok) {
|
2561 | switch (responseType) {
|
2562 | case 'arraybuffer':
|
2563 | return response.arrayBuffer();
|
2564 | case 'json':
|
2565 | return response.json();
|
2566 | case 'blob':
|
2567 | return response.blob();
|
2568 | case 'text':
|
2569 | return response.text();
|
2570 | default:
|
2571 | errMsg = 'Unknown responseType: ' + responseType;
|
2572 | break;
|
2573 | }
|
2574 | }
|
2575 | if (!errMsg) {
|
2576 | errMsg = 'HTTP error status: ' + response.status;
|
2577 | }
|
2578 | throw new Error(errMsg);
|
2579 | }).then(function (response) {
|
2580 | instance.fireEvent('success', response);
|
2581 | }).catch(function (error) {
|
2582 | instance.fireEvent('error', error);
|
2583 | });
|
2584 |
|
2585 |
|
2586 | instance.fetchRequest = fetchRequest;
|
2587 | return instance;
|
2588 | }
|
2589 | module.exports = exports.default;
|
2590 |
|
2591 | }),
|
2592 |
|
2593 | "./src/util/frame.js":
|
2594 |
|
2595 |
|
2596 |
|
2597 | ((module, exports, __webpack_require__) => {
|
2598 |
|
2599 | "use strict";
|
2600 |
|
2601 |
|
2602 | Object.defineProperty(exports, "__esModule", ({
|
2603 | value: true
|
2604 | }));
|
2605 | exports["default"] = frame;
|
2606 | var _requestAnimationFrame = _interopRequireDefault(__webpack_require__( "./src/util/request-animation-frame.js"));
|
2607 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
2608 |
|
2609 |
|
2610 |
|
2611 |
|
2612 |
|
2613 |
|
2614 |
|
2615 |
|
2616 | function frame(func) {
|
2617 | return function () {
|
2618 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
2619 | args[_key] = arguments[_key];
|
2620 | }
|
2621 | return (0, _requestAnimationFrame.default)(function () {
|
2622 | return func.apply(void 0, args);
|
2623 | });
|
2624 | };
|
2625 | }
|
2626 | module.exports = exports.default;
|
2627 |
|
2628 | }),
|
2629 |
|
2630 | "./src/util/get-id.js":
|
2631 |
|
2632 |
|
2633 |
|
2634 | ((module, exports) => {
|
2635 |
|
2636 | "use strict";
|
2637 |
|
2638 |
|
2639 | Object.defineProperty(exports, "__esModule", ({
|
2640 | value: true
|
2641 | }));
|
2642 | exports["default"] = getId;
|
2643 |
|
2644 |
|
2645 |
|
2646 |
|
2647 |
|
2648 |
|
2649 |
|
2650 |
|
2651 |
|
2652 |
|
2653 |
|
2654 | function getId(prefix) {
|
2655 | if (prefix === undefined) {
|
2656 | prefix = 'wavesurfer_';
|
2657 | }
|
2658 | return prefix + Math.random().toString(32).substring(2);
|
2659 | }
|
2660 | module.exports = exports.default;
|
2661 |
|
2662 | }),
|
2663 |
|
2664 | "./src/util/index.js":
|
2665 |
|
2666 |
|
2667 |
|
2668 | ((__unused_webpack_module, exports, __webpack_require__) => {
|
2669 |
|
2670 | "use strict";
|
2671 |
|
2672 |
|
2673 | Object.defineProperty(exports, "__esModule", ({
|
2674 | value: true
|
2675 | }));
|
2676 | Object.defineProperty(exports, "Observer", ({
|
2677 | enumerable: true,
|
2678 | get: function get() {
|
2679 | return _observer.default;
|
2680 | }
|
2681 | }));
|
2682 | Object.defineProperty(exports, "absMax", ({
|
2683 | enumerable: true,
|
2684 | get: function get() {
|
2685 | return _absMax.default;
|
2686 | }
|
2687 | }));
|
2688 | Object.defineProperty(exports, "clamp", ({
|
2689 | enumerable: true,
|
2690 | get: function get() {
|
2691 | return _clamp.default;
|
2692 | }
|
2693 | }));
|
2694 | Object.defineProperty(exports, "debounce", ({
|
2695 | enumerable: true,
|
2696 | get: function get() {
|
2697 | return _debounce.default;
|
2698 | }
|
2699 | }));
|
2700 | Object.defineProperty(exports, "fetchFile", ({
|
2701 | enumerable: true,
|
2702 | get: function get() {
|
2703 | return _fetch.default;
|
2704 | }
|
2705 | }));
|
2706 | Object.defineProperty(exports, "frame", ({
|
2707 | enumerable: true,
|
2708 | get: function get() {
|
2709 | return _frame.default;
|
2710 | }
|
2711 | }));
|
2712 | Object.defineProperty(exports, "getId", ({
|
2713 | enumerable: true,
|
2714 | get: function get() {
|
2715 | return _getId.default;
|
2716 | }
|
2717 | }));
|
2718 | Object.defineProperty(exports, "ignoreSilenceMode", ({
|
2719 | enumerable: true,
|
2720 | get: function get() {
|
2721 | return _silenceMode.default;
|
2722 | }
|
2723 | }));
|
2724 | Object.defineProperty(exports, "max", ({
|
2725 | enumerable: true,
|
2726 | get: function get() {
|
2727 | return _max.default;
|
2728 | }
|
2729 | }));
|
2730 | Object.defineProperty(exports, "min", ({
|
2731 | enumerable: true,
|
2732 | get: function get() {
|
2733 | return _min.default;
|
2734 | }
|
2735 | }));
|
2736 | Object.defineProperty(exports, "preventClick", ({
|
2737 | enumerable: true,
|
2738 | get: function get() {
|
2739 | return _preventClick.default;
|
2740 | }
|
2741 | }));
|
2742 | Object.defineProperty(exports, "requestAnimationFrame", ({
|
2743 | enumerable: true,
|
2744 | get: function get() {
|
2745 | return _requestAnimationFrame.default;
|
2746 | }
|
2747 | }));
|
2748 | Object.defineProperty(exports, "style", ({
|
2749 | enumerable: true,
|
2750 | get: function get() {
|
2751 | return _style.default;
|
2752 | }
|
2753 | }));
|
2754 | Object.defineProperty(exports, "withOrientation", ({
|
2755 | enumerable: true,
|
2756 | get: function get() {
|
2757 | return _orientation.default;
|
2758 | }
|
2759 | }));
|
2760 | var _getId = _interopRequireDefault(__webpack_require__( "./src/util/get-id.js"));
|
2761 | var _max = _interopRequireDefault(__webpack_require__( "./src/util/max.js"));
|
2762 | var _min = _interopRequireDefault(__webpack_require__( "./src/util/min.js"));
|
2763 | var _absMax = _interopRequireDefault(__webpack_require__( "./src/util/absMax.js"));
|
2764 | var _observer = _interopRequireDefault(__webpack_require__( "./src/util/observer.js"));
|
2765 | var _style = _interopRequireDefault(__webpack_require__( "./src/util/style.js"));
|
2766 | var _requestAnimationFrame = _interopRequireDefault(__webpack_require__( "./src/util/request-animation-frame.js"));
|
2767 | var _frame = _interopRequireDefault(__webpack_require__( "./src/util/frame.js"));
|
2768 | var _debounce = _interopRequireDefault(__webpack_require__( "./node_modules/debounce/index.js"));
|
2769 | var _preventClick = _interopRequireDefault(__webpack_require__( "./src/util/prevent-click.js"));
|
2770 | var _fetch = _interopRequireDefault(__webpack_require__( "./src/util/fetch.js"));
|
2771 | var _clamp = _interopRequireDefault(__webpack_require__( "./src/util/clamp.js"));
|
2772 | var _orientation = _interopRequireDefault(__webpack_require__( "./src/util/orientation.js"));
|
2773 | var _silenceMode = _interopRequireDefault(__webpack_require__( "./src/util/silence-mode.js"));
|
2774 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
2775 |
|
2776 | }),
|
2777 |
|
2778 | "./src/util/max.js":
|
2779 |
|
2780 |
|
2781 |
|
2782 | ((module, exports) => {
|
2783 |
|
2784 | "use strict";
|
2785 |
|
2786 |
|
2787 | Object.defineProperty(exports, "__esModule", ({
|
2788 | value: true
|
2789 | }));
|
2790 | exports["default"] = max;
|
2791 |
|
2792 |
|
2793 |
|
2794 |
|
2795 |
|
2796 |
|
2797 |
|
2798 | function max(values) {
|
2799 | var largest = -Infinity;
|
2800 | Object.keys(values).forEach(function (i) {
|
2801 | if (values[i] > largest) {
|
2802 | largest = values[i];
|
2803 | }
|
2804 | });
|
2805 | return largest;
|
2806 | }
|
2807 | module.exports = exports.default;
|
2808 |
|
2809 | }),
|
2810 |
|
2811 | "./src/util/min.js":
|
2812 |
|
2813 |
|
2814 |
|
2815 | ((module, exports) => {
|
2816 |
|
2817 | "use strict";
|
2818 |
|
2819 |
|
2820 | Object.defineProperty(exports, "__esModule", ({
|
2821 | value: true
|
2822 | }));
|
2823 | exports["default"] = min;
|
2824 |
|
2825 |
|
2826 |
|
2827 |
|
2828 |
|
2829 |
|
2830 |
|
2831 | function min(values) {
|
2832 | var smallest = Number(Infinity);
|
2833 | Object.keys(values).forEach(function (i) {
|
2834 | if (values[i] < smallest) {
|
2835 | smallest = values[i];
|
2836 | }
|
2837 | });
|
2838 | return smallest;
|
2839 | }
|
2840 | module.exports = exports.default;
|
2841 |
|
2842 | }),
|
2843 |
|
2844 | "./src/util/observer.js":
|
2845 |
|
2846 |
|
2847 |
|
2848 | ((module, exports) => {
|
2849 |
|
2850 | "use strict";
|
2851 |
|
2852 |
|
2853 | Object.defineProperty(exports, "__esModule", ({
|
2854 | value: true
|
2855 | }));
|
2856 | exports["default"] = void 0;
|
2857 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
2858 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
2859 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
2860 |
|
2861 |
|
2862 |
|
2863 |
|
2864 |
|
2865 |
|
2866 |
|
2867 |
|
2868 |
|
2869 | var Observer = function () {
|
2870 | |
2871 |
|
2872 |
|
2873 | function Observer() {
|
2874 | _classCallCheck(this, Observer);
|
2875 | |
2876 |
|
2877 |
|
2878 |
|
2879 |
|
2880 | this._disabledEventEmissions = [];
|
2881 | this.handlers = null;
|
2882 | }
|
2883 | |
2884 |
|
2885 |
|
2886 |
|
2887 |
|
2888 |
|
2889 |
|
2890 | _createClass(Observer, [{
|
2891 | key: "on",
|
2892 | value: function on(event, fn) {
|
2893 | var _this = this;
|
2894 | if (!this.handlers) {
|
2895 | this.handlers = {};
|
2896 | }
|
2897 | var handlers = this.handlers[event];
|
2898 | if (!handlers) {
|
2899 | handlers = this.handlers[event] = [];
|
2900 | }
|
2901 | handlers.push(fn);
|
2902 |
|
2903 |
|
2904 | return {
|
2905 | name: event,
|
2906 | callback: fn,
|
2907 | un: function un(e, fn) {
|
2908 | return _this.un(e, fn);
|
2909 | }
|
2910 | };
|
2911 | }
|
2912 |
|
2913 | |
2914 |
|
2915 |
|
2916 |
|
2917 |
|
2918 |
|
2919 |
|
2920 | }, {
|
2921 | key: "un",
|
2922 | value: function un(event, fn) {
|
2923 | if (!this.handlers) {
|
2924 | return;
|
2925 | }
|
2926 | var handlers = this.handlers[event];
|
2927 | var i;
|
2928 | if (handlers) {
|
2929 | if (fn) {
|
2930 | for (i = handlers.length - 1; i >= 0; i--) {
|
2931 | if (handlers[i] == fn) {
|
2932 | handlers.splice(i, 1);
|
2933 | }
|
2934 | }
|
2935 | } else {
|
2936 | handlers.length = 0;
|
2937 | }
|
2938 | }
|
2939 | }
|
2940 |
|
2941 | |
2942 |
|
2943 |
|
2944 | }, {
|
2945 | key: "unAll",
|
2946 | value: function unAll() {
|
2947 | this.handlers = null;
|
2948 | }
|
2949 |
|
2950 | |
2951 |
|
2952 |
|
2953 |
|
2954 |
|
2955 |
|
2956 |
|
2957 |
|
2958 | }, {
|
2959 | key: "once",
|
2960 | value: function once(event, handler) {
|
2961 | var _this2 = this;
|
2962 | var fn = function fn() {
|
2963 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
2964 | args[_key] = arguments[_key];
|
2965 | }
|
2966 |
|
2967 | handler.apply(_this2, args);
|
2968 |
|
2969 | setTimeout(function () {
|
2970 | _this2.un(event, fn);
|
2971 | }, 0);
|
2972 | };
|
2973 | return this.on(event, fn);
|
2974 | }
|
2975 |
|
2976 | |
2977 |
|
2978 |
|
2979 |
|
2980 |
|
2981 |
|
2982 |
|
2983 |
|
2984 |
|
2985 |
|
2986 | }, {
|
2987 | key: "setDisabledEventEmissions",
|
2988 | value: function setDisabledEventEmissions(eventNames) {
|
2989 | this._disabledEventEmissions = eventNames;
|
2990 | }
|
2991 |
|
2992 | |
2993 |
|
2994 |
|
2995 |
|
2996 | }, {
|
2997 | key: "_isDisabledEventEmission",
|
2998 | value: function _isDisabledEventEmission(event) {
|
2999 | return this._disabledEventEmissions && this._disabledEventEmissions.includes(event);
|
3000 | }
|
3001 |
|
3002 | |
3003 |
|
3004 |
|
3005 |
|
3006 |
|
3007 |
|
3008 | }, {
|
3009 | key: "fireEvent",
|
3010 | value: function fireEvent(event) {
|
3011 | for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
3012 | args[_key2 - 1] = arguments[_key2];
|
3013 | }
|
3014 | if (!this.handlers || this._isDisabledEventEmission(event)) {
|
3015 | return;
|
3016 | }
|
3017 | var handlers = this.handlers[event];
|
3018 | handlers && handlers.forEach(function (fn) {
|
3019 | fn.apply(void 0, args);
|
3020 | });
|
3021 | }
|
3022 | }]);
|
3023 | return Observer;
|
3024 | }();
|
3025 | exports["default"] = Observer;
|
3026 | module.exports = exports.default;
|
3027 |
|
3028 | }),
|
3029 |
|
3030 | "./src/util/orientation.js":
|
3031 |
|
3032 |
|
3033 |
|
3034 | ((module, exports) => {
|
3035 |
|
3036 | "use strict";
|
3037 |
|
3038 |
|
3039 | Object.defineProperty(exports, "__esModule", ({
|
3040 | value: true
|
3041 | }));
|
3042 | exports["default"] = withOrientation;
|
3043 | var verticalPropMap = {
|
3044 | width: 'height',
|
3045 | height: 'width',
|
3046 | overflowX: 'overflowY',
|
3047 | overflowY: 'overflowX',
|
3048 | clientWidth: 'clientHeight',
|
3049 | clientHeight: 'clientWidth',
|
3050 | clientX: 'clientY',
|
3051 | clientY: 'clientX',
|
3052 | scrollWidth: 'scrollHeight',
|
3053 | scrollLeft: 'scrollTop',
|
3054 | offsetLeft: 'offsetTop',
|
3055 | offsetTop: 'offsetLeft',
|
3056 | offsetHeight: 'offsetWidth',
|
3057 | offsetWidth: 'offsetHeight',
|
3058 | left: 'top',
|
3059 | right: 'bottom',
|
3060 | top: 'left',
|
3061 | bottom: 'right',
|
3062 | borderRightStyle: 'borderBottomStyle',
|
3063 | borderRightWidth: 'borderBottomWidth',
|
3064 | borderRightColor: 'borderBottomColor'
|
3065 | };
|
3066 |
|
3067 |
|
3068 |
|
3069 |
|
3070 |
|
3071 |
|
3072 |
|
3073 |
|
3074 | function mapProp(prop, vertical) {
|
3075 | if (Object.prototype.hasOwnProperty.call(verticalPropMap, prop)) {
|
3076 | return vertical ? verticalPropMap[prop] : prop;
|
3077 | } else {
|
3078 | return prop;
|
3079 | }
|
3080 | }
|
3081 | var isProxy = Symbol("isProxy");
|
3082 |
|
3083 |
|
3084 |
|
3085 |
|
3086 |
|
3087 |
|
3088 |
|
3089 |
|
3090 |
|
3091 |
|
3092 |
|
3093 |
|
3094 |
|
3095 |
|
3096 |
|
3097 | function withOrientation(target, vertical) {
|
3098 | if (target[isProxy]) {
|
3099 | return target;
|
3100 | } else {
|
3101 | return new Proxy(target, {
|
3102 | get: function get(obj, prop, receiver) {
|
3103 | if (prop === isProxy) {
|
3104 | return true;
|
3105 | } else if (prop === 'domElement') {
|
3106 | return obj;
|
3107 | } else if (prop === 'style') {
|
3108 | return withOrientation(obj.style, vertical);
|
3109 | } else if (prop === 'canvas') {
|
3110 | return withOrientation(obj.canvas, vertical);
|
3111 | } else if (prop === 'getBoundingClientRect') {
|
3112 | return function () {
|
3113 | return withOrientation(obj.getBoundingClientRect.apply(obj, arguments), vertical);
|
3114 | };
|
3115 | } else if (prop === 'getContext') {
|
3116 | return function () {
|
3117 | return withOrientation(obj.getContext.apply(obj, arguments), vertical);
|
3118 | };
|
3119 | } else {
|
3120 | var value = obj[mapProp(prop, vertical)];
|
3121 | return typeof value == 'function' ? value.bind(obj) : value;
|
3122 | }
|
3123 | },
|
3124 | set: function set(obj, prop, value) {
|
3125 | obj[mapProp(prop, vertical)] = value;
|
3126 | return true;
|
3127 | }
|
3128 | });
|
3129 | }
|
3130 | }
|
3131 | module.exports = exports.default;
|
3132 |
|
3133 | }),
|
3134 |
|
3135 | "./src/util/prevent-click.js":
|
3136 |
|
3137 |
|
3138 |
|
3139 | ((module, exports) => {
|
3140 |
|
3141 | "use strict";
|
3142 |
|
3143 |
|
3144 | Object.defineProperty(exports, "__esModule", ({
|
3145 | value: true
|
3146 | }));
|
3147 | exports["default"] = preventClick;
|
3148 |
|
3149 |
|
3150 |
|
3151 |
|
3152 |
|
3153 |
|
3154 | function preventClickHandler(event) {
|
3155 | event.stopPropagation();
|
3156 | document.body.removeEventListener('click', preventClickHandler, true);
|
3157 | }
|
3158 |
|
3159 |
|
3160 |
|
3161 |
|
3162 |
|
3163 |
|
3164 | function preventClick(values) {
|
3165 | document.body.addEventListener('click', preventClickHandler, true);
|
3166 | }
|
3167 | module.exports = exports.default;
|
3168 |
|
3169 | }),
|
3170 |
|
3171 | "./src/util/request-animation-frame.js":
|
3172 |
|
3173 |
|
3174 |
|
3175 | ((module, exports) => {
|
3176 |
|
3177 | "use strict";
|
3178 |
|
3179 |
|
3180 | Object.defineProperty(exports, "__esModule", ({
|
3181 | value: true
|
3182 | }));
|
3183 | exports["default"] = void 0;
|
3184 |
|
3185 |
|
3186 |
|
3187 |
|
3188 |
|
3189 |
|
3190 |
|
3191 | var _default = (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback, element) {
|
3192 | return setTimeout(callback, 1000 / 60);
|
3193 | }).bind(window);
|
3194 | exports["default"] = _default;
|
3195 | module.exports = exports.default;
|
3196 |
|
3197 | }),
|
3198 |
|
3199 | "./src/util/silence-mode.js":
|
3200 |
|
3201 |
|
3202 |
|
3203 | ((module, exports) => {
|
3204 |
|
3205 | "use strict";
|
3206 |
|
3207 |
|
3208 | Object.defineProperty(exports, "__esModule", ({
|
3209 | value: true
|
3210 | }));
|
3211 | exports["default"] = ignoreSilenceMode;
|
3212 |
|
3213 |
|
3214 |
|
3215 |
|
3216 |
|
3217 |
|
3218 |
|
3219 |
|
3220 |
|
3221 |
|
3222 |
|
3223 | function ignoreSilenceMode() {
|
3224 |
|
3225 |
|
3226 |
|
3227 |
|
3228 | var audioData = "data:audio/mpeg;base64,//uQxAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAACAAACcQCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA//////////////////////////////////////////////////////////////////8AAABhTEFNRTMuMTAwA8MAAAAAAAAAABQgJAUHQQAB9AAAAnGMHkkIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//sQxAADgnABGiAAQBCqgCRMAAgEAH///////////////7+n/9FTuQsQH//////2NG0jWUGlio5gLQTOtIoeR2WX////X4s9Atb/JRVCbBUpeRUq//////////////////9RUi0f2jn/+xDECgPCjAEQAABN4AAANIAAAAQVTEFNRTMuMTAwVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVQ==";
|
3229 |
|
3230 |
|
3231 | var tmp = document.createElement("div");
|
3232 | tmp.innerHTML = '<audio x-webkit-airplay="deny"></audio>';
|
3233 | var audioSilentMode = tmp.children.item(0);
|
3234 | audioSilentMode.src = audioData;
|
3235 | audioSilentMode.preload = "auto";
|
3236 | audioSilentMode.type = "audio/mpeg";
|
3237 | audioSilentMode.disableRemotePlayback = true;
|
3238 |
|
3239 |
|
3240 | audioSilentMode.play();
|
3241 |
|
3242 |
|
3243 | audioSilentMode.remove();
|
3244 | tmp.remove();
|
3245 | }
|
3246 | module.exports = exports.default;
|
3247 |
|
3248 | }),
|
3249 |
|
3250 | "./src/util/style.js":
|
3251 |
|
3252 |
|
3253 |
|
3254 | ((module, exports) => {
|
3255 |
|
3256 | "use strict";
|
3257 |
|
3258 |
|
3259 | Object.defineProperty(exports, "__esModule", ({
|
3260 | value: true
|
3261 | }));
|
3262 | exports["default"] = style;
|
3263 |
|
3264 |
|
3265 |
|
3266 |
|
3267 |
|
3268 |
|
3269 |
|
3270 |
|
3271 | function style(el, styles) {
|
3272 | Object.keys(styles).forEach(function (prop) {
|
3273 | if (el.style[prop] !== styles[prop]) {
|
3274 | el.style[prop] = styles[prop];
|
3275 | }
|
3276 | });
|
3277 | return el;
|
3278 | }
|
3279 | module.exports = exports.default;
|
3280 |
|
3281 | }),
|
3282 |
|
3283 | "./src/wavesurfer.js":
|
3284 |
|
3285 |
|
3286 |
|
3287 | ((module, exports, __webpack_require__) => {
|
3288 |
|
3289 | "use strict";
|
3290 |
|
3291 |
|
3292 | function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
3293 | Object.defineProperty(exports, "__esModule", ({
|
3294 | value: true
|
3295 | }));
|
3296 | exports["default"] = void 0;
|
3297 | var util = _interopRequireWildcard(__webpack_require__( "./src/util/index.js"));
|
3298 | var _drawer = _interopRequireDefault(__webpack_require__( "./src/drawer.multicanvas.js"));
|
3299 | var _webaudio = _interopRequireDefault(__webpack_require__( "./src/webaudio.js"));
|
3300 | var _mediaelement = _interopRequireDefault(__webpack_require__( "./src/mediaelement.js"));
|
3301 | var _peakcache = _interopRequireDefault(__webpack_require__( "./src/peakcache.js"));
|
3302 | var _mediaelementWebaudio = _interopRequireDefault(__webpack_require__( "./src/mediaelement-webaudio.js"));
|
3303 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
3304 | function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
3305 | function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
3306 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
3307 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
3308 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
3309 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
3310 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
3311 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
3312 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
3313 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
3314 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
3315 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
3316 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
3317 |
|
3318 |
|
3319 |
|
3320 |
|
3321 |
|
3322 |
|
3323 |
|
3324 |
|
3325 |
|
3326 |
|
3327 |
|
3328 |
|
3329 |
|
3330 |
|
3331 |
|
3332 |
|
3333 |
|
3334 |
|
3335 |
|
3336 |
|
3337 |
|
3338 |
|
3339 |
|
3340 |
|
3341 |
|
3342 |
|
3343 |
|
3344 |
|
3345 |
|
3346 |
|
3347 |
|
3348 |
|
3349 |
|
3350 |
|
3351 |
|
3352 |
|
3353 |
|
3354 |
|
3355 |
|
3356 |
|
3357 |
|
3358 |
|
3359 |
|
3360 |
|
3361 |
|
3362 |
|
3363 |
|
3364 |
|
3365 |
|
3366 |
|
3367 |
|
3368 |
|
3369 |
|
3370 |
|
3371 |
|
3372 |
|
3373 |
|
3374 |
|
3375 |
|
3376 |
|
3377 |
|
3378 |
|
3379 |
|
3380 |
|
3381 |
|
3382 |
|
3383 |
|
3384 |
|
3385 |
|
3386 |
|
3387 |
|
3388 |
|
3389 |
|
3390 |
|
3391 |
|
3392 |
|
3393 |
|
3394 |
|
3395 |
|
3396 |
|
3397 |
|
3398 |
|
3399 |
|
3400 |
|
3401 |
|
3402 |
|
3403 |
|
3404 |
|
3405 |
|
3406 |
|
3407 |
|
3408 |
|
3409 |
|
3410 |
|
3411 |
|
3412 |
|
3413 |
|
3414 |
|
3415 |
|
3416 |
|
3417 |
|
3418 |
|
3419 |
|
3420 |
|
3421 |
|
3422 |
|
3423 |
|
3424 |
|
3425 |
|
3426 |
|
3427 |
|
3428 |
|
3429 |
|
3430 |
|
3431 |
|
3432 |
|
3433 |
|
3434 |
|
3435 |
|
3436 |
|
3437 |
|
3438 |
|
3439 |
|
3440 |
|
3441 |
|
3442 |
|
3443 |
|
3444 |
|
3445 |
|
3446 |
|
3447 |
|
3448 |
|
3449 |
|
3450 |
|
3451 |
|
3452 |
|
3453 |
|
3454 |
|
3455 |
|
3456 |
|
3457 |
|
3458 |
|
3459 |
|
3460 |
|
3461 |
|
3462 |
|
3463 |
|
3464 |
|
3465 |
|
3466 |
|
3467 |
|
3468 |
|
3469 |
|
3470 |
|
3471 |
|
3472 |
|
3473 |
|
3474 |
|
3475 |
|
3476 |
|
3477 |
|
3478 |
|
3479 |
|
3480 |
|
3481 |
|
3482 |
|
3483 |
|
3484 |
|
3485 |
|
3486 |
|
3487 |
|
3488 |
|
3489 |
|
3490 |
|
3491 |
|
3492 |
|
3493 |
|
3494 |
|
3495 | var PluginClass = function () {
|
3496 | |
3497 |
|
3498 |
|
3499 |
|
3500 |
|
3501 |
|
3502 | function PluginClass(params, ws) {
|
3503 | _classCallCheck(this, PluginClass);
|
3504 | }
|
3505 | |
3506 |
|
3507 |
|
3508 |
|
3509 |
|
3510 |
|
3511 | _createClass(PluginClass, [{
|
3512 | key: "create",
|
3513 | value:
|
3514 | |
3515 |
|
3516 |
|
3517 |
|
3518 |
|
3519 |
|
3520 |
|
3521 |
|
3522 |
|
3523 |
|
3524 | function create(params) {}
|
3525 | }, {
|
3526 | key: "init",
|
3527 | value: function init() {}
|
3528 | |
3529 |
|
3530 |
|
3531 |
|
3532 |
|
3533 |
|
3534 | }, {
|
3535 | key: "destroy",
|
3536 | value: function destroy() {}
|
3537 | }]);
|
3538 | return PluginClass;
|
3539 | }();
|
3540 |
|
3541 |
|
3542 |
|
3543 |
|
3544 |
|
3545 |
|
3546 |
|
3547 |
|
3548 |
|
3549 |
|
3550 |
|
3551 |
|
3552 |
|
3553 |
|
3554 |
|
3555 |
|
3556 |
|
3557 |
|
3558 |
|
3559 |
|
3560 |
|
3561 | var WaveSurfer = function (_util$Observer) {
|
3562 | _inherits(WaveSurfer, _util$Observer);
|
3563 | var _super = _createSuper(WaveSurfer);
|
3564 | |
3565 |
|
3566 |
|
3567 |
|
3568 |
|
3569 |
|
3570 |
|
3571 |
|
3572 | function WaveSurfer(params) {
|
3573 | var _this;
|
3574 | _classCallCheck(this, WaveSurfer);
|
3575 | _this = _super.call(this);
|
3576 | |
3577 |
|
3578 |
|
3579 |
|
3580 | _defineProperty(_assertThisInitialized(_this), "defaultParams", {
|
3581 | audioContext: null,
|
3582 | audioScriptProcessor: null,
|
3583 | audioRate: 1,
|
3584 | autoCenter: true,
|
3585 | autoCenterRate: 5,
|
3586 | autoCenterImmediately: false,
|
3587 | backend: 'WebAudio',
|
3588 | backgroundColor: null,
|
3589 | barHeight: 1,
|
3590 | barRadius: 0,
|
3591 | barGap: null,
|
3592 | barMinHeight: null,
|
3593 | container: null,
|
3594 | cursorColor: '#333',
|
3595 | cursorWidth: 1,
|
3596 | dragSelection: true,
|
3597 | drawingContextAttributes: {
|
3598 |
|
3599 |
|
3600 |
|
3601 | desynchronized: false
|
3602 | },
|
3603 | duration: null,
|
3604 | fillParent: true,
|
3605 | forceDecode: false,
|
3606 | height: 128,
|
3607 | hideScrollbar: false,
|
3608 | hideCursor: false,
|
3609 | ignoreSilenceMode: false,
|
3610 | interact: true,
|
3611 | loopSelection: true,
|
3612 | maxCanvasWidth: 4000,
|
3613 | mediaContainer: null,
|
3614 | mediaControls: false,
|
3615 | mediaType: 'audio',
|
3616 | minPxPerSec: 20,
|
3617 | normalize: false,
|
3618 | partialRender: false,
|
3619 | pixelRatio: window.devicePixelRatio || screen.deviceXDPI / screen.logicalXDPI,
|
3620 | plugins: [],
|
3621 | progressColor: '#555',
|
3622 | removeMediaElementOnDestroy: true,
|
3623 | renderer: _drawer.default,
|
3624 | responsive: false,
|
3625 | rtl: false,
|
3626 | scrollParent: false,
|
3627 | skipLength: 2,
|
3628 | splitChannels: false,
|
3629 | splitChannelsOptions: {
|
3630 | overlay: false,
|
3631 | channelColors: {},
|
3632 | filterChannels: [],
|
3633 | relativeNormalization: false,
|
3634 | splitDragSelection: false
|
3635 | },
|
3636 | vertical: false,
|
3637 | waveColor: '#999',
|
3638 | xhr: {}
|
3639 | });
|
3640 | _defineProperty(_assertThisInitialized(_this), "backends", {
|
3641 | MediaElement: _mediaelement.default,
|
3642 | WebAudio: _webaudio.default,
|
3643 | MediaElementWebAudio: _mediaelementWebaudio.default
|
3644 | });
|
3645 | _defineProperty(_assertThisInitialized(_this), "util", util);
|
3646 | _this.params = Object.assign({}, _this.defaultParams, params);
|
3647 | _this.params.splitChannelsOptions = Object.assign({}, _this.defaultParams.splitChannelsOptions, params.splitChannelsOptions);
|
3648 |
|
3649 | _this.container = 'string' == typeof params.container ? document.querySelector(_this.params.container) : _this.params.container;
|
3650 | if (!_this.container) {
|
3651 | throw new Error('Container element not found');
|
3652 | }
|
3653 | if (_this.params.mediaContainer == null) {
|
3654 |
|
3655 | _this.mediaContainer = _this.container;
|
3656 | } else if (typeof _this.params.mediaContainer == 'string') {
|
3657 |
|
3658 | _this.mediaContainer = document.querySelector(_this.params.mediaContainer);
|
3659 | } else {
|
3660 |
|
3661 | _this.mediaContainer = _this.params.mediaContainer;
|
3662 | }
|
3663 | if (!_this.mediaContainer) {
|
3664 | throw new Error('Media Container element not found');
|
3665 | }
|
3666 | if (_this.params.maxCanvasWidth <= 1) {
|
3667 | throw new Error('maxCanvasWidth must be greater than 1');
|
3668 | } else if (_this.params.maxCanvasWidth % 2 == 1) {
|
3669 | throw new Error('maxCanvasWidth must be an even number');
|
3670 | }
|
3671 | if (_this.params.rtl === true) {
|
3672 | if (_this.params.vertical === true) {
|
3673 | util.style(_this.container, {
|
3674 | transform: 'rotateX(180deg)'
|
3675 | });
|
3676 | } else {
|
3677 | util.style(_this.container, {
|
3678 | transform: 'rotateY(180deg)'
|
3679 | });
|
3680 | }
|
3681 | }
|
3682 | if (_this.params.backgroundColor) {
|
3683 | _this.setBackgroundColor(_this.params.backgroundColor);
|
3684 | }
|
3685 |
|
3686 | |
3687 |
|
3688 |
|
3689 |
|
3690 |
|
3691 | _this.savedVolume = 0;
|
3692 |
|
3693 | |
3694 |
|
3695 |
|
3696 |
|
3697 | _this.isMuted = false;
|
3698 |
|
3699 | |
3700 |
|
3701 |
|
3702 |
|
3703 |
|
3704 | _this.tmpEvents = [];
|
3705 |
|
3706 | |
3707 |
|
3708 |
|
3709 |
|
3710 | _this.currentRequest = null;
|
3711 |
|
3712 | _this.arraybuffer = null;
|
3713 |
|
3714 | _this.drawer = null;
|
3715 |
|
3716 | _this.backend = null;
|
3717 |
|
3718 | _this.peakCache = null;
|
3719 |
|
3720 |
|
3721 | if (typeof _this.params.renderer !== 'function') {
|
3722 | throw new Error('Renderer parameter is invalid');
|
3723 | }
|
3724 | |
3725 |
|
3726 |
|
3727 | _this.Drawer = _this.params.renderer;
|
3728 | |
3729 |
|
3730 |
|
3731 |
|
3732 | if (_this.params.backend == 'AudioElement') {
|
3733 | _this.params.backend = 'MediaElement';
|
3734 | }
|
3735 | if ((_this.params.backend == 'WebAudio' || _this.params.backend === 'MediaElementWebAudio') && !_webaudio.default.prototype.supportsWebAudio.call(null)) {
|
3736 | _this.params.backend = 'MediaElement';
|
3737 | }
|
3738 | _this.Backend = _this.backends[_this.params.backend];
|
3739 |
|
3740 | |
3741 |
|
3742 |
|
3743 | _this.initialisedPluginList = {};
|
3744 |
|
3745 | _this.isDestroyed = false;
|
3746 |
|
3747 | |
3748 |
|
3749 |
|
3750 |
|
3751 |
|
3752 |
|
3753 | _this.isReady = false;
|
3754 |
|
3755 |
|
3756 |
|
3757 |
|
3758 | var prevWidth = 0;
|
3759 | _this._onResize = util.debounce(function () {
|
3760 | if (_this.drawer.wrapper && prevWidth != _this.drawer.wrapper.clientWidth && !_this.params.scrollParent) {
|
3761 | prevWidth = _this.drawer.wrapper.clientWidth;
|
3762 | if (prevWidth) {
|
3763 |
|
3764 | _this.drawer.fireEvent('redraw');
|
3765 | }
|
3766 | }
|
3767 | }, typeof _this.params.responsive === 'number' ? _this.params.responsive : 100);
|
3768 | return _possibleConstructorReturn(_this, _assertThisInitialized(_this));
|
3769 | }
|
3770 |
|
3771 | |
3772 |
|
3773 |
|
3774 |
|
3775 |
|
3776 |
|
3777 |
|
3778 |
|
3779 | _createClass(WaveSurfer, [{
|
3780 | key: "init",
|
3781 | value: function init() {
|
3782 | this.registerPlugins(this.params.plugins);
|
3783 | this.createDrawer();
|
3784 | this.createBackend();
|
3785 | this.createPeakCache();
|
3786 | return this;
|
3787 | }
|
3788 |
|
3789 | |
3790 |
|
3791 |
|
3792 |
|
3793 |
|
3794 |
|
3795 |
|
3796 |
|
3797 | }, {
|
3798 | key: "registerPlugins",
|
3799 | value: function registerPlugins(plugins) {
|
3800 | var _this2 = this;
|
3801 |
|
3802 | plugins.forEach(function (plugin) {
|
3803 | return _this2.addPlugin(plugin);
|
3804 | });
|
3805 |
|
3806 |
|
3807 | plugins.forEach(function (plugin) {
|
3808 |
|
3809 |
|
3810 | if (!plugin.deferInit) {
|
3811 | _this2.initPlugin(plugin.name);
|
3812 | }
|
3813 | });
|
3814 | this.fireEvent('plugins-registered', plugins);
|
3815 | return this;
|
3816 | }
|
3817 |
|
3818 | |
3819 |
|
3820 |
|
3821 |
|
3822 |
|
3823 |
|
3824 | }, {
|
3825 | key: "getActivePlugins",
|
3826 | value: function getActivePlugins() {
|
3827 | return this.initialisedPluginList;
|
3828 | }
|
3829 |
|
3830 | |
3831 |
|
3832 |
|
3833 |
|
3834 |
|
3835 |
|
3836 |
|
3837 |
|
3838 | }, {
|
3839 | key: "addPlugin",
|
3840 | value: function addPlugin(plugin) {
|
3841 | var _this3 = this;
|
3842 | if (!plugin.name) {
|
3843 | throw new Error('Plugin does not have a name!');
|
3844 | }
|
3845 | if (!plugin.instance) {
|
3846 | throw new Error("Plugin ".concat(plugin.name, " does not have an instance property!"));
|
3847 | }
|
3848 |
|
3849 |
|
3850 | if (plugin.staticProps) {
|
3851 | Object.keys(plugin.staticProps).forEach(function (pluginStaticProp) {
|
3852 | |
3853 |
|
3854 |
|
3855 |
|
3856 | _this3[pluginStaticProp] = plugin.staticProps[pluginStaticProp];
|
3857 | });
|
3858 | }
|
3859 | var Instance = plugin.instance;
|
3860 |
|
3861 |
|
3862 | var observerPrototypeKeys = Object.getOwnPropertyNames(util.Observer.prototype);
|
3863 | observerPrototypeKeys.forEach(function (key) {
|
3864 | Instance.prototype[key] = util.Observer.prototype[key];
|
3865 | });
|
3866 |
|
3867 | |
3868 |
|
3869 |
|
3870 |
|
3871 |
|
3872 | this[plugin.name] = new Instance(plugin.params || {}, this);
|
3873 | this.fireEvent('plugin-added', plugin.name);
|
3874 | return this;
|
3875 | }
|
3876 |
|
3877 | |
3878 |
|
3879 |
|
3880 |
|
3881 |
|
3882 |
|
3883 |
|
3884 |
|
3885 | }, {
|
3886 | key: "initPlugin",
|
3887 | value: function initPlugin(name) {
|
3888 | if (!this[name]) {
|
3889 | throw new Error("Plugin ".concat(name, " has not been added yet!"));
|
3890 | }
|
3891 | if (this.initialisedPluginList[name]) {
|
3892 |
|
3893 | this.destroyPlugin(name);
|
3894 | }
|
3895 | this[name].init();
|
3896 | this.initialisedPluginList[name] = true;
|
3897 | this.fireEvent('plugin-initialised', name);
|
3898 | return this;
|
3899 | }
|
3900 |
|
3901 | |
3902 |
|
3903 |
|
3904 |
|
3905 |
|
3906 |
|
3907 |
|
3908 |
|
3909 | }, {
|
3910 | key: "destroyPlugin",
|
3911 | value: function destroyPlugin(name) {
|
3912 | if (!this[name]) {
|
3913 | throw new Error("Plugin ".concat(name, " has not been added yet and cannot be destroyed!"));
|
3914 | }
|
3915 | if (!this.initialisedPluginList[name]) {
|
3916 | throw new Error("Plugin ".concat(name, " is not active and cannot be destroyed!"));
|
3917 | }
|
3918 | if (typeof this[name].destroy !== 'function') {
|
3919 | throw new Error("Plugin ".concat(name, " does not have a destroy function!"));
|
3920 | }
|
3921 | this[name].destroy();
|
3922 | delete this.initialisedPluginList[name];
|
3923 | this.fireEvent('plugin-destroyed', name);
|
3924 | return this;
|
3925 | }
|
3926 |
|
3927 | |
3928 |
|
3929 |
|
3930 |
|
3931 |
|
3932 |
|
3933 | }, {
|
3934 | key: "destroyAllPlugins",
|
3935 | value: function destroyAllPlugins() {
|
3936 | var _this4 = this;
|
3937 | Object.keys(this.initialisedPluginList).forEach(function (name) {
|
3938 | return _this4.destroyPlugin(name);
|
3939 | });
|
3940 | }
|
3941 |
|
3942 | |
3943 |
|
3944 |
|
3945 |
|
3946 |
|
3947 |
|
3948 | }, {
|
3949 | key: "createDrawer",
|
3950 | value: function createDrawer() {
|
3951 | var _this5 = this;
|
3952 | this.drawer = new this.Drawer(this.container, this.params);
|
3953 | this.drawer.init();
|
3954 | this.fireEvent('drawer-created', this.drawer);
|
3955 | if (this.params.responsive !== false) {
|
3956 | window.addEventListener('resize', this._onResize, true);
|
3957 | window.addEventListener('orientationchange', this._onResize, true);
|
3958 | }
|
3959 | this.drawer.on('redraw', function () {
|
3960 | _this5.drawBuffer();
|
3961 | _this5.drawer.progress(_this5.backend.getPlayedPercents());
|
3962 | });
|
3963 |
|
3964 |
|
3965 | this.drawer.on('click', function (e, progress) {
|
3966 | setTimeout(function () {
|
3967 | return _this5.seekTo(progress);
|
3968 | }, 0);
|
3969 | });
|
3970 |
|
3971 |
|
3972 | this.drawer.on('scroll', function (e) {
|
3973 | if (_this5.params.partialRender) {
|
3974 | _this5.drawBuffer();
|
3975 | }
|
3976 | _this5.fireEvent('scroll', e);
|
3977 | });
|
3978 | }
|
3979 |
|
3980 | |
3981 |
|
3982 |
|
3983 |
|
3984 |
|
3985 |
|
3986 | }, {
|
3987 | key: "createBackend",
|
3988 | value: function createBackend() {
|
3989 | var _this6 = this;
|
3990 | if (this.backend) {
|
3991 | this.backend.destroy();
|
3992 | }
|
3993 | this.backend = new this.Backend(this.params);
|
3994 | this.backend.init();
|
3995 | this.fireEvent('backend-created', this.backend);
|
3996 | this.backend.on('finish', function () {
|
3997 | _this6.drawer.progress(_this6.backend.getPlayedPercents());
|
3998 | _this6.fireEvent('finish');
|
3999 | });
|
4000 | this.backend.on('play', function () {
|
4001 | return _this6.fireEvent('play');
|
4002 | });
|
4003 | this.backend.on('pause', function () {
|
4004 | return _this6.fireEvent('pause');
|
4005 | });
|
4006 | this.backend.on('audioprocess', function (time) {
|
4007 | _this6.drawer.progress(_this6.backend.getPlayedPercents());
|
4008 | _this6.fireEvent('audioprocess', time);
|
4009 | });
|
4010 |
|
4011 |
|
4012 | if (this.params.backend === 'MediaElement' || this.params.backend === 'MediaElementWebAudio') {
|
4013 | this.backend.on('seek', function () {
|
4014 | _this6.drawer.progress(_this6.backend.getPlayedPercents());
|
4015 | });
|
4016 | this.backend.on('volume', function () {
|
4017 | var newVolume = _this6.getVolume();
|
4018 | _this6.fireEvent('volume', newVolume);
|
4019 | if (_this6.backend.isMuted !== _this6.isMuted) {
|
4020 | _this6.isMuted = _this6.backend.isMuted;
|
4021 | _this6.fireEvent('mute', _this6.isMuted);
|
4022 | }
|
4023 | });
|
4024 | }
|
4025 | }
|
4026 |
|
4027 | |
4028 |
|
4029 |
|
4030 |
|
4031 |
|
4032 | }, {
|
4033 | key: "createPeakCache",
|
4034 | value: function createPeakCache() {
|
4035 | if (this.params.partialRender) {
|
4036 | this.peakCache = new _peakcache.default();
|
4037 | }
|
4038 | }
|
4039 |
|
4040 | |
4041 |
|
4042 |
|
4043 |
|
4044 |
|
4045 |
|
4046 | }, {
|
4047 | key: "getDuration",
|
4048 | value: function getDuration() {
|
4049 | return this.backend.getDuration();
|
4050 | }
|
4051 |
|
4052 | |
4053 |
|
4054 |
|
4055 |
|
4056 |
|
4057 |
|
4058 | }, {
|
4059 | key: "getCurrentTime",
|
4060 | value: function getCurrentTime() {
|
4061 | return this.backend.getCurrentTime();
|
4062 | }
|
4063 |
|
4064 | |
4065 |
|
4066 |
|
4067 |
|
4068 |
|
4069 |
|
4070 | }, {
|
4071 | key: "setCurrentTime",
|
4072 | value: function setCurrentTime(seconds) {
|
4073 | if (seconds >= this.getDuration()) {
|
4074 | this.seekTo(1);
|
4075 | } else {
|
4076 | this.seekTo(seconds / this.getDuration());
|
4077 | }
|
4078 | }
|
4079 |
|
4080 | |
4081 |
|
4082 |
|
4083 |
|
4084 |
|
4085 |
|
4086 |
|
4087 |
|
4088 |
|
4089 |
|
4090 |
|
4091 |
|
4092 | }, {
|
4093 | key: "play",
|
4094 | value: function play(start, end) {
|
4095 | var _this7 = this;
|
4096 | if (this.params.ignoreSilenceMode) {
|
4097 |
|
4098 | util.ignoreSilenceMode();
|
4099 | }
|
4100 | this.fireEvent('interaction', function () {
|
4101 | return _this7.play(start, end);
|
4102 | });
|
4103 | return this.backend.play(start, end);
|
4104 | }
|
4105 |
|
4106 | |
4107 |
|
4108 |
|
4109 |
|
4110 |
|
4111 |
|
4112 | }, {
|
4113 | key: "setPlayEnd",
|
4114 | value: function setPlayEnd(position) {
|
4115 | this.backend.setPlayEnd(position);
|
4116 | }
|
4117 |
|
4118 | |
4119 |
|
4120 |
|
4121 |
|
4122 |
|
4123 |
|
4124 | }, {
|
4125 | key: "pause",
|
4126 | value: function pause() {
|
4127 | if (!this.backend.isPaused()) {
|
4128 | return this.backend.pause();
|
4129 | }
|
4130 | }
|
4131 |
|
4132 | |
4133 |
|
4134 |
|
4135 |
|
4136 |
|
4137 |
|
4138 | }, {
|
4139 | key: "playPause",
|
4140 | value: function playPause() {
|
4141 | return this.backend.isPaused() ? this.play() : this.pause();
|
4142 | }
|
4143 |
|
4144 | |
4145 |
|
4146 |
|
4147 |
|
4148 |
|
4149 |
|
4150 | }, {
|
4151 | key: "isPlaying",
|
4152 | value: function isPlaying() {
|
4153 | return !this.backend.isPaused();
|
4154 | }
|
4155 |
|
4156 | |
4157 |
|
4158 |
|
4159 |
|
4160 |
|
4161 |
|
4162 |
|
4163 | }, {
|
4164 | key: "skipBackward",
|
4165 | value: function skipBackward(seconds) {
|
4166 | this.skip(-seconds || -this.params.skipLength);
|
4167 | }
|
4168 |
|
4169 | |
4170 |
|
4171 |
|
4172 |
|
4173 |
|
4174 |
|
4175 |
|
4176 | }, {
|
4177 | key: "skipForward",
|
4178 | value: function skipForward(seconds) {
|
4179 | this.skip(seconds || this.params.skipLength);
|
4180 | }
|
4181 |
|
4182 | |
4183 |
|
4184 |
|
4185 |
|
4186 |
|
4187 |
|
4188 |
|
4189 |
|
4190 |
|
4191 | }, {
|
4192 | key: "skip",
|
4193 | value: function skip(offset) {
|
4194 | var duration = this.getDuration() || 1;
|
4195 | var position = this.getCurrentTime() || 0;
|
4196 | position = Math.max(0, Math.min(duration, position + (offset || 0)));
|
4197 | this.seekAndCenter(position / duration);
|
4198 | }
|
4199 |
|
4200 | |
4201 |
|
4202 |
|
4203 |
|
4204 |
|
4205 |
|
4206 |
|
4207 |
|
4208 | }, {
|
4209 | key: "seekAndCenter",
|
4210 | value: function seekAndCenter(progress) {
|
4211 | this.seekTo(progress);
|
4212 | this.drawer.recenter(progress);
|
4213 | }
|
4214 |
|
4215 | |
4216 |
|
4217 |
|
4218 |
|
4219 |
|
4220 |
|
4221 |
|
4222 |
|
4223 |
|
4224 |
|
4225 | }, {
|
4226 | key: "seekTo",
|
4227 | value: function seekTo(progress) {
|
4228 | var _this8 = this;
|
4229 |
|
4230 | if (typeof progress !== 'number' || !isFinite(progress) || progress < 0 || progress > 1) {
|
4231 | throw new Error('Error calling wavesurfer.seekTo, parameter must be a number between 0 and 1!');
|
4232 | }
|
4233 | this.fireEvent('interaction', function () {
|
4234 | return _this8.seekTo(progress);
|
4235 | });
|
4236 | var isWebAudioBackend = this.params.backend === 'WebAudio';
|
4237 | var paused = this.backend.isPaused();
|
4238 | if (isWebAudioBackend && !paused) {
|
4239 | this.backend.pause();
|
4240 | }
|
4241 |
|
4242 |
|
4243 | var oldScrollParent = this.params.scrollParent;
|
4244 | this.params.scrollParent = false;
|
4245 | this.backend.seekTo(progress * this.getDuration());
|
4246 | this.drawer.progress(progress);
|
4247 | if (isWebAudioBackend && !paused) {
|
4248 | this.backend.play();
|
4249 | }
|
4250 | this.params.scrollParent = oldScrollParent;
|
4251 | this.fireEvent('seek', progress);
|
4252 | }
|
4253 |
|
4254 | |
4255 |
|
4256 |
|
4257 |
|
4258 |
|
4259 | }, {
|
4260 | key: "stop",
|
4261 | value: function stop() {
|
4262 | this.pause();
|
4263 | this.seekTo(0);
|
4264 | this.drawer.progress(0);
|
4265 | }
|
4266 |
|
4267 | |
4268 |
|
4269 |
|
4270 |
|
4271 |
|
4272 |
|
4273 |
|
4274 |
|
4275 | }, {
|
4276 | key: "setSinkId",
|
4277 | value: function setSinkId(deviceId) {
|
4278 | return this.backend.setSinkId(deviceId);
|
4279 | }
|
4280 |
|
4281 | |
4282 |
|
4283 |
|
4284 |
|
4285 |
|
4286 |
|
4287 |
|
4288 | }, {
|
4289 | key: "setVolume",
|
4290 | value: function setVolume(newVolume) {
|
4291 | this.backend.setVolume(newVolume);
|
4292 | this.fireEvent('volume', newVolume);
|
4293 | }
|
4294 |
|
4295 | |
4296 |
|
4297 |
|
4298 |
|
4299 |
|
4300 |
|
4301 | }, {
|
4302 | key: "getVolume",
|
4303 | value: function getVolume() {
|
4304 | return this.backend.getVolume();
|
4305 | }
|
4306 |
|
4307 | |
4308 |
|
4309 |
|
4310 |
|
4311 |
|
4312 |
|
4313 |
|
4314 | }, {
|
4315 | key: "setPlaybackRate",
|
4316 | value: function setPlaybackRate(rate) {
|
4317 | this.backend.setPlaybackRate(rate);
|
4318 | }
|
4319 |
|
4320 | |
4321 |
|
4322 |
|
4323 |
|
4324 |
|
4325 | }, {
|
4326 | key: "getPlaybackRate",
|
4327 | value: function getPlaybackRate() {
|
4328 | return this.backend.getPlaybackRate();
|
4329 | }
|
4330 |
|
4331 | |
4332 |
|
4333 |
|
4334 |
|
4335 |
|
4336 |
|
4337 |
|
4338 |
|
4339 | }, {
|
4340 | key: "toggleMute",
|
4341 | value: function toggleMute() {
|
4342 | this.setMute(!this.isMuted);
|
4343 | }
|
4344 |
|
4345 | |
4346 |
|
4347 |
|
4348 |
|
4349 |
|
4350 |
|
4351 |
|
4352 |
|
4353 |
|
4354 |
|
4355 |
|
4356 | }, {
|
4357 | key: "setMute",
|
4358 | value: function setMute(mute) {
|
4359 |
|
4360 | if (mute === this.isMuted) {
|
4361 | this.fireEvent('mute', this.isMuted);
|
4362 | return;
|
4363 | }
|
4364 | if (this.backend.setMute) {
|
4365 |
|
4366 |
|
4367 | this.backend.setMute(mute);
|
4368 | this.isMuted = mute;
|
4369 | } else {
|
4370 | if (mute) {
|
4371 |
|
4372 |
|
4373 | this.savedVolume = this.backend.getVolume();
|
4374 | this.backend.setVolume(0);
|
4375 | this.isMuted = true;
|
4376 | this.fireEvent('volume', 0);
|
4377 | } else {
|
4378 |
|
4379 |
|
4380 | this.backend.setVolume(this.savedVolume);
|
4381 | this.isMuted = false;
|
4382 | this.fireEvent('volume', this.savedVolume);
|
4383 | }
|
4384 | }
|
4385 | this.fireEvent('mute', this.isMuted);
|
4386 | }
|
4387 |
|
4388 | |
4389 |
|
4390 |
|
4391 |
|
4392 |
|
4393 |
|
4394 | }, {
|
4395 | key: "getMute",
|
4396 | value: function getMute() {
|
4397 | return this.isMuted;
|
4398 | }
|
4399 |
|
4400 | |
4401 |
|
4402 |
|
4403 |
|
4404 |
|
4405 |
|
4406 |
|
4407 | }, {
|
4408 | key: "getFilters",
|
4409 | value: function getFilters() {
|
4410 | return this.backend.filters || [];
|
4411 | }
|
4412 |
|
4413 | |
4414 |
|
4415 |
|
4416 |
|
4417 |
|
4418 | }, {
|
4419 | key: "toggleScroll",
|
4420 | value: function toggleScroll() {
|
4421 | this.params.scrollParent = !this.params.scrollParent;
|
4422 | this.drawBuffer();
|
4423 | }
|
4424 |
|
4425 | |
4426 |
|
4427 |
|
4428 |
|
4429 |
|
4430 | }, {
|
4431 | key: "toggleInteraction",
|
4432 | value: function toggleInteraction() {
|
4433 | this.params.interact = !this.params.interact;
|
4434 | }
|
4435 |
|
4436 | |
4437 |
|
4438 |
|
4439 |
|
4440 |
|
4441 |
|
4442 | }, {
|
4443 | key: "getWaveColor",
|
4444 | value: function getWaveColor() {
|
4445 | var channelIdx = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
4446 | if (this.params.splitChannelsOptions.channelColors[channelIdx]) {
|
4447 | return this.params.splitChannelsOptions.channelColors[channelIdx].waveColor;
|
4448 | }
|
4449 | return this.params.waveColor;
|
4450 | }
|
4451 |
|
4452 | |
4453 |
|
4454 |
|
4455 |
|
4456 |
|
4457 |
|
4458 |
|
4459 | }, {
|
4460 | key: "setWaveColor",
|
4461 | value: function setWaveColor(color) {
|
4462 | var channelIdx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
4463 | if (this.params.splitChannelsOptions.channelColors[channelIdx]) {
|
4464 | this.params.splitChannelsOptions.channelColors[channelIdx].waveColor = color;
|
4465 | } else {
|
4466 | this.params.waveColor = color;
|
4467 | }
|
4468 | this.drawBuffer();
|
4469 | }
|
4470 |
|
4471 | |
4472 |
|
4473 |
|
4474 |
|
4475 |
|
4476 |
|
4477 | }, {
|
4478 | key: "getProgressColor",
|
4479 | value: function getProgressColor() {
|
4480 | var channelIdx = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
4481 | if (this.params.splitChannelsOptions.channelColors[channelIdx]) {
|
4482 | return this.params.splitChannelsOptions.channelColors[channelIdx].progressColor;
|
4483 | }
|
4484 | return this.params.progressColor;
|
4485 | }
|
4486 |
|
4487 | |
4488 |
|
4489 |
|
4490 |
|
4491 |
|
4492 |
|
4493 |
|
4494 | }, {
|
4495 | key: "setProgressColor",
|
4496 | value: function setProgressColor(color, channelIdx) {
|
4497 | if (this.params.splitChannelsOptions.channelColors[channelIdx]) {
|
4498 | this.params.splitChannelsOptions.channelColors[channelIdx].progressColor = color;
|
4499 | } else {
|
4500 | this.params.progressColor = color;
|
4501 | }
|
4502 | this.drawBuffer();
|
4503 | }
|
4504 |
|
4505 | |
4506 |
|
4507 |
|
4508 |
|
4509 |
|
4510 | }, {
|
4511 | key: "getBackgroundColor",
|
4512 | value: function getBackgroundColor() {
|
4513 | return this.params.backgroundColor;
|
4514 | }
|
4515 |
|
4516 | |
4517 |
|
4518 |
|
4519 |
|
4520 |
|
4521 |
|
4522 | }, {
|
4523 | key: "setBackgroundColor",
|
4524 | value: function setBackgroundColor(color) {
|
4525 | this.params.backgroundColor = color;
|
4526 | util.style(this.container, {
|
4527 | background: this.params.backgroundColor
|
4528 | });
|
4529 | }
|
4530 |
|
4531 | |
4532 |
|
4533 |
|
4534 |
|
4535 |
|
4536 |
|
4537 | }, {
|
4538 | key: "getCursorColor",
|
4539 | value: function getCursorColor() {
|
4540 | return this.params.cursorColor;
|
4541 | }
|
4542 |
|
4543 | |
4544 |
|
4545 |
|
4546 |
|
4547 |
|
4548 |
|
4549 |
|
4550 | }, {
|
4551 | key: "setCursorColor",
|
4552 | value: function setCursorColor(color) {
|
4553 | this.params.cursorColor = color;
|
4554 | this.drawer.updateCursor();
|
4555 | }
|
4556 |
|
4557 | |
4558 |
|
4559 |
|
4560 |
|
4561 |
|
4562 | }, {
|
4563 | key: "getHeight",
|
4564 | value: function getHeight() {
|
4565 | return this.params.height;
|
4566 | }
|
4567 |
|
4568 | |
4569 |
|
4570 |
|
4571 |
|
4572 |
|
4573 |
|
4574 | }, {
|
4575 | key: "setHeight",
|
4576 | value: function setHeight(height) {
|
4577 | this.params.height = height;
|
4578 | this.drawer.setHeight(height * this.params.pixelRatio);
|
4579 | this.drawBuffer();
|
4580 | }
|
4581 |
|
4582 | |
4583 |
|
4584 |
|
4585 |
|
4586 |
|
4587 |
|
4588 |
|
4589 |
|
4590 |
|
4591 |
|
4592 |
|
4593 |
|
4594 |
|
4595 | }, {
|
4596 | key: "setFilteredChannels",
|
4597 | value: function setFilteredChannels(channelIndices) {
|
4598 | this.params.splitChannelsOptions.filterChannels = channelIndices;
|
4599 | this.drawBuffer();
|
4600 | }
|
4601 |
|
4602 | |
4603 |
|
4604 |
|
4605 |
|
4606 |
|
4607 |
|
4608 | }, {
|
4609 | key: "drawBuffer",
|
4610 | value: function drawBuffer() {
|
4611 | var nominalWidth = Math.round(this.getDuration() * this.params.minPxPerSec * this.params.pixelRatio);
|
4612 | var parentWidth = this.drawer.getWidth();
|
4613 | var width = nominalWidth;
|
4614 |
|
4615 | var start = 0;
|
4616 | var end = Math.max(start + parentWidth, width);
|
4617 |
|
4618 | if (this.params.fillParent && (!this.params.scrollParent || nominalWidth < parentWidth)) {
|
4619 | width = parentWidth;
|
4620 | start = 0;
|
4621 | end = width;
|
4622 | }
|
4623 | var peaks;
|
4624 | if (this.params.partialRender) {
|
4625 | var newRanges = this.peakCache.addRangeToPeakCache(width, start, end);
|
4626 | var i;
|
4627 | for (i = 0; i < newRanges.length; i++) {
|
4628 | peaks = this.backend.getPeaks(width, newRanges[i][0], newRanges[i][1]);
|
4629 | this.drawer.drawPeaks(peaks, width, newRanges[i][0], newRanges[i][1]);
|
4630 | }
|
4631 | } else {
|
4632 | peaks = this.backend.getPeaks(width, start, end);
|
4633 | this.drawer.drawPeaks(peaks, width, start, end);
|
4634 | }
|
4635 | this.fireEvent('redraw', peaks, width);
|
4636 | }
|
4637 |
|
4638 | |
4639 |
|
4640 |
|
4641 |
|
4642 |
|
4643 |
|
4644 |
|
4645 |
|
4646 |
|
4647 |
|
4648 | }, {
|
4649 | key: "zoom",
|
4650 | value: function zoom(pxPerSec) {
|
4651 | if (!pxPerSec) {
|
4652 | this.params.minPxPerSec = this.defaultParams.minPxPerSec;
|
4653 | this.params.scrollParent = false;
|
4654 | } else {
|
4655 | this.params.minPxPerSec = pxPerSec;
|
4656 | this.params.scrollParent = true;
|
4657 | }
|
4658 | this.drawBuffer();
|
4659 | this.drawer.progress(this.backend.getPlayedPercents());
|
4660 | this.drawer.recenter(this.getCurrentTime() / this.getDuration());
|
4661 | this.fireEvent('zoom', pxPerSec);
|
4662 | }
|
4663 |
|
4664 | |
4665 |
|
4666 |
|
4667 |
|
4668 |
|
4669 |
|
4670 | }, {
|
4671 | key: "loadArrayBuffer",
|
4672 | value: function loadArrayBuffer(arraybuffer) {
|
4673 | var _this9 = this;
|
4674 | this.decodeArrayBuffer(arraybuffer, function (data) {
|
4675 | if (!_this9.isDestroyed) {
|
4676 | _this9.loadDecodedBuffer(data);
|
4677 | }
|
4678 | });
|
4679 | }
|
4680 |
|
4681 | |
4682 |
|
4683 |
|
4684 |
|
4685 |
|
4686 |
|
4687 |
|
4688 | }, {
|
4689 | key: "loadDecodedBuffer",
|
4690 | value: function loadDecodedBuffer(buffer) {
|
4691 | this.backend.load(buffer);
|
4692 | this.drawBuffer();
|
4693 | this.isReady = true;
|
4694 | this.fireEvent('ready');
|
4695 | }
|
4696 |
|
4697 | |
4698 |
|
4699 |
|
4700 |
|
4701 |
|
4702 |
|
4703 | }, {
|
4704 | key: "loadBlob",
|
4705 | value: function loadBlob(blob) {
|
4706 | var _this10 = this;
|
4707 |
|
4708 | var reader = new FileReader();
|
4709 | reader.addEventListener('progress', function (e) {
|
4710 | return _this10.onProgress(e);
|
4711 | });
|
4712 | reader.addEventListener('load', function (e) {
|
4713 | return _this10.loadArrayBuffer(e.target.result);
|
4714 | });
|
4715 | reader.addEventListener('error', function () {
|
4716 | return _this10.fireEvent('error', 'Error reading file');
|
4717 | });
|
4718 | reader.readAsArrayBuffer(blob);
|
4719 | this.empty();
|
4720 | }
|
4721 |
|
4722 | |
4723 |
|
4724 |
|
4725 |
|
4726 |
|
4727 |
|
4728 |
|
4729 |
|
4730 |
|
4731 |
|
4732 |
|
4733 |
|
4734 |
|
4735 |
|
4736 |
|
4737 |
|
4738 |
|
4739 |
|
4740 |
|
4741 |
|
4742 |
|
4743 |
|
4744 |
|
4745 |
|
4746 |
|
4747 |
|
4748 |
|
4749 | }, {
|
4750 | key: "load",
|
4751 | value: function load(url, peaks, preload, duration) {
|
4752 | if (!url) {
|
4753 | throw new Error('url parameter cannot be empty');
|
4754 | }
|
4755 | this.empty();
|
4756 | if (preload) {
|
4757 |
|
4758 |
|
4759 | var preloadIgnoreReasons = {
|
4760 | "Preload is not 'auto', 'none' or 'metadata'": ['auto', 'metadata', 'none'].indexOf(preload) === -1,
|
4761 | 'Peaks are not provided': !peaks,
|
4762 | "Backend is not of type 'MediaElement' or 'MediaElementWebAudio'": ['MediaElement', 'MediaElementWebAudio'].indexOf(this.params.backend) === -1,
|
4763 | 'Url is not of type string': typeof url !== 'string'
|
4764 | };
|
4765 | var activeReasons = Object.keys(preloadIgnoreReasons).filter(function (reason) {
|
4766 | return preloadIgnoreReasons[reason];
|
4767 | });
|
4768 | if (activeReasons.length) {
|
4769 |
|
4770 | console.warn('Preload parameter of wavesurfer.load will be ignored because:\n\t- ' + activeReasons.join('\n\t- '));
|
4771 |
|
4772 | preload = null;
|
4773 | }
|
4774 | }
|
4775 |
|
4776 |
|
4777 |
|
4778 | if (this.params.backend === 'WebAudio' && url instanceof HTMLMediaElement) {
|
4779 | url = url.src;
|
4780 | }
|
4781 | switch (this.params.backend) {
|
4782 | case 'WebAudio':
|
4783 | return this.loadBuffer(url, peaks, duration);
|
4784 | case 'MediaElement':
|
4785 | case 'MediaElementWebAudio':
|
4786 | return this.loadMediaElement(url, peaks, preload, duration);
|
4787 | }
|
4788 | }
|
4789 |
|
4790 | |
4791 |
|
4792 |
|
4793 |
|
4794 |
|
4795 |
|
4796 |
|
4797 |
|
4798 |
|
4799 |
|
4800 | }, {
|
4801 | key: "loadBuffer",
|
4802 | value: function loadBuffer(url, peaks, duration) {
|
4803 | var _this11 = this;
|
4804 | var load = function load(action) {
|
4805 | if (action) {
|
4806 | _this11.tmpEvents.push(_this11.once('ready', action));
|
4807 | }
|
4808 | return _this11.getArrayBuffer(url, function (data) {
|
4809 | return _this11.loadArrayBuffer(data);
|
4810 | });
|
4811 | };
|
4812 | if (peaks) {
|
4813 | this.backend.setPeaks(peaks, duration);
|
4814 | this.drawBuffer();
|
4815 | this.fireEvent('waveform-ready');
|
4816 | this.tmpEvents.push(this.once('interaction', load));
|
4817 | } else {
|
4818 | return load();
|
4819 | }
|
4820 | }
|
4821 |
|
4822 | |
4823 |
|
4824 |
|
4825 |
|
4826 |
|
4827 |
|
4828 |
|
4829 |
|
4830 |
|
4831 |
|
4832 |
|
4833 |
|
4834 |
|
4835 | }, {
|
4836 | key: "loadMediaElement",
|
4837 | value: function loadMediaElement(urlOrElt, peaks, preload, duration) {
|
4838 | var _this12 = this;
|
4839 | var url = urlOrElt;
|
4840 | if (typeof urlOrElt === 'string') {
|
4841 | this.backend.load(url, this.mediaContainer, peaks, preload);
|
4842 | } else {
|
4843 | var elt = urlOrElt;
|
4844 | this.backend.loadElt(elt, peaks);
|
4845 |
|
4846 |
|
4847 |
|
4848 | url = elt.src;
|
4849 | }
|
4850 | this.tmpEvents.push(this.backend.once('canplay', function () {
|
4851 |
|
4852 | if (!_this12.backend.destroyed) {
|
4853 | _this12.drawBuffer();
|
4854 | _this12.isReady = true;
|
4855 | _this12.fireEvent('ready');
|
4856 | }
|
4857 | }), this.backend.once('error', function (err) {
|
4858 | return _this12.fireEvent('error', err);
|
4859 | }));
|
4860 |
|
4861 |
|
4862 | if (peaks) {
|
4863 | this.backend.setPeaks(peaks, duration);
|
4864 | this.drawBuffer();
|
4865 | this.fireEvent('waveform-ready');
|
4866 | }
|
4867 |
|
4868 |
|
4869 |
|
4870 |
|
4871 | if ((!peaks || this.params.forceDecode) && this.backend.supportsWebAudio()) {
|
4872 | this.getArrayBuffer(url, function (arraybuffer) {
|
4873 | _this12.decodeArrayBuffer(arraybuffer, function (buffer) {
|
4874 | _this12.backend.buffer = buffer;
|
4875 | _this12.backend.setPeaks(null);
|
4876 | _this12.drawBuffer();
|
4877 | _this12.fireEvent('waveform-ready');
|
4878 | });
|
4879 | });
|
4880 | }
|
4881 | }
|
4882 |
|
4883 | |
4884 |
|
4885 |
|
4886 |
|
4887 |
|
4888 |
|
4889 |
|
4890 | }, {
|
4891 | key: "decodeArrayBuffer",
|
4892 | value: function decodeArrayBuffer(arraybuffer, callback) {
|
4893 | var _this13 = this;
|
4894 | if (!this.isDestroyed) {
|
4895 | this.arraybuffer = arraybuffer;
|
4896 | this.backend.decodeArrayBuffer(arraybuffer, function (data) {
|
4897 |
|
4898 |
|
4899 | if (!_this13.isDestroyed && _this13.arraybuffer == arraybuffer) {
|
4900 | callback(data);
|
4901 | _this13.arraybuffer = null;
|
4902 | }
|
4903 | }, function () {
|
4904 | return _this13.fireEvent('error', 'Error decoding audiobuffer');
|
4905 | });
|
4906 | }
|
4907 | }
|
4908 |
|
4909 | |
4910 |
|
4911 |
|
4912 |
|
4913 |
|
4914 |
|
4915 |
|
4916 |
|
4917 | }, {
|
4918 | key: "getArrayBuffer",
|
4919 | value: function getArrayBuffer(url, callback) {
|
4920 | var _this14 = this;
|
4921 | var options = Object.assign({
|
4922 | url: url,
|
4923 | responseType: 'arraybuffer'
|
4924 | }, this.params.xhr);
|
4925 | var request = util.fetchFile(options);
|
4926 | this.currentRequest = request;
|
4927 | this.tmpEvents.push(request.on('progress', function (e) {
|
4928 | _this14.onProgress(e);
|
4929 | }), request.on('success', function (data) {
|
4930 | callback(data);
|
4931 | _this14.currentRequest = null;
|
4932 | }), request.on('error', function (e) {
|
4933 | _this14.fireEvent('error', e);
|
4934 | _this14.currentRequest = null;
|
4935 | }));
|
4936 | return request;
|
4937 | }
|
4938 |
|
4939 | |
4940 |
|
4941 |
|
4942 |
|
4943 |
|
4944 |
|
4945 |
|
4946 | }, {
|
4947 | key: "onProgress",
|
4948 | value: function onProgress(e) {
|
4949 | var percentComplete;
|
4950 | if (e.lengthComputable) {
|
4951 | percentComplete = e.loaded / e.total;
|
4952 | } else {
|
4953 |
|
4954 |
|
4955 | percentComplete = e.loaded / (e.loaded + 1000000);
|
4956 | }
|
4957 | this.fireEvent('loading', Math.round(percentComplete * 100), e.target);
|
4958 | }
|
4959 |
|
4960 | |
4961 |
|
4962 |
|
4963 |
|
4964 |
|
4965 |
|
4966 |
|
4967 |
|
4968 |
|
4969 |
|
4970 |
|
4971 |
|
4972 | }, {
|
4973 | key: "exportPCM",
|
4974 | value: function exportPCM(length, accuracy, noWindow, start, end) {
|
4975 | length = length || 1024;
|
4976 | start = start || 0;
|
4977 | accuracy = accuracy || 10000;
|
4978 | noWindow = noWindow || false;
|
4979 | var peaks = this.backend.getPeaks(length, start, end);
|
4980 | var arr = [].map.call(peaks, function (val) {
|
4981 | return Math.round(val * accuracy) / accuracy;
|
4982 | });
|
4983 | return new Promise(function (resolve, reject) {
|
4984 | if (!noWindow) {
|
4985 | var blobJSON = new Blob([JSON.stringify(arr)], {
|
4986 | type: 'application/json;charset=utf-8'
|
4987 | });
|
4988 | var objURL = URL.createObjectURL(blobJSON);
|
4989 | window.open(objURL);
|
4990 | URL.revokeObjectURL(objURL);
|
4991 | }
|
4992 | resolve(arr);
|
4993 | });
|
4994 | }
|
4995 |
|
4996 | |
4997 |
|
4998 |
|
4999 |
|
5000 |
|
5001 |
|
5002 |
|
5003 |
|
5004 |
|
5005 |
|
5006 |
|
5007 |
|
5008 |
|
5009 |
|
5010 |
|
5011 |
|
5012 |
|
5013 |
|
5014 | }, {
|
5015 | key: "exportImage",
|
5016 | value: function exportImage(format, quality, type) {
|
5017 | if (!format) {
|
5018 | format = 'image/png';
|
5019 | }
|
5020 | if (!quality) {
|
5021 | quality = 1;
|
5022 | }
|
5023 | if (!type) {
|
5024 | type = 'dataURL';
|
5025 | }
|
5026 | return this.drawer.getImage(format, quality, type);
|
5027 | }
|
5028 |
|
5029 | |
5030 |
|
5031 |
|
5032 | }, {
|
5033 | key: "cancelAjax",
|
5034 | value: function cancelAjax() {
|
5035 | if (this.currentRequest && this.currentRequest.controller) {
|
5036 |
|
5037 |
|
5038 |
|
5039 | if (this.currentRequest._reader) {
|
5040 |
|
5041 | this.currentRequest._reader.cancel().catch(function (err) {});
|
5042 | }
|
5043 | this.currentRequest.controller.abort();
|
5044 | this.currentRequest = null;
|
5045 | }
|
5046 | }
|
5047 |
|
5048 | |
5049 |
|
5050 |
|
5051 | }, {
|
5052 | key: "clearTmpEvents",
|
5053 | value: function clearTmpEvents() {
|
5054 | this.tmpEvents.forEach(function (e) {
|
5055 | return e.un();
|
5056 | });
|
5057 | }
|
5058 |
|
5059 | |
5060 |
|
5061 |
|
5062 | }, {
|
5063 | key: "empty",
|
5064 | value: function empty() {
|
5065 | if (!this.backend.isPaused()) {
|
5066 | this.stop();
|
5067 | this.backend.disconnectSource();
|
5068 | }
|
5069 | this.isReady = false;
|
5070 | this.cancelAjax();
|
5071 | this.clearTmpEvents();
|
5072 |
|
5073 |
|
5074 | this.drawer.progress(0);
|
5075 | this.drawer.setWidth(0);
|
5076 | this.drawer.drawPeaks({
|
5077 | length: this.drawer.getWidth()
|
5078 | }, 0);
|
5079 | }
|
5080 |
|
5081 | |
5082 |
|
5083 |
|
5084 |
|
5085 |
|
5086 | }, {
|
5087 | key: "destroy",
|
5088 | value: function destroy() {
|
5089 | this.destroyAllPlugins();
|
5090 | this.fireEvent('destroy');
|
5091 | this.cancelAjax();
|
5092 | this.clearTmpEvents();
|
5093 | this.unAll();
|
5094 | if (this.params.responsive !== false) {
|
5095 | window.removeEventListener('resize', this._onResize, true);
|
5096 | window.removeEventListener('orientationchange', this._onResize, true);
|
5097 | }
|
5098 | if (this.backend) {
|
5099 | this.backend.destroy();
|
5100 |
|
5101 | this.backend = null;
|
5102 | }
|
5103 | if (this.drawer) {
|
5104 | this.drawer.destroy();
|
5105 | }
|
5106 | this.isDestroyed = true;
|
5107 | this.isReady = false;
|
5108 | this.arraybuffer = null;
|
5109 | }
|
5110 | }], [{
|
5111 | key: "create",
|
5112 | value:
|
5113 |
|
5114 |
|
5115 |
|
5116 | |
5117 |
|
5118 |
|
5119 |
|
5120 |
|
5121 |
|
5122 |
|
5123 | function create(params) {
|
5124 | var wavesurfer = new WaveSurfer(params);
|
5125 | return wavesurfer.init();
|
5126 | }
|
5127 |
|
5128 | |
5129 |
|
5130 |
|
5131 |
|
5132 |
|
5133 |
|
5134 |
|
5135 |
|
5136 | }]);
|
5137 | return WaveSurfer;
|
5138 | }(util.Observer);
|
5139 | exports["default"] = WaveSurfer;
|
5140 | _defineProperty(WaveSurfer, "VERSION", "6.4.0");
|
5141 | _defineProperty(WaveSurfer, "util", util);
|
5142 | module.exports = exports.default;
|
5143 |
|
5144 | }),
|
5145 |
|
5146 | "./src/webaudio.js":
|
5147 |
|
5148 |
|
5149 |
|
5150 | ((module, exports, __webpack_require__) => {
|
5151 |
|
5152 | "use strict";
|
5153 |
|
5154 |
|
5155 | function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
5156 | Object.defineProperty(exports, "__esModule", ({
|
5157 | value: true
|
5158 | }));
|
5159 | exports["default"] = void 0;
|
5160 | var util = _interopRequireWildcard(__webpack_require__( "./src/util/index.js"));
|
5161 | function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
5162 | function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
5163 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
5164 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
5165 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
5166 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
5167 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
5168 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
5169 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
5170 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
5171 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
5172 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
5173 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
5174 |
|
5175 | var PLAYING = 'playing';
|
5176 | var PAUSED = 'paused';
|
5177 | var FINISHED = 'finished';
|
5178 |
|
5179 |
|
5180 |
|
5181 |
|
5182 |
|
5183 |
|
5184 | var WebAudio = function (_util$Observer) {
|
5185 | _inherits(WebAudio, _util$Observer);
|
5186 | var _super = _createSuper(WebAudio);
|
5187 | |
5188 |
|
5189 |
|
5190 |
|
5191 |
|
5192 | function WebAudio(params) {
|
5193 | var _defineProperty2, _this$states;
|
5194 | var _this;
|
5195 | _classCallCheck(this, WebAudio);
|
5196 | _this = _super.call(this);
|
5197 |
|
5198 | _defineProperty(_assertThisInitialized(_this), "audioContext", null);
|
5199 | _defineProperty(_assertThisInitialized(_this), "offlineAudioContext", null);
|
5200 | _defineProperty(_assertThisInitialized(_this), "stateBehaviors", (_defineProperty2 = {}, _defineProperty(_defineProperty2, PLAYING, {
|
5201 | init: function init() {
|
5202 | this.addOnAudioProcess();
|
5203 | },
|
5204 | getPlayedPercents: function getPlayedPercents() {
|
5205 | var duration = this.getDuration();
|
5206 | return this.getCurrentTime() / duration || 0;
|
5207 | },
|
5208 | getCurrentTime: function getCurrentTime() {
|
5209 | return this.startPosition + this.getPlayedTime();
|
5210 | }
|
5211 | }), _defineProperty(_defineProperty2, PAUSED, {
|
5212 | init: function init() {
|
5213 | this.removeOnAudioProcess();
|
5214 | },
|
5215 | getPlayedPercents: function getPlayedPercents() {
|
5216 | var duration = this.getDuration();
|
5217 | return this.getCurrentTime() / duration || 0;
|
5218 | },
|
5219 | getCurrentTime: function getCurrentTime() {
|
5220 | return this.startPosition;
|
5221 | }
|
5222 | }), _defineProperty(_defineProperty2, FINISHED, {
|
5223 | init: function init() {
|
5224 | this.removeOnAudioProcess();
|
5225 | this.fireEvent('finish');
|
5226 | },
|
5227 | getPlayedPercents: function getPlayedPercents() {
|
5228 | return 1;
|
5229 | },
|
5230 | getCurrentTime: function getCurrentTime() {
|
5231 | return this.getDuration();
|
5232 | }
|
5233 | }), _defineProperty2));
|
5234 | _this.params = params;
|
5235 |
|
5236 | _this.ac = params.audioContext || (_this.supportsWebAudio() ? _this.getAudioContext() : {});
|
5237 |
|
5238 | _this.lastPlay = _this.ac.currentTime;
|
5239 |
|
5240 | _this.startPosition = 0;
|
5241 |
|
5242 | _this.scheduledPause = null;
|
5243 |
|
5244 | _this.states = (_this$states = {}, _defineProperty(_this$states, PLAYING, Object.create(_this.stateBehaviors[PLAYING])), _defineProperty(_this$states, PAUSED, Object.create(_this.stateBehaviors[PAUSED])), _defineProperty(_this$states, FINISHED, Object.create(_this.stateBehaviors[FINISHED])), _this$states);
|
5245 |
|
5246 | _this.buffer = null;
|
5247 |
|
5248 | _this.filters = [];
|
5249 |
|
5250 | _this.gainNode = null;
|
5251 |
|
5252 | _this.mergedPeaks = null;
|
5253 |
|
5254 | _this.offlineAc = null;
|
5255 |
|
5256 | _this.peaks = null;
|
5257 |
|
5258 | _this.playbackRate = 1;
|
5259 |
|
5260 | _this.analyser = null;
|
5261 |
|
5262 | _this.scriptNode = null;
|
5263 |
|
5264 | _this.source = null;
|
5265 |
|
5266 | _this.splitPeaks = [];
|
5267 |
|
5268 | _this.state = null;
|
5269 |
|
5270 | _this.explicitDuration = params.duration;
|
5271 |
|
5272 | _this.sinkStreamDestination = null;
|
5273 |
|
5274 | _this.sinkAudioElement = null;
|
5275 | |
5276 |
|
5277 |
|
5278 | _this.destroyed = false;
|
5279 | return _this;
|
5280 | }
|
5281 |
|
5282 | |
5283 |
|
5284 |
|
5285 | _createClass(WebAudio, [{
|
5286 | key: "supportsWebAudio",
|
5287 | value:
|
5288 |
|
5289 |
|
5290 |
|
5291 |
|
5292 |
|
5293 |
|
5294 |
|
5295 | |
5296 |
|
5297 |
|
5298 |
|
5299 |
|
5300 | function supportsWebAudio() {
|
5301 | return !!(window.AudioContext || window.webkitAudioContext);
|
5302 | }
|
5303 |
|
5304 | |
5305 |
|
5306 |
|
5307 |
|
5308 |
|
5309 | }, {
|
5310 | key: "getAudioContext",
|
5311 | value: function getAudioContext() {
|
5312 | if (!window.WaveSurferAudioContext) {
|
5313 | window.WaveSurferAudioContext = new (window.AudioContext || window.webkitAudioContext)();
|
5314 | }
|
5315 | return window.WaveSurferAudioContext;
|
5316 | }
|
5317 |
|
5318 | |
5319 |
|
5320 |
|
5321 |
|
5322 |
|
5323 |
|
5324 |
|
5325 | }, {
|
5326 | key: "getOfflineAudioContext",
|
5327 | value: function getOfflineAudioContext(sampleRate) {
|
5328 | if (!window.WaveSurferOfflineAudioContext) {
|
5329 | window.WaveSurferOfflineAudioContext = new (window.OfflineAudioContext || window.webkitOfflineAudioContext)(1, 2, sampleRate);
|
5330 | }
|
5331 | return window.WaveSurferOfflineAudioContext;
|
5332 | }
|
5333 | }, {
|
5334 | key: "init",
|
5335 | value: function init() {
|
5336 | this.createVolumeNode();
|
5337 | this.createScriptNode();
|
5338 | this.createAnalyserNode();
|
5339 | this.setState(PAUSED);
|
5340 | this.setPlaybackRate(this.params.audioRate);
|
5341 | this.setLength(0);
|
5342 | }
|
5343 |
|
5344 |
|
5345 | }, {
|
5346 | key: "disconnectFilters",
|
5347 | value: function disconnectFilters() {
|
5348 | if (this.filters) {
|
5349 | this.filters.forEach(function (filter) {
|
5350 | filter && filter.disconnect();
|
5351 | });
|
5352 | this.filters = null;
|
5353 |
|
5354 | this.analyser.connect(this.gainNode);
|
5355 | }
|
5356 | }
|
5357 |
|
5358 | |
5359 |
|
5360 |
|
5361 |
|
5362 |
|
5363 | }, {
|
5364 | key: "setState",
|
5365 | value: function setState(state) {
|
5366 | if (this.state !== this.states[state]) {
|
5367 | this.state = this.states[state];
|
5368 | this.state.init.call(this);
|
5369 | }
|
5370 | }
|
5371 |
|
5372 | |
5373 |
|
5374 |
|
5375 |
|
5376 |
|
5377 | }, {
|
5378 | key: "setFilter",
|
5379 | value: function setFilter() {
|
5380 | for (var _len = arguments.length, filters = new Array(_len), _key = 0; _key < _len; _key++) {
|
5381 | filters[_key] = arguments[_key];
|
5382 | }
|
5383 | this.setFilters(filters);
|
5384 | }
|
5385 |
|
5386 | |
5387 |
|
5388 |
|
5389 |
|
5390 |
|
5391 |
|
5392 |
|
5393 |
|
5394 | }, {
|
5395 | key: "setFilters",
|
5396 | value: function setFilters(filters) {
|
5397 |
|
5398 | this.disconnectFilters();
|
5399 |
|
5400 |
|
5401 | if (filters && filters.length) {
|
5402 | this.filters = filters;
|
5403 |
|
5404 |
|
5405 | this.analyser.disconnect();
|
5406 |
|
5407 |
|
5408 | filters.reduce(function (prev, curr) {
|
5409 | prev.connect(curr);
|
5410 | return curr;
|
5411 | }, this.analyser).connect(this.gainNode);
|
5412 | }
|
5413 | }
|
5414 |
|
5415 | }, {
|
5416 | key: "createScriptNode",
|
5417 | value: function createScriptNode() {
|
5418 | if (this.params.audioScriptProcessor) {
|
5419 | this.scriptNode = this.params.audioScriptProcessor;
|
5420 | } else {
|
5421 | if (this.ac.createScriptProcessor) {
|
5422 | this.scriptNode = this.ac.createScriptProcessor(WebAudio.scriptBufferSize);
|
5423 | } else {
|
5424 | this.scriptNode = this.ac.createJavaScriptNode(WebAudio.scriptBufferSize);
|
5425 | }
|
5426 | }
|
5427 | this.scriptNode.connect(this.ac.destination);
|
5428 | }
|
5429 |
|
5430 |
|
5431 | }, {
|
5432 | key: "addOnAudioProcess",
|
5433 | value: function addOnAudioProcess() {
|
5434 | var _this2 = this;
|
5435 | this.scriptNode.onaudioprocess = function () {
|
5436 | var time = _this2.getCurrentTime();
|
5437 | if (time >= _this2.getDuration()) {
|
5438 | _this2.setState(FINISHED);
|
5439 | _this2.fireEvent('pause');
|
5440 | } else if (time >= _this2.scheduledPause) {
|
5441 | _this2.pause();
|
5442 | } else if (_this2.state === _this2.states[PLAYING]) {
|
5443 | _this2.fireEvent('audioprocess', time);
|
5444 | }
|
5445 | };
|
5446 | }
|
5447 |
|
5448 |
|
5449 | }, {
|
5450 | key: "removeOnAudioProcess",
|
5451 | value: function removeOnAudioProcess() {
|
5452 | this.scriptNode.onaudioprocess = null;
|
5453 | }
|
5454 |
|
5455 | }, {
|
5456 | key: "createAnalyserNode",
|
5457 | value: function createAnalyserNode() {
|
5458 | this.analyser = this.ac.createAnalyser();
|
5459 | this.analyser.connect(this.gainNode);
|
5460 | }
|
5461 |
|
5462 | |
5463 |
|
5464 |
|
5465 |
|
5466 | }, {
|
5467 | key: "createVolumeNode",
|
5468 | value: function createVolumeNode() {
|
5469 |
|
5470 | if (this.ac.createGain) {
|
5471 | this.gainNode = this.ac.createGain();
|
5472 | } else {
|
5473 | this.gainNode = this.ac.createGainNode();
|
5474 | }
|
5475 |
|
5476 | this.gainNode.connect(this.ac.destination);
|
5477 | }
|
5478 |
|
5479 | |
5480 |
|
5481 |
|
5482 |
|
5483 |
|
5484 |
|
5485 |
|
5486 | }, {
|
5487 | key: "setSinkId",
|
5488 | value: function setSinkId(deviceId) {
|
5489 | if (deviceId) {
|
5490 | |
5491 |
|
5492 |
|
5493 |
|
5494 |
|
5495 | if (!this.sinkAudioElement) {
|
5496 | this.sinkAudioElement = new window.Audio();
|
5497 |
|
5498 | this.sinkAudioElement.autoplay = true;
|
5499 | }
|
5500 | if (!this.sinkAudioElement.setSinkId) {
|
5501 | return Promise.reject(new Error('setSinkId is not supported in your browser'));
|
5502 | }
|
5503 | if (!this.sinkStreamDestination) {
|
5504 | this.sinkStreamDestination = this.ac.createMediaStreamDestination();
|
5505 | }
|
5506 | this.gainNode.disconnect();
|
5507 | this.gainNode.connect(this.sinkStreamDestination);
|
5508 | this.sinkAudioElement.srcObject = this.sinkStreamDestination.stream;
|
5509 | return this.sinkAudioElement.setSinkId(deviceId);
|
5510 | } else {
|
5511 | return Promise.reject(new Error('Invalid deviceId: ' + deviceId));
|
5512 | }
|
5513 | }
|
5514 |
|
5515 | |
5516 |
|
5517 |
|
5518 |
|
5519 |
|
5520 | }, {
|
5521 | key: "setVolume",
|
5522 | value: function setVolume(value) {
|
5523 | this.gainNode.gain.setValueAtTime(value, this.ac.currentTime);
|
5524 | }
|
5525 |
|
5526 | |
5527 |
|
5528 |
|
5529 |
|
5530 |
|
5531 | }, {
|
5532 | key: "getVolume",
|
5533 | value: function getVolume() {
|
5534 | return this.gainNode.gain.value;
|
5535 | }
|
5536 |
|
5537 | |
5538 |
|
5539 |
|
5540 |
|
5541 |
|
5542 |
|
5543 |
|
5544 |
|
5545 | }, {
|
5546 | key: "decodeArrayBuffer",
|
5547 | value: function decodeArrayBuffer(arraybuffer, callback, errback) {
|
5548 | if (!this.offlineAc) {
|
5549 | this.offlineAc = this.getOfflineAudioContext(this.ac && this.ac.sampleRate ? this.ac.sampleRate : 44100);
|
5550 | }
|
5551 | if ('webkitAudioContext' in window) {
|
5552 |
|
5553 |
|
5554 | this.offlineAc.decodeAudioData(arraybuffer, function (data) {
|
5555 | return callback(data);
|
5556 | }, errback);
|
5557 | } else {
|
5558 | this.offlineAc.decodeAudioData(arraybuffer).then(function (data) {
|
5559 | return callback(data);
|
5560 | }).catch(function (err) {
|
5561 | return errback(err);
|
5562 | });
|
5563 | }
|
5564 | }
|
5565 |
|
5566 | |
5567 |
|
5568 |
|
5569 |
|
5570 |
|
5571 |
|
5572 | }, {
|
5573 | key: "setPeaks",
|
5574 | value: function setPeaks(peaks, duration) {
|
5575 | if (duration != null) {
|
5576 | this.explicitDuration = duration;
|
5577 | }
|
5578 | this.peaks = peaks;
|
5579 | }
|
5580 |
|
5581 | |
5582 |
|
5583 |
|
5584 |
|
5585 |
|
5586 | }, {
|
5587 | key: "setLength",
|
5588 | value: function setLength(length) {
|
5589 |
|
5590 | if (this.mergedPeaks && length == 2 * this.mergedPeaks.length - 1 + 2) {
|
5591 | return;
|
5592 | }
|
5593 | this.splitPeaks = [];
|
5594 | this.mergedPeaks = [];
|
5595 |
|
5596 |
|
5597 | var channels = this.buffer ? this.buffer.numberOfChannels : 1;
|
5598 | var c;
|
5599 | for (c = 0; c < channels; c++) {
|
5600 | this.splitPeaks[c] = [];
|
5601 | this.splitPeaks[c][2 * (length - 1)] = 0;
|
5602 | this.splitPeaks[c][2 * (length - 1) + 1] = 0;
|
5603 | }
|
5604 | this.mergedPeaks[2 * (length - 1)] = 0;
|
5605 | this.mergedPeaks[2 * (length - 1) + 1] = 0;
|
5606 | }
|
5607 |
|
5608 | |
5609 |
|
5610 |
|
5611 |
|
5612 |
|
5613 |
|
5614 |
|
5615 |
|
5616 |
|
5617 | }, {
|
5618 | key: "getPeaks",
|
5619 | value: function getPeaks(length, first, last) {
|
5620 | if (this.peaks) {
|
5621 | return this.peaks;
|
5622 | }
|
5623 | if (!this.buffer) {
|
5624 | return [];
|
5625 | }
|
5626 | first = first || 0;
|
5627 | last = last || length - 1;
|
5628 | this.setLength(length);
|
5629 | if (!this.buffer) {
|
5630 | return this.params.splitChannels ? this.splitPeaks : this.mergedPeaks;
|
5631 | }
|
5632 |
|
5633 | |
5634 |
|
5635 |
|
5636 |
|
5637 |
|
5638 |
|
5639 |
|
5640 | if (!this.buffer.length) {
|
5641 | var newBuffer = this.createBuffer(1, 4096, this.sampleRate);
|
5642 | this.buffer = newBuffer.buffer;
|
5643 | }
|
5644 | var sampleSize = this.buffer.length / length;
|
5645 | var sampleStep = ~~(sampleSize / 10) || 1;
|
5646 | var channels = this.buffer.numberOfChannels;
|
5647 | var c;
|
5648 | for (c = 0; c < channels; c++) {
|
5649 | var peaks = this.splitPeaks[c];
|
5650 | var chan = this.buffer.getChannelData(c);
|
5651 | var i = void 0;
|
5652 | for (i = first; i <= last; i++) {
|
5653 | var start = ~~(i * sampleSize);
|
5654 | var end = ~~(start + sampleSize);
|
5655 | |
5656 |
|
5657 |
|
5658 |
|
5659 |
|
5660 |
|
5661 | var min = chan[start];
|
5662 | var max = min;
|
5663 | var j = void 0;
|
5664 | for (j = start; j < end; j += sampleStep) {
|
5665 | var value = chan[j];
|
5666 | if (value > max) {
|
5667 | max = value;
|
5668 | }
|
5669 | if (value < min) {
|
5670 | min = value;
|
5671 | }
|
5672 | }
|
5673 | peaks[2 * i] = max;
|
5674 | peaks[2 * i + 1] = min;
|
5675 | if (c == 0 || max > this.mergedPeaks[2 * i]) {
|
5676 | this.mergedPeaks[2 * i] = max;
|
5677 | }
|
5678 | if (c == 0 || min < this.mergedPeaks[2 * i + 1]) {
|
5679 | this.mergedPeaks[2 * i + 1] = min;
|
5680 | }
|
5681 | }
|
5682 | }
|
5683 | return this.params.splitChannels ? this.splitPeaks : this.mergedPeaks;
|
5684 | }
|
5685 |
|
5686 | |
5687 |
|
5688 |
|
5689 |
|
5690 |
|
5691 | }, {
|
5692 | key: "getPlayedPercents",
|
5693 | value: function getPlayedPercents() {
|
5694 | return this.state.getPlayedPercents.call(this);
|
5695 | }
|
5696 |
|
5697 |
|
5698 | }, {
|
5699 | key: "disconnectSource",
|
5700 | value: function disconnectSource() {
|
5701 | if (this.source) {
|
5702 | this.source.disconnect();
|
5703 | }
|
5704 | }
|
5705 | |
5706 |
|
5707 |
|
5708 | }, {
|
5709 | key: "destroyWebAudio",
|
5710 | value: function destroyWebAudio() {
|
5711 | this.disconnectFilters();
|
5712 | this.disconnectSource();
|
5713 | this.gainNode.disconnect();
|
5714 | this.scriptNode.disconnect();
|
5715 | this.analyser.disconnect();
|
5716 |
|
5717 |
|
5718 | if (this.params.closeAudioContext) {
|
5719 |
|
5720 | if (typeof this.ac.close === 'function' && this.ac.state != 'closed') {
|
5721 | this.ac.close();
|
5722 | }
|
5723 |
|
5724 | this.ac = null;
|
5725 |
|
5726 |
|
5727 | if (!this.params.audioContext) {
|
5728 | window.WaveSurferAudioContext = null;
|
5729 | } else {
|
5730 | this.params.audioContext = null;
|
5731 | }
|
5732 |
|
5733 | window.WaveSurferOfflineAudioContext = null;
|
5734 | }
|
5735 |
|
5736 |
|
5737 | if (this.sinkStreamDestination) {
|
5738 | this.sinkAudioElement.pause();
|
5739 | this.sinkAudioElement.srcObject = null;
|
5740 | this.sinkStreamDestination.disconnect();
|
5741 | this.sinkStreamDestination = null;
|
5742 | }
|
5743 | }
|
5744 | |
5745 |
|
5746 |
|
5747 | }, {
|
5748 | key: "destroy",
|
5749 | value: function destroy() {
|
5750 | if (!this.isPaused()) {
|
5751 | this.pause();
|
5752 | }
|
5753 | this.unAll();
|
5754 | this.buffer = null;
|
5755 | this.destroyed = true;
|
5756 | this.destroyWebAudio();
|
5757 | }
|
5758 |
|
5759 | |
5760 |
|
5761 |
|
5762 |
|
5763 |
|
5764 | }, {
|
5765 | key: "load",
|
5766 | value: function load(buffer) {
|
5767 | this.startPosition = 0;
|
5768 | this.lastPlay = this.ac.currentTime;
|
5769 | this.buffer = buffer;
|
5770 | this.createSource();
|
5771 | }
|
5772 |
|
5773 |
|
5774 | }, {
|
5775 | key: "createSource",
|
5776 | value: function createSource() {
|
5777 | this.disconnectSource();
|
5778 | this.source = this.ac.createBufferSource();
|
5779 |
|
5780 |
|
5781 | this.source.start = this.source.start || this.source.noteGrainOn;
|
5782 | this.source.stop = this.source.stop || this.source.noteOff;
|
5783 | this.setPlaybackRate(this.playbackRate);
|
5784 | this.source.buffer = this.buffer;
|
5785 | this.source.connect(this.analyser);
|
5786 | }
|
5787 |
|
5788 | |
5789 |
|
5790 |
|
5791 |
|
5792 |
|
5793 | }, {
|
5794 | key: "resumeAudioContext",
|
5795 | value: function resumeAudioContext() {
|
5796 | if (this.ac.state == 'suspended') {
|
5797 | this.ac.resume && this.ac.resume();
|
5798 | }
|
5799 | }
|
5800 |
|
5801 | |
5802 |
|
5803 |
|
5804 |
|
5805 |
|
5806 | }, {
|
5807 | key: "isPaused",
|
5808 | value: function isPaused() {
|
5809 | return this.state !== this.states[PLAYING];
|
5810 | }
|
5811 |
|
5812 | |
5813 |
|
5814 |
|
5815 |
|
5816 |
|
5817 | }, {
|
5818 | key: "getDuration",
|
5819 | value: function getDuration() {
|
5820 | if (this.explicitDuration) {
|
5821 | return this.explicitDuration;
|
5822 | }
|
5823 | if (!this.buffer) {
|
5824 | return 0;
|
5825 | }
|
5826 | return this.buffer.duration;
|
5827 | }
|
5828 |
|
5829 | |
5830 |
|
5831 |
|
5832 |
|
5833 |
|
5834 |
|
5835 |
|
5836 |
|
5837 | }, {
|
5838 | key: "seekTo",
|
5839 | value: function seekTo(start, end) {
|
5840 | if (!this.buffer) {
|
5841 | return;
|
5842 | }
|
5843 | this.scheduledPause = null;
|
5844 | if (start == null) {
|
5845 | start = this.getCurrentTime();
|
5846 | if (start >= this.getDuration()) {
|
5847 | start = 0;
|
5848 | }
|
5849 | }
|
5850 | if (end == null) {
|
5851 | end = this.getDuration();
|
5852 | }
|
5853 | this.startPosition = start;
|
5854 | this.lastPlay = this.ac.currentTime;
|
5855 | if (this.state === this.states[FINISHED]) {
|
5856 | this.setState(PAUSED);
|
5857 | }
|
5858 | return {
|
5859 | start: start,
|
5860 | end: end
|
5861 | };
|
5862 | }
|
5863 |
|
5864 | |
5865 |
|
5866 |
|
5867 |
|
5868 |
|
5869 | }, {
|
5870 | key: "getPlayedTime",
|
5871 | value: function getPlayedTime() {
|
5872 | return (this.ac.currentTime - this.lastPlay) * this.playbackRate;
|
5873 | }
|
5874 |
|
5875 | |
5876 |
|
5877 |
|
5878 |
|
5879 |
|
5880 |
|
5881 |
|
5882 | }, {
|
5883 | key: "play",
|
5884 | value: function play(start, end) {
|
5885 | if (!this.buffer) {
|
5886 | return;
|
5887 | }
|
5888 |
|
5889 |
|
5890 | this.createSource();
|
5891 | var adjustedTime = this.seekTo(start, end);
|
5892 | start = adjustedTime.start;
|
5893 | end = adjustedTime.end;
|
5894 | this.scheduledPause = end;
|
5895 | this.source.start(0, start);
|
5896 | this.resumeAudioContext();
|
5897 | this.setState(PLAYING);
|
5898 | this.fireEvent('play');
|
5899 | }
|
5900 |
|
5901 | |
5902 |
|
5903 |
|
5904 | }, {
|
5905 | key: "pause",
|
5906 | value: function pause() {
|
5907 | this.scheduledPause = null;
|
5908 | this.startPosition += this.getPlayedTime();
|
5909 | try {
|
5910 | this.source && this.source.stop(0);
|
5911 | } catch (err) {
|
5912 |
|
5913 |
|
5914 |
|
5915 |
|
5916 |
|
5917 |
|
5918 | }
|
5919 | this.setState(PAUSED);
|
5920 | this.fireEvent('pause');
|
5921 | }
|
5922 |
|
5923 | |
5924 |
|
5925 |
|
5926 |
|
5927 |
|
5928 |
|
5929 | }, {
|
5930 | key: "getCurrentTime",
|
5931 | value: function getCurrentTime() {
|
5932 | return this.state.getCurrentTime.call(this);
|
5933 | }
|
5934 |
|
5935 | |
5936 |
|
5937 |
|
5938 |
|
5939 |
|
5940 | }, {
|
5941 | key: "getPlaybackRate",
|
5942 | value: function getPlaybackRate() {
|
5943 | return this.playbackRate;
|
5944 | }
|
5945 |
|
5946 | |
5947 |
|
5948 |
|
5949 |
|
5950 |
|
5951 | }, {
|
5952 | key: "setPlaybackRate",
|
5953 | value: function setPlaybackRate(value) {
|
5954 | this.playbackRate = value || 1;
|
5955 | this.source && this.source.playbackRate.setValueAtTime(this.playbackRate, this.ac.currentTime);
|
5956 | }
|
5957 |
|
5958 | |
5959 |
|
5960 |
|
5961 |
|
5962 |
|
5963 |
|
5964 | }, {
|
5965 | key: "setPlayEnd",
|
5966 | value: function setPlayEnd(end) {
|
5967 | this.scheduledPause = end;
|
5968 | }
|
5969 | }]);
|
5970 | return WebAudio;
|
5971 | }(util.Observer);
|
5972 | exports["default"] = WebAudio;
|
5973 | _defineProperty(WebAudio, "scriptBufferSize", 256);
|
5974 | module.exports = exports.default;
|
5975 |
|
5976 | }),
|
5977 |
|
5978 | "./node_modules/debounce/index.js":
|
5979 |
|
5980 |
|
5981 |
|
5982 | ((module) => {
|
5983 |
|
5984 |
|
5985 |
|
5986 |
|
5987 |
|
5988 |
|
5989 |
|
5990 |
|
5991 |
|
5992 |
|
5993 |
|
5994 |
|
5995 |
|
5996 |
|
5997 |
|
5998 | function debounce(func, wait, immediate){
|
5999 | var timeout, args, context, timestamp, result;
|
6000 | if (null == wait) wait = 100;
|
6001 |
|
6002 | function later() {
|
6003 | var last = Date.now() - timestamp;
|
6004 |
|
6005 | if (last < wait && last >= 0) {
|
6006 | timeout = setTimeout(later, wait - last);
|
6007 | } else {
|
6008 | timeout = null;
|
6009 | if (!immediate) {
|
6010 | result = func.apply(context, args);
|
6011 | context = args = null;
|
6012 | }
|
6013 | }
|
6014 | };
|
6015 |
|
6016 | var debounced = function(){
|
6017 | context = this;
|
6018 | args = arguments;
|
6019 | timestamp = Date.now();
|
6020 | var callNow = immediate && !timeout;
|
6021 | if (!timeout) timeout = setTimeout(later, wait);
|
6022 | if (callNow) {
|
6023 | result = func.apply(context, args);
|
6024 | context = args = null;
|
6025 | }
|
6026 |
|
6027 | return result;
|
6028 | };
|
6029 |
|
6030 | debounced.clear = function() {
|
6031 | if (timeout) {
|
6032 | clearTimeout(timeout);
|
6033 | timeout = null;
|
6034 | }
|
6035 | };
|
6036 |
|
6037 | debounced.flush = function() {
|
6038 | if (timeout) {
|
6039 | result = func.apply(context, args);
|
6040 | context = args = null;
|
6041 |
|
6042 | clearTimeout(timeout);
|
6043 | timeout = null;
|
6044 | }
|
6045 | };
|
6046 |
|
6047 | return debounced;
|
6048 | };
|
6049 |
|
6050 |
|
6051 | debounce.debounce = debounce;
|
6052 |
|
6053 | module.exports = debounce;
|
6054 |
|
6055 |
|
6056 | })
|
6057 |
|
6058 | });
|
6059 |
|
6060 |
|
6061 | var __webpack_module_cache__ = {};
|
6062 |
|
6063 |
|
6064 | function __webpack_require__(moduleId) {
|
6065 |
|
6066 | var cachedModule = __webpack_module_cache__[moduleId];
|
6067 | if (cachedModule !== undefined) {
|
6068 | return cachedModule.exports;
|
6069 | }
|
6070 |
|
6071 | var module = __webpack_module_cache__[moduleId] = {
|
6072 |
|
6073 |
|
6074 | exports: {}
|
6075 | };
|
6076 |
|
6077 |
|
6078 | __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
6079 |
|
6080 |
|
6081 | return module.exports;
|
6082 | }
|
6083 |
|
6084 |
|
6085 |
|
6086 |
|
6087 |
|
6088 |
|
6089 | var __webpack_exports__ = __webpack_require__("./src/wavesurfer.js");
|
6090 |
|
6091 | return __webpack_exports__;
|
6092 | })()
|
6093 | ;
|
6094 | });
|
6095 |
|
\ | No newline at end of file |