fspecii
af5343f9db
AudioMass uses a custom fork of wavesurfer.js with getLoudness() and other extensions. The dist/ folder was excluded by server/.gitignore. Added gitignore exception for audio-editor/dist/.
1306 lines
49 KiB
JavaScript
1306 lines
49 KiB
JavaScript
/*!
|
|
* wavesurfer.js 2.0.5 (Thu Jun 28 2018 18:37:22 GMT-0700 (Pacific Daylight Time))
|
|
* https://github.com/katspaugh/wavesurfer.js
|
|
* @license BSD-3-Clause
|
|
*/
|
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
module.exports = factory();
|
|
else if(typeof define === 'function' && define.amd)
|
|
define("regions", [], factory);
|
|
else if(typeof exports === 'object')
|
|
exports["regions"] = factory();
|
|
else
|
|
root["WaveSurfer"] = root["WaveSurfer"] || {}, root["WaveSurfer"]["regions"] = factory();
|
|
})(window, function() {
|
|
return /******/ (function(modules) { // webpackBootstrap
|
|
/******/ // The module cache
|
|
/******/ var installedModules = {};
|
|
/******/
|
|
/******/ // The require function
|
|
/******/ function __webpack_require__(moduleId) {
|
|
/******/
|
|
/******/ // Check if module is in cache
|
|
/******/ if(installedModules[moduleId]) {
|
|
/******/ return installedModules[moduleId].exports;
|
|
/******/ }
|
|
/******/ // Create a new module (and put it into the cache)
|
|
/******/ var module = installedModules[moduleId] = {
|
|
/******/ i: moduleId,
|
|
/******/ l: false,
|
|
/******/ exports: {}
|
|
/******/ };
|
|
/******/
|
|
/******/ // Execute the module function
|
|
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
|
/******/
|
|
/******/ // Flag the module as loaded
|
|
/******/ module.l = true;
|
|
/******/
|
|
/******/ // Return the exports of the module
|
|
/******/ return module.exports;
|
|
/******/ }
|
|
/******/
|
|
/******/
|
|
/******/ // expose the modules object (__webpack_modules__)
|
|
/******/ __webpack_require__.m = modules;
|
|
/******/
|
|
/******/ // expose the module cache
|
|
/******/ __webpack_require__.c = installedModules;
|
|
/******/
|
|
/******/ // define getter function for harmony exports
|
|
/******/ __webpack_require__.d = function(exports, name, getter) {
|
|
/******/ if(!__webpack_require__.o(exports, name)) {
|
|
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
|
/******/ }
|
|
/******/ };
|
|
/******/
|
|
/******/ // define __esModule on exports
|
|
/******/ __webpack_require__.r = function(exports) {
|
|
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
/******/ }
|
|
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
/******/ };
|
|
/******/
|
|
/******/ // create a fake namespace object
|
|
/******/ // mode & 1: value is a module id, require it
|
|
/******/ // mode & 2: merge all properties of value into the ns
|
|
/******/ // mode & 4: return value when already ns object
|
|
/******/ // mode & 8|1: behave like require
|
|
/******/ __webpack_require__.t = function(value, mode) {
|
|
/******/ if(mode & 1) value = __webpack_require__(value);
|
|
/******/ if(mode & 8) return value;
|
|
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
|
/******/ var ns = Object.create(null);
|
|
/******/ __webpack_require__.r(ns);
|
|
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
|
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
|
/******/ return ns;
|
|
/******/ };
|
|
/******/
|
|
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
/******/ __webpack_require__.n = function(module) {
|
|
/******/ var getter = module && module.__esModule ?
|
|
/******/ function getDefault() { return module['default']; } :
|
|
/******/ function getModuleExports() { return module; };
|
|
/******/ __webpack_require__.d(getter, 'a', getter);
|
|
/******/ return getter;
|
|
/******/ };
|
|
/******/
|
|
/******/ // Object.prototype.hasOwnProperty.call
|
|
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
|
/******/
|
|
/******/ // __webpack_public_path__
|
|
/******/ __webpack_require__.p = "localhost:8080/dist/plugin/";
|
|
/******/
|
|
/******/
|
|
/******/ // Load entry module and return exports
|
|
/******/ return __webpack_require__(__webpack_require__.s = "./src/plugin/regions.js");
|
|
/******/ })
|
|
/************************************************************************/
|
|
/******/ ({
|
|
|
|
/***/ "./src/plugin/regions.js":
|
|
/*!*******************************!*\
|
|
!*** ./src/plugin/regions.js ***!
|
|
\*******************************/
|
|
/*! no static exports found */
|
|
/***/ (function(module, exports, __webpack_require__) {
|
|
|
|
"use strict";
|
|
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _createClass = function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
|
/**
|
|
* (Single) Region plugin class
|
|
*
|
|
* Must be turned into an observer before instantiating. This is done in
|
|
* RegionsPlugin (main plugin class)
|
|
*
|
|
* @extends {Observer}
|
|
*/
|
|
var Region = function () {
|
|
function Region(params, ws) {
|
|
var _this = this;
|
|
|
|
_classCallCheck(this, Region);
|
|
|
|
this.wavesurfer = ws;
|
|
this.wrapper = ws.drawer.wrapper;
|
|
this.util = ws.util;
|
|
this.style = this.util.style;
|
|
|
|
this.id = params.id == null ? ws.util.getId() : params.id;
|
|
this.start = Number(params.start) || 0;
|
|
this.end = params.end == null ? // small marker-like region
|
|
this.start + 4 / this.wrapper.scrollWidth * this.wavesurfer.getDuration() : Number(params.end);
|
|
this.resize = params.resize === undefined ? true : Boolean(params.resize);
|
|
this.drag = params.drag === undefined ? true : Boolean(params.drag);
|
|
this.loop = Boolean(params.loop);
|
|
this.color = params.color || 'rgba(30, 30, 162, 0.51)';
|
|
this.data = params.data || {};
|
|
this.attributes = params.attributes || {};
|
|
|
|
this.direction = params.direction || 2;
|
|
this.maxLength = params.maxLength;
|
|
this.minLength = params.minLength;
|
|
this._onRedraw = function () {
|
|
return _this.updateRender();
|
|
};
|
|
|
|
this.scroll = params.scroll !== false && ws.params.scrollParent;
|
|
this.scrollSpeed = params.scrollSpeed || 1;
|
|
this.scrollThreshold = params.scrollThreshold || 28;
|
|
|
|
this.bindInOut();
|
|
this.render();
|
|
this.wavesurfer.on('zoom', this._onRedraw);
|
|
this.wavesurfer.on('redraw', this._onRedraw);
|
|
this.wavesurfer.fireEvent('region-created', this);
|
|
}
|
|
|
|
/* Update region params. */
|
|
|
|
|
|
_createClass(Region, [{
|
|
key: 'update',
|
|
value: function update(params) {
|
|
if (null != params.start) {
|
|
this.start = Number(params.start);
|
|
}
|
|
if (null != params.end) {
|
|
this.end = Number(params.end);
|
|
}
|
|
if (null != params.loop) {
|
|
this.loop = Boolean(params.loop);
|
|
}
|
|
if (null != params.color) {
|
|
this.color = params.color;
|
|
}
|
|
if (null != params.data) {
|
|
this.data = params.data;
|
|
}
|
|
if (null != params.resize) {
|
|
this.resize = Boolean(params.resize);
|
|
}
|
|
if (null != params.drag) {
|
|
this.drag = Boolean(params.drag);
|
|
}
|
|
if (null != params.maxLength) {
|
|
this.maxLength = Number(params.maxLength);
|
|
}
|
|
if (null != params.minLength) {
|
|
this.minLength = Number(params.minLength);
|
|
}
|
|
if (null != params.attributes) {
|
|
this.attributes = params.attributes;
|
|
}
|
|
|
|
this.updateRender();
|
|
this.fireEvent('update');
|
|
this.wavesurfer.fireEvent('region-updated', this);
|
|
}
|
|
|
|
/* Remove a single region. */
|
|
|
|
}, {
|
|
key: 'remove',
|
|
value: function remove() {
|
|
if (this.element) {
|
|
this.wrapper.removeChild(this.element);
|
|
this.element = null;
|
|
this.fireEvent('remove');
|
|
this.wavesurfer.un('zoom', this._onRedraw);
|
|
this.wavesurfer.un('redraw', this._onRedraw);
|
|
this.wavesurfer.fireEvent('region-removed', this);
|
|
}
|
|
}
|
|
|
|
/* Play the audio region. */
|
|
|
|
}, {
|
|
key: 'play',
|
|
value: function play() {
|
|
this.wavesurfer.play(this.start, this.end);
|
|
this.fireEvent('play');
|
|
this.wavesurfer.fireEvent('region-play', this);
|
|
}
|
|
|
|
/* Play the region in loop. */
|
|
|
|
}, {
|
|
key: 'playLoop',
|
|
value: function playLoop() {
|
|
var _this2 = this;
|
|
|
|
this.play();
|
|
this.once('out', function () {
|
|
return _this2.playLoop();
|
|
});
|
|
}
|
|
|
|
/* Render a region as a DOM element. */
|
|
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var regionEl = document.createElement('region');
|
|
regionEl.className = 'wavesurfer-region';
|
|
regionEl.title = this.formatTime(this.start, this.end);
|
|
regionEl.setAttribute('data-id', this.id);
|
|
|
|
for (var attrname in this.attributes) {
|
|
regionEl.setAttribute('data-region-' + attrname, this.attributes[attrname]);
|
|
}
|
|
|
|
var width = this.wrapper.scrollWidth;
|
|
this.style(regionEl, {
|
|
position: 'absolute',
|
|
zIndex: 2,
|
|
height: '100%',
|
|
top: '0px'
|
|
});
|
|
|
|
/* Resize handles */
|
|
if (this.resize) {
|
|
var handleLeft = regionEl.appendChild(document.createElement('handle'));
|
|
var handleRight = regionEl.appendChild(document.createElement('handle'));
|
|
handleLeft.className = 'wavesurfer-handle wavesurfer-handle-start';
|
|
handleRight.className = 'wavesurfer-handle wavesurfer-handle-end';
|
|
var css = {
|
|
cursor: 'col-resize',
|
|
position: 'absolute',
|
|
left: '0px',
|
|
top: '0px',
|
|
width: '1%',
|
|
maxWidth: '4px',
|
|
height: '100%'
|
|
};
|
|
this.style(handleLeft, css);
|
|
this.style(handleRight, css);
|
|
this.style(handleRight, {
|
|
left: '100%'
|
|
});
|
|
}
|
|
|
|
this.element = this.wrapper.appendChild(regionEl);
|
|
this.updateRender();
|
|
this.bindEvents(regionEl);
|
|
}
|
|
}, {
|
|
key: 'formatTime',
|
|
value: function formatTime(start, end) {
|
|
return (start == end ? [start] : [start, end]).map(function (time) {
|
|
return [Math.floor(time % 3600 / 60), // minutes
|
|
('00' + Math.floor(time % 60)).slice(-2) // seconds
|
|
].join(':');
|
|
}).join('-');
|
|
}
|
|
}, {
|
|
key: 'getWidth',
|
|
value: function getWidth() {
|
|
return this.wavesurfer.drawer.width / this.wavesurfer.params.pixelRatio;
|
|
}
|
|
|
|
/* Update element's position, width, color. */
|
|
|
|
}, {
|
|
key: 'updateRender',
|
|
value: function updateRender() {
|
|
var dur = this.wavesurfer.getDuration();
|
|
var width = this.getWidth();
|
|
|
|
if (this.start < 0) {
|
|
this.start = 0;
|
|
this.end = this.end - this.start;
|
|
}
|
|
if (this.end > dur) {
|
|
this.end = dur;
|
|
this.start = dur - (this.end - this.start);
|
|
}
|
|
|
|
if (this.minLength != null) {
|
|
this.end = Math.max(this.start + this.minLength, this.end);
|
|
}
|
|
|
|
if (this.maxLength != null) {
|
|
this.end = Math.min(this.start + this.maxLength, this.end);
|
|
}
|
|
|
|
if (this.element != null) {
|
|
// Calculate the left and width values of the region such that
|
|
// no gaps appear between regions.
|
|
var left = this.start / dur * width;
|
|
var regionWidth = this.end / dur * width - left;
|
|
|
|
this.style(this.element, {
|
|
left: this.wavesurfer.UnzoomifyPixelValue(left) + 'px',
|
|
width: regionWidth * this.wavesurfer.ZoomFactor + 'px',
|
|
//backgroundColor: this.color,
|
|
cursor: this.drag ? 'move' : 'default'
|
|
});
|
|
|
|
for (var attrname in this.attributes) {
|
|
this.element.setAttribute('data-region-' + attrname, this.attributes[attrname]);
|
|
}
|
|
|
|
this.element.title = this.formatTime(this.start, this.end);
|
|
}
|
|
}
|
|
|
|
/* Bind audio events. */
|
|
|
|
}, {
|
|
key: 'bindInOut',
|
|
value: function bindInOut() {
|
|
var _this3 = this;
|
|
|
|
this.firedIn = false;
|
|
this.firedOut = false;
|
|
|
|
var onProcess = function onProcess(time) {
|
|
// #### ok, it seems that latency is at 5.8ms, so we cannot accurately stop... Thus the 0.0028 magic number
|
|
// this will probably be worse on other systems, but until we kill wavesurfer and migrate to AudioWorklet
|
|
// this should do...
|
|
|
|
if (!_this3.firedOut && _this3.firedIn && (_this3.start >= Math.round(time * 1000) / 1000 || _this3.end <= (time + 0.0028) ) ) {
|
|
// if (!_this3.firedOut && _this3.firedIn && (_this3.start >= Math.round(time * 1000) / 1000 || _this3.end <= Math.round(time * 1000) / 1000)) {
|
|
_this3.firedOut = true;
|
|
_this3.firedIn = false;
|
|
_this3.fireEvent('out');
|
|
_this3.wavesurfer.fireEvent('region-out', _this3);
|
|
}
|
|
if (!_this3.firedIn && _this3.start <= time && _this3.end > time) {
|
|
_this3.firedIn = true;
|
|
_this3.firedOut = false;
|
|
_this3.fireEvent('in');
|
|
_this3.wavesurfer.fireEvent('region-in', _this3);
|
|
}
|
|
};
|
|
|
|
this.wavesurfer.backend.on('audioprocess', onProcess);
|
|
|
|
this.on('remove', function () {
|
|
_this3.wavesurfer.backend.un('audioprocess', onProcess);
|
|
});
|
|
|
|
/* Loop playback. */
|
|
this.on('out', function () {
|
|
//debugger;
|
|
if (_this3.loop) {
|
|
_this3.wavesurfer.play(_this3.start);
|
|
} else {
|
|
// ####
|
|
_this3.wavesurfer.seekTo(_this3.start / _this3.wavesurfer.getDuration());
|
|
_this3.wavesurfer.stop();
|
|
}
|
|
});
|
|
}
|
|
|
|
/* Bind DOM events. */
|
|
|
|
}, {
|
|
key: 'bindEvents',
|
|
value: function bindEvents() {
|
|
var _this4 = this;
|
|
|
|
this.element.addEventListener('mouseenter', function (e) {
|
|
_this4.fireEvent('mouseenter', e);
|
|
_this4.wavesurfer.fireEvent('region-mouseenter', _this4, e);
|
|
});
|
|
|
|
this.element.addEventListener('mouseleave', function (e) {
|
|
_this4.fireEvent('mouseleave', e);
|
|
_this4.wavesurfer.fireEvent('region-mouseleave', _this4, e);
|
|
});
|
|
|
|
this.element.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
_this4.fireEvent('click', e);
|
|
_this4.wavesurfer.fireEvent('region-click', _this4, e);
|
|
});
|
|
|
|
this.element.addEventListener('dblclick', function (e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
_this4.fireEvent('dblclick', e);
|
|
_this4.wavesurfer.fireEvent('region-dblclick', _this4, e);
|
|
});
|
|
|
|
/* Drag or resize on mousemove. */
|
|
(this.drag || this.resize) && function () {
|
|
var container = _this4.wavesurfer.drawer.container;
|
|
var duration = _this4.wavesurfer.getDuration();
|
|
var scrollSpeed = _this4.scrollSpeed;
|
|
var scrollThreshold = _this4.scrollThreshold;
|
|
var startTime = void 0;
|
|
var touchId = void 0;
|
|
var drag = void 0;
|
|
var maxScroll = void 0;
|
|
var resize = void 0;
|
|
var updated = false;
|
|
var scrollDirection = void 0;
|
|
var wrapperRect = void 0;
|
|
|
|
// Scroll when the user is dragging within the threshold
|
|
var edgeScroll = function edgeScroll(e, direction) {
|
|
if (!scrollDirection || !drag && !resize) {
|
|
return;
|
|
}
|
|
|
|
// Update scroll position
|
|
/*
|
|
let scrollLeft =
|
|
this.wrapper.scrollLeft + scrollSpeed * scrollDirection;
|
|
this.wrapper.scrollLeft = scrollLeft = Math.min(
|
|
maxScroll,
|
|
Math.max(0, scrollLeft)
|
|
);
|
|
*/
|
|
|
|
var scroll_speed = scrollSpeed;
|
|
var rect = _this4.wavesurfer.drawer.wrapper.getBoundingClientRect();
|
|
if (direction === -1) {
|
|
var multiplier = Math.abs(rect.left - e.clientX) - 10;
|
|
if (multiplier > 0) scroll_speed *= multiplier / 2;
|
|
} else if (direction === 1) {
|
|
|
|
var multiplier = Math.abs(e.clientX - rect.right) - 10;
|
|
if (multiplier > 0) scroll_speed *= multiplier / 2;
|
|
}
|
|
|
|
var scrollLeft = scroll_speed * scrollDirection / _this4.wavesurfer.getDuration();
|
|
_this4.wavesurfer.LeftProgress += scrollLeft;
|
|
if (_this4.wavesurfer.LeftProgress < 0) _this4.wavesurfer.LeftProgress = 0;else if (_this4.wavesurfer.LeftProgress + _this4.wavesurfer.VisibleDuration > _this4.wavesurfer.getDuration()) {
|
|
_this4.wavesurfer.LeftProgress = _this4.wavesurfer.getDuration() - _this4.wavesurfer.VisibleDuration;
|
|
}
|
|
_this4.wavesurfer.ForceDraw();
|
|
// fire event that stuff is happening?? ####
|
|
// ####
|
|
|
|
// Update time
|
|
var time = _this4.wavesurfer.ZoomifyValue(_this4.wavesurfer.drawer.handleEvent(e)) * duration;
|
|
var delta = time - startTime;
|
|
startTime = time;
|
|
|
|
// Continue dragging or resizing
|
|
drag ? _this4.onDrag(delta) : _this4.onResize(delta, resize);
|
|
|
|
_this4.wavesurfer.fireEvent ('DidZoom');
|
|
|
|
|
|
// Repeat
|
|
window.requestAnimationFrame(function () {
|
|
edgeScroll(e, direction);
|
|
});
|
|
};
|
|
|
|
var onDown = function onDown(e) {
|
|
if (e.touches && e.touches.length > 1) {
|
|
return;
|
|
}
|
|
if (e.which === 3) {
|
|
return;
|
|
}
|
|
touchId = e.targetTouches ? e.targetTouches[0].identifier : null;
|
|
|
|
_this4.wavesurfer.Interacting |= 1 << 0;
|
|
|
|
e.stopPropagation();
|
|
|
|
// #### hack for context menu
|
|
var event = new Event ('killCTX', {bubbles: true});
|
|
document.body.dispatchEvent (event);
|
|
|
|
startTime = _this4.wavesurfer.ZoomifyValue(_this4.wavesurfer.drawer.handleEvent(e, true)) * duration;
|
|
|
|
// Store for scroll calculations
|
|
maxScroll = _this4.wrapper.scrollWidth - _this4.wrapper.clientWidth;
|
|
wrapperRect = _this4.wrapper.getBoundingClientRect();
|
|
|
|
if (e.target.tagName.toLowerCase() == 'handle') {
|
|
if (e.target.classList.contains('wavesurfer-handle-start')) {
|
|
resize = 'start';
|
|
} else if (e.target.classList.contains('wavesurfer-handle-end')) {
|
|
resize = 'end';
|
|
}
|
|
} else if (PKAudioEditor.ui.KeyHandler.keyMap[16]) {
|
|
if (_this4.direction === 2) {
|
|
resize = 'end';
|
|
|
|
_this4.update({
|
|
start: _this4.start,
|
|
end: startTime
|
|
});
|
|
} else {
|
|
resize = 'start';
|
|
_this4.update({
|
|
start: startTime,
|
|
end: _this4.end
|
|
});
|
|
}
|
|
} else {
|
|
drag = true;
|
|
resize = false;
|
|
}
|
|
};
|
|
var onUp = function onUp(e) {
|
|
if (e.touches && e.touches.length > 1) {
|
|
return;
|
|
}
|
|
if (e.which === 3) {
|
|
return;
|
|
}
|
|
|
|
_this4.wavesurfer.Interacting &= ~(1 << 0);
|
|
|
|
if (drag || resize) {
|
|
drag = false;
|
|
scrollDirection = null;
|
|
resize = false;
|
|
}
|
|
|
|
if (updated) {
|
|
updated = false;
|
|
_this4.util.preventClick();
|
|
_this4.fireEvent('update-end', e);
|
|
_this4.wavesurfer.fireEvent('region-update-end', _this4, e);
|
|
}
|
|
};
|
|
var onMove = function onMove(e) {
|
|
// if (e.target.tagName === 'HANDLE') return ;
|
|
|
|
if (e.touches && e.touches.length > 1) {
|
|
return;
|
|
}
|
|
if (e.which === 3) {
|
|
return;
|
|
}
|
|
if (e.targetTouches && e.targetTouches[0].identifier != touchId) {
|
|
return;
|
|
}
|
|
|
|
if (drag || resize) {
|
|
var oldTime = startTime;
|
|
var time = _this4.wavesurfer.ZoomifyValue(_this4.wavesurfer.drawer.handleEvent(e)) * duration;
|
|
var delta = time - startTime;
|
|
startTime = time;
|
|
|
|
// Drag
|
|
if (_this4.drag && drag) {
|
|
updated = updated || !!delta;
|
|
_this4.onDrag(delta);
|
|
}
|
|
|
|
// Resize
|
|
if (_this4.resize && resize) {
|
|
updated = updated || !!delta;
|
|
resize = _this4.onResize(delta, resize);
|
|
}
|
|
|
|
if (_this4.wavesurfer.ZoomFactor > 1) {
|
|
if (drag) {
|
|
// The threshold is not between the mouse and the container edge
|
|
// but is between the region and the container edge
|
|
var regionRect = _this4.element.getBoundingClientRect();
|
|
var x = regionRect.left - wrapperRect.left;
|
|
|
|
// Check direction
|
|
if (time < oldTime && x >= 0) {
|
|
scrollDirection = -1;
|
|
} else if (time > oldTime && x + regionRect.width <= wrapperRect.right) {
|
|
scrollDirection = 1;
|
|
}
|
|
|
|
// Check that we are still beyond the threshold
|
|
if (scrollDirection === -1 && x > scrollThreshold || scrollDirection === 1 && x + regionRect.width < wrapperRect.right - scrollThreshold) {
|
|
scrollDirection = null;
|
|
}
|
|
} else {
|
|
// Mouse based threshold
|
|
var _x = e.clientX - wrapperRect.left;
|
|
|
|
// Check direction
|
|
if (_x <= scrollThreshold) {
|
|
scrollDirection = -1;
|
|
} else if (_x >= wrapperRect.right - wrapperRect.left - scrollThreshold) {
|
|
scrollDirection = 1;
|
|
} else {
|
|
scrollDirection = null;
|
|
}
|
|
}
|
|
|
|
scrollDirection && edgeScroll(e, scrollDirection);
|
|
}
|
|
}
|
|
};
|
|
|
|
//if ( ('PointerEvent' in window) && !(window.ontouchstart))
|
|
//{
|
|
// _this4.element.addEventListener('pointerdown', onDown);
|
|
// _this4.wrapper.addEventListener('pointermove', onMove);
|
|
// document.body.addEventListener('pointerup', onUp);
|
|
//}
|
|
//else
|
|
//{
|
|
_this4.element.addEventListener('mousedown', onDown);
|
|
_this4.element.addEventListener('touchstart', onDown);
|
|
|
|
_this4.wrapper.addEventListener('mousemove', onMove);
|
|
_this4.wrapper.addEventListener('touchmove', onMove);
|
|
|
|
document.body.addEventListener('mouseup', onUp);
|
|
document.body.addEventListener('touchend', onUp);
|
|
//}
|
|
|
|
_this4.on('remove', function () {
|
|
document.body.removeEventListener('mouseup', onUp);
|
|
document.body.removeEventListener('touchend', onUp);
|
|
_this4.wrapper.removeEventListener('mousemove', onMove);
|
|
_this4.wrapper.removeEventListener('touchmove', onMove);
|
|
|
|
document.body.removeEventListener('pointerup', onUp);
|
|
_this4.wrapper.removeEventListener('pointermove', onMove);
|
|
});
|
|
|
|
_this4.wavesurfer.on('destroy', function () {
|
|
document.body.removeEventListener('pointerup', onUp);
|
|
document.body.removeEventListener('mouseup', onUp);
|
|
document.body.removeEventListener('touchend', onUp);
|
|
});
|
|
}();
|
|
}
|
|
}, {
|
|
key: 'onDrag',
|
|
value: function onDrag(delta) {
|
|
var maxEnd = this.wavesurfer.getDuration();
|
|
if (this.end + delta > maxEnd || this.start + delta < 0) {
|
|
return;
|
|
}
|
|
|
|
// ####
|
|
/*
|
|
var engine = PKAudioEditor.engine;
|
|
var wv = engine.wavesurfer;
|
|
var bk = wv.backend;
|
|
if (!this.buffer) {
|
|
this.buffer = engine.GetSel ();
|
|
|
|
bk.reg = {
|
|
pos: {
|
|
start: (this.start * bk.buffer.sampleRate) >> 0,
|
|
end: (this.end * bk.buffer.sampleRate) >> 0
|
|
},
|
|
initpos: {
|
|
start: (this.start * bk.buffer.sampleRate) >> 0,
|
|
end: (this.end * bk.buffer.sampleRate) >>0
|
|
}
|
|
};
|
|
}
|
|
|
|
bk.reg.pos.start = ((this.start + delta) * bk.buffer.sampleRate) >> 0;
|
|
bk.reg.pos.end = ((this.end + delta) * bk.buffer.sampleRate) >> 0;
|
|
wv.drawBuffer (true);
|
|
*/
|
|
|
|
//--------
|
|
|
|
this.update({
|
|
start: this.start + delta,
|
|
end: this.end + delta
|
|
});
|
|
}
|
|
}, {
|
|
key: 'onResize',
|
|
value: function onResize(delta, direction) {
|
|
|
|
if (direction == 'start') {
|
|
if (this.start + delta > this.end)
|
|
{
|
|
direction = 'end';
|
|
|
|
this.update({
|
|
start: this.end,
|
|
end: this.start + delta
|
|
});
|
|
}
|
|
else
|
|
{
|
|
this.update({
|
|
start: Math.min(this.start + delta, this.end),
|
|
end: Math.max(this.start + delta, this.end)
|
|
});
|
|
}
|
|
} else {
|
|
if (this.start > this.end + delta)
|
|
{
|
|
direction = 'start';
|
|
|
|
this.update({
|
|
start: this.start + delta,
|
|
end: this.start
|
|
});
|
|
}
|
|
else
|
|
{
|
|
this.update({
|
|
start: Math.min(this.end + delta, this.start),
|
|
end: Math.max(this.end + delta, this.start)
|
|
});
|
|
}
|
|
}
|
|
|
|
return direction;
|
|
}
|
|
}]);
|
|
|
|
return Region;
|
|
}();
|
|
|
|
/**
|
|
* @typedef {Object} RegionsPluginParams
|
|
* @property {?boolean} dragSelection Enable creating regions by dragging wih
|
|
* the mouse
|
|
* @property {?RegionParams[]} regions Regions that should be added upon
|
|
* initialisation
|
|
* @property {number} slop=2 The sensitivity of the mouse dragging
|
|
* @property {?boolean} deferInit Set to true to manually call
|
|
* `initPlugin('regions')`
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} RegionParams
|
|
* @desc The parameters used to describe a region.
|
|
* @example wavesurfer.addRegion(regionParams);
|
|
* @property {string} id=→random The id of the region
|
|
* @property {number} start=0 The start position of the region (in seconds).
|
|
* @property {number} end=0 The end position of the region (in seconds).
|
|
* @property {?boolean} loop Whether to loop the region when played back.
|
|
* @property {boolean} drag=true Allow/dissallow dragging the region.
|
|
* @property {boolean} resize=true Allow/dissallow resizing the region.
|
|
* @property {string} [color='rgba(0, 0, 0, 0.1)'] HTML color code.
|
|
*/
|
|
|
|
/**
|
|
* Regions are visual overlays on waveform that can be used to play and loop
|
|
* portions of audio. Regions can be dragged and resized.
|
|
*
|
|
* Visual customization is possible via CSS (using the selectors
|
|
* `.wavesurfer-region` and `.wavesurfer-handle`).
|
|
*
|
|
* @implements {PluginClass}
|
|
* @extends {Observer}
|
|
*
|
|
* @example
|
|
* // es6
|
|
* import RegionsPlugin from 'wavesurfer.regions.js';
|
|
*
|
|
* // commonjs
|
|
* var RegionsPlugin = require('wavesurfer.regions.js');
|
|
*
|
|
* // if you are using <script> tags
|
|
* var RegionsPlugin = window.WaveSurfer.regions;
|
|
*
|
|
* // ... initialising wavesurfer with the plugin
|
|
* var wavesurfer = WaveSurfer.create({
|
|
* // wavesurfer options ...
|
|
* plugins: [
|
|
* RegionsPlugin.create({
|
|
* // plugin options ...
|
|
* })
|
|
* ]
|
|
* });
|
|
*/
|
|
|
|
|
|
var RegionsPlugin = function () {
|
|
_createClass(RegionsPlugin, null, [{
|
|
key: 'create',
|
|
|
|
/**
|
|
* Regions plugin definition factory
|
|
*
|
|
* This function must be used to create a plugin definition which can be
|
|
* used by wavesurfer to correctly instantiate the plugin.
|
|
*
|
|
* @param {RegionsPluginParams} params parameters use to initialise the plugin
|
|
* @return {PluginDefinition} an object representing the plugin
|
|
*/
|
|
value: function create(params) {
|
|
return {
|
|
name: 'regions',
|
|
deferInit: params && params.deferInit ? params.deferInit : false,
|
|
params: params,
|
|
staticProps: {
|
|
initRegions: function initRegions() {
|
|
console.warn('Deprecated initRegions! Use wavesurfer.initPlugins("regions") instead!');
|
|
this.initPlugin('regions');
|
|
},
|
|
addRegion: function addRegion(options) {
|
|
if (!this.initialisedPluginList.regions) {
|
|
this.initPlugin('regions');
|
|
}
|
|
return this.regions.add(options);
|
|
},
|
|
clearRegions: function clearRegions() {
|
|
this.regions && this.regions.clear();
|
|
},
|
|
enableDragSelection: function enableDragSelection(options) {
|
|
if (!this.initialisedPluginList.regions) {
|
|
this.initPlugin('regions');
|
|
}
|
|
this.regions.enableDragSelection(options);
|
|
},
|
|
disableDragSelection: function disableDragSelection() {
|
|
this.regions.disableDragSelection();
|
|
}
|
|
},
|
|
instance: RegionsPlugin
|
|
};
|
|
}
|
|
}]);
|
|
|
|
function RegionsPlugin(params, ws) {
|
|
var _this5 = this;
|
|
|
|
_classCallCheck(this, RegionsPlugin);
|
|
|
|
this.params = params;
|
|
this.wavesurfer = ws;
|
|
this.util = ws.util;
|
|
|
|
// turn the plugin instance into an observer
|
|
var observerPrototypeKeys = Object.getOwnPropertyNames(this.util.Observer.prototype);
|
|
observerPrototypeKeys.forEach(function (key) {
|
|
Region.prototype[key] = _this5.util.Observer.prototype[key];
|
|
});
|
|
this.wavesurfer.Region = Region;
|
|
|
|
// Id-based hash of regions.
|
|
this.list = {};
|
|
this._onReady = function () {
|
|
_this5.wrapper = _this5.wavesurfer.drawer.wrapper;
|
|
if (_this5.params.regions) {
|
|
_this5.params.regions.forEach(function (region) {
|
|
_this5.add(region);
|
|
});
|
|
}
|
|
if (_this5.params.dragSelection) {
|
|
_this5.disableDragSelection();
|
|
_this5.enableDragSelection(_this5.params);
|
|
}
|
|
};
|
|
}
|
|
|
|
_createClass(RegionsPlugin, [{
|
|
key: 'init',
|
|
value: function init() {
|
|
// Check if ws is ready
|
|
if (this.wavesurfer.isReady) {
|
|
this._onReady();
|
|
}
|
|
this.wavesurfer.on('ready', this._onReady);
|
|
}
|
|
}, {
|
|
key: 'destroy',
|
|
value: function destroy() {
|
|
this.wavesurfer.un('ready', this._onReady);
|
|
this.disableDragSelection();
|
|
this.clear();
|
|
}
|
|
/* Add a region. */
|
|
|
|
}, {
|
|
key: 'add',
|
|
value: function add(params) {
|
|
var _this6 = this;
|
|
|
|
if (this.list[0]) {
|
|
this.clear();
|
|
}
|
|
|
|
var region = new this.wavesurfer.Region(params, this.wavesurfer);
|
|
|
|
this.list[0] = region;
|
|
|
|
region.on('remove', function () {
|
|
delete _this6.list[0];
|
|
});
|
|
|
|
if (params.id === 't')
|
|
{
|
|
this.wavesurfer.fireEvent('region-update-end', region, null);
|
|
}
|
|
|
|
return region;
|
|
}
|
|
|
|
/* Remove all regions. */
|
|
|
|
}, {
|
|
key: 'clear',
|
|
value: function clear() {
|
|
var _this7 = this;
|
|
|
|
Object.keys(this.list).forEach(function (id) {
|
|
_this7.list[id].remove();
|
|
});
|
|
}
|
|
}, {
|
|
key: 'enableDragSelection',
|
|
value: function enableDragSelection(params) {
|
|
var _this8 = this;
|
|
|
|
var slop = params.slop || 2;
|
|
var container = this.wavesurfer.drawer.container;
|
|
var scroll = params.scroll !== false && this.wavesurfer.params.scrollParent;
|
|
var scrollSpeed = params.scrollSpeed || 1;
|
|
var scrollThreshold = params.scrollThreshold || 28;
|
|
var drag = void 0;
|
|
var duration = this.wavesurfer.getDuration();
|
|
var maxScroll = void 0;
|
|
var start = void 0;
|
|
var region = void 0;
|
|
var touchId = void 0;
|
|
var pxMove = 0;
|
|
var scrollDirection = void 0;
|
|
var wrapperRect = void 0;
|
|
|
|
// Scroll when the user is dragging within the threshold
|
|
var edgeScroll = function edgeScroll(e, direction) {
|
|
if (!region || !scrollDirection) {
|
|
return;
|
|
}
|
|
|
|
var scroll_speed = scrollSpeed;
|
|
var rect = _this8.wavesurfer.drawer.wrapper.getBoundingClientRect();
|
|
if (direction === -1) {
|
|
var multiplier = Math.abs(rect.left - e.clientX) - 10;
|
|
if (multiplier > 0) scroll_speed *= multiplier / 2;
|
|
} else if (direction === 1) {
|
|
|
|
var multiplier = Math.abs(e.clientX - rect.right) - 10;
|
|
if (multiplier > 0) scroll_speed *= multiplier / 2;
|
|
}
|
|
|
|
// Update scroll position
|
|
/*
|
|
let scrollLeft =
|
|
this.wrapper.scrollLeft + scrollSpeed * scrollDirection;
|
|
this.wrapper.scrollLeft = scrollLeft = Math.min(
|
|
maxScroll,
|
|
Math.max(0, scrollLeft)
|
|
);
|
|
*/
|
|
|
|
var scrollLeft = scroll_speed * scrollDirection / _this8.wavesurfer.getDuration();
|
|
_this8.wavesurfer.LeftProgress += scrollLeft;
|
|
|
|
if (_this8.wavesurfer.LeftProgress < 0) _this8.wavesurfer.LeftProgress = 0;else if (_this8.wavesurfer.LeftProgress + _this8.wavesurfer.VisibleDuration > _this8.wavesurfer.getDuration()) {
|
|
_this8.wavesurfer.LeftProgress = _this8.wavesurfer.getDuration() - _this8.wavesurfer.VisibleDuration;
|
|
}
|
|
|
|
_this8.wavesurfer.ForceDraw();
|
|
|
|
// Update range
|
|
var end = _this8.wavesurfer.ZoomifyValue(_this8.wavesurfer.drawer.handleEvent(e));
|
|
region.update({
|
|
start: Math.min(end * duration, start * duration),
|
|
end: Math.max(end * duration, start * duration)
|
|
});
|
|
|
|
_this8.wavesurfer.fireEvent ('DidZoom');
|
|
|
|
// Check that there is more to scroll and repeat
|
|
if (Math.abs(scrollLeft) > 0) {
|
|
window.requestAnimationFrame(function () {
|
|
edgeScroll(e, direction);
|
|
});
|
|
}
|
|
};
|
|
|
|
var right_mouse = null;
|
|
|
|
/////////////////////////////////////////////////////////////
|
|
/////////////////////////////////////////////////////////////
|
|
//////////////////////// EVENT DOWN /////////////////////////
|
|
var eventDown = function eventDown(e) {
|
|
right_mouse = null;
|
|
if (e.touches)
|
|
{
|
|
e.preventDefault (); // ####
|
|
if (e.touches.length > 1) {
|
|
return;
|
|
}
|
|
}
|
|
if (e.which === 3) {
|
|
right_mouse = {x:e.pageX, y:e.pageY};
|
|
return;
|
|
}
|
|
|
|
_this8.wavesurfer.Interacting |= 1 << 0;
|
|
duration = _this8.wavesurfer.getDuration();
|
|
touchId = e.targetTouches ? e.targetTouches[0].identifier : null;
|
|
|
|
// Store for scroll calculations
|
|
maxScroll = _this8.wrapper.scrollWidth - _this8.wrapper.clientWidth;
|
|
wrapperRect = _this8.wrapper.getBoundingClientRect();
|
|
|
|
drag = true;
|
|
start = _this8.wavesurfer.ZoomifyValue(_this8.wavesurfer.drawer.handleEvent(e, true));
|
|
|
|
region = null;
|
|
scrollDirection = null;
|
|
|
|
|
|
// add listeners for event move...
|
|
document.body.addEventListener('mousemove', eventMove);
|
|
document.body.addEventListener('touchmove', eventMove);
|
|
// ------------------------------
|
|
|
|
// if shift key is press add region!
|
|
if (PKAudioEditor.ui.KeyHandler.keyMap[16]) {
|
|
var orig_marker = _this8.wavesurfer.ActiveMarker;
|
|
e.stopPropagation();e.preventDefault();
|
|
|
|
region = _this8.wavesurfer.regions.list[0];
|
|
var direction = 2;
|
|
|
|
var durr = _this8.wavesurfer.getDuration();
|
|
var _end = _this8.wavesurfer.drawer.handleEvent(e);
|
|
_end = _this8.wavesurfer.ZoomifyValue(_end);
|
|
|
|
if (_end < orig_marker) {
|
|
if (region && region.start) {
|
|
orig_marker = _end;
|
|
_end = region.end / durr;
|
|
} else {
|
|
var tmp = orig_marker;
|
|
orig_marker = _end;
|
|
_end = tmp;
|
|
}
|
|
direction = 1;
|
|
}
|
|
|
|
if (region) {
|
|
region.update({
|
|
start: orig_marker * durr,
|
|
end: _end * durr
|
|
});
|
|
region.direction = direction;
|
|
start = direction === 1 ? _end : orig_marker;
|
|
//end = region.end;
|
|
} else {
|
|
_this8.wavesurfer.regions.add({
|
|
start: orig_marker * durr,
|
|
end: _end * durr,
|
|
id: 't',
|
|
direction: direction
|
|
});
|
|
region = _this8.wavesurfer.regions.list[0];
|
|
region.direction = direction;
|
|
|
|
start = direction === 1 ? _end : orig_marker;
|
|
//end = region.end;
|
|
setTimeout(function () {
|
|
PKAudioEditor.fireEvent('RequestSeekTo', orig_marker);
|
|
}, 20);
|
|
}
|
|
// -
|
|
}
|
|
// -
|
|
};
|
|
// ENDOF EVENT DOWN
|
|
////////////////////////////////
|
|
|
|
|
|
//if (('PointerEvent' in window) && !(window.ontouchstart) )
|
|
// this.wrapper.addEventListener('pointerdown', eventDown);
|
|
//else {
|
|
this.wrapper.addEventListener('mousedown', eventDown);
|
|
this.wrapper.addEventListener('touchstart', eventDown);
|
|
//}
|
|
|
|
this.on('disable-drag-selection', function () {
|
|
_this8.wrapper.removeEventListener('touchstart', eventDown);
|
|
_this8.wrapper.removeEventListener('mousedown', eventDown);
|
|
_this8.wrapper.removeEventListener('pointerdown', eventDown);
|
|
});
|
|
|
|
var eventUp = function eventUp(e) {
|
|
if (e.touches && e.touches.length > 1) {
|
|
return;
|
|
}
|
|
|
|
if (e.which === 3)
|
|
{
|
|
// check if the coords are the same
|
|
if (right_mouse)
|
|
{
|
|
if (Math.abs (right_mouse.x - e.pageX) < 3 && Math.abs (right_mouse.y - e.pageY) < 7)
|
|
{
|
|
var event = document.createEvent('Event');
|
|
event.initEvent('pk_ctxmn', true, true);
|
|
event.pageX = e.pageX;
|
|
event.pageY = e.pageY;
|
|
|
|
e.target.dispatchEvent(event);
|
|
}
|
|
|
|
right_mouse = null;
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
_this8.wavesurfer.Interacting &= ~(1 << 0);
|
|
|
|
if (drag)
|
|
{
|
|
document.body.removeEventListener('mousemove', eventMove);
|
|
document.body.removeEventListener('touchmove', eventMove);
|
|
}
|
|
|
|
drag = false;
|
|
pxMove = 0;
|
|
scrollDirection = null;
|
|
|
|
if (region) {
|
|
_this8.util.preventClick();
|
|
region.fireEvent('update-end', e);
|
|
_this8.wavesurfer.fireEvent('region-update-end', region, e);
|
|
}
|
|
|
|
region = null;
|
|
};
|
|
this.wrapper.addEventListener('mouseup', eventUp);
|
|
this.wrapper.addEventListener('touchend', eventUp);
|
|
|
|
document.body.addEventListener('mouseup', eventUp);
|
|
document.body.addEventListener('touchend', eventUp);
|
|
this.on('disable-drag-selection', function () {
|
|
document.body.removeEventListener('mouseup', eventUp);
|
|
document.body.removeEventListener('touchend', eventUp);
|
|
_this8.wrapper.removeEventListener('touchend', eventUp);
|
|
_this8.wrapper.removeEventListener('mouseup', eventUp);
|
|
});
|
|
|
|
|
|
var eventMove = function eventMove(e) {
|
|
if (!drag) {
|
|
return;
|
|
}
|
|
if (e.which === 3) {
|
|
return;
|
|
}
|
|
if (++pxMove <= slop) {
|
|
return;
|
|
}
|
|
|
|
if (e.touches && e.touches.length > 1) {
|
|
return;
|
|
}
|
|
if (e.targetTouches && e.targetTouches[0].identifier != touchId) {
|
|
return;
|
|
}
|
|
|
|
if (!region) {
|
|
region = _this8.add(params || {});
|
|
}
|
|
|
|
var end = _this8.wavesurfer.ZoomifyValue(_this8.wavesurfer.drawer.handleEvent(e));
|
|
region.update({
|
|
start: Math.min(end * duration, start * duration),
|
|
end: Math.max(end * duration, start * duration)
|
|
});
|
|
|
|
// If scrolling is enabled
|
|
if (_this8.wavesurfer.ZoomFactor > 1) {
|
|
// Check threshold based on mouse
|
|
var x = e.clientX - wrapperRect.left;
|
|
if (x <= scrollThreshold) {
|
|
scrollDirection = -1;
|
|
} else if (x >= wrapperRect.right - wrapperRect.left - scrollThreshold) {
|
|
scrollDirection = 1;
|
|
} else {
|
|
scrollDirection = null;
|
|
}
|
|
scrollDirection && edgeScroll(e, scrollDirection);
|
|
}
|
|
};
|
|
|
|
|
|
//if (('PointerEvent' in window) && !(window.ontouchstart))
|
|
// this.wrapper.addEventListener('pointermove', eventMove);
|
|
//else
|
|
//{
|
|
|
|
// ####
|
|
// this.wrapper.addEventListener('mousemove', eventMove);
|
|
// this.wrapper.addEventListener('touchmove', eventMove);
|
|
|
|
//}
|
|
|
|
this.on('disable-drag-selection', function () {
|
|
//if ( ('PointerEvent' in window) && !(window.ontouchstart) )
|
|
// _this8.wrapper.removeEventListener('pointermove', eventMove);
|
|
//else
|
|
//{
|
|
// _this8.wrapper.removeEventListener('touchmove', eventMove);
|
|
// _this8.wrapper.removeEventListener('mousemove', eventMove);
|
|
|
|
document.body.removeEventListener('mousemove', eventMove);
|
|
document.body.removeEventListener('touchmove', eventMove);
|
|
//}
|
|
});
|
|
}
|
|
}, {
|
|
key: 'disableDragSelection',
|
|
value: function disableDragSelection() {
|
|
this.fireEvent('disable-drag-selection');
|
|
}
|
|
|
|
/* Get current region
|
|
* The smallest region that contains the current time.
|
|
* If several such regions exist, we take the first.
|
|
* Return null if none exist. */
|
|
|
|
}, {
|
|
key: 'getCurrentRegion',
|
|
value: function getCurrentRegion() {
|
|
var _this9 = this;
|
|
|
|
var time = this.wavesurfer.getCurrentTime();
|
|
var min = null;
|
|
Object.keys(this.list).forEach(function (id) {
|
|
var cur = _this9.list[id];
|
|
if (cur.start <= time && cur.end >= time) {
|
|
if (!min || cur.end - cur.start < min.end - min.start) {
|
|
min = cur;
|
|
}
|
|
}
|
|
});
|
|
|
|
return min;
|
|
}
|
|
}]);
|
|
|
|
return RegionsPlugin;
|
|
}();
|
|
|
|
exports.default = RegionsPlugin;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ })
|
|
|
|
/******/ });
|
|
});
|