wavesurfer.js
Version:
Interactive navigable audio visualization using Web Audio and Canvas
7 lines • 13.2 kB
JavaScript
/*!
* wavesurfer.js 2.0.5 (Sun Mar 04 2018 20:10:16 GMT+0100 (CET))
* https://github.com/katspaugh/wavesurfer.js
* @license BSD-3-Clause
*/
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("regions",[],t):"object"==typeof exports?exports.regions=t():(e.WaveSurfer=e.WaveSurfer||{},e.WaveSurfer.regions=t())}("undefined"!=typeof self?self:this,function(){return function(e){function t(n){if(r[n])return r[n].exports;var i=r[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="localhost:8080/dist/plugin/",t(t.s=2)}({2:function(e,t,r){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),s=function(){function e(t,r){var i=this;n(this,e),this.wavesurfer=r,this.wrapper=r.drawer.wrapper,this.util=r.util,this.style=this.util.style,this.id=null==t.id?r.util.getId():t.id,this.start=Number(t.start)||0,this.end=null==t.end?this.start+4/this.wrapper.scrollWidth*this.wavesurfer.getDuration():Number(t.end),this.resize=void 0===t.resize||Boolean(t.resize),this.drag=void 0===t.drag||Boolean(t.drag),this.loop=Boolean(t.loop),this.color=t.color||"rgba(0, 0, 0, 0.1)",this.data=t.data||{},this.attributes=t.attributes||{},this.maxLength=t.maxLength,this.minLength=t.minLength,this._onRedraw=function(){return i.updateRender()},this.scroll=!1!==t.scroll&&r.params.scrollParent,this.scrollSpeed=t.scrollSpeed||1,this.scrollThreshold=t.scrollThreshold||10,this.bindInOut(),this.render(),this.wavesurfer.on("zoom",this._onRedraw),this.wavesurfer.on("redraw",this._onRedraw),this.wavesurfer.fireEvent("region-created",this)}return i(e,[{key:"update",value:function(e){null!=e.start&&(this.start=Number(e.start)),null!=e.end&&(this.end=Number(e.end)),null!=e.loop&&(this.loop=Boolean(e.loop)),null!=e.color&&(this.color=e.color),null!=e.data&&(this.data=e.data),null!=e.resize&&(this.resize=Boolean(e.resize)),null!=e.drag&&(this.drag=Boolean(e.drag)),null!=e.maxLength&&(this.maxLength=Number(e.maxLength)),null!=e.minLength&&(this.minLength=Number(e.minLength)),null!=e.attributes&&(this.attributes=e.attributes),this.updateRender(),this.fireEvent("update"),this.wavesurfer.fireEvent("region-updated",this)}},{key:"remove",value:function(){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))}},{key:"play",value:function(){this.wavesurfer.play(this.start,this.end),this.fireEvent("play"),this.wavesurfer.fireEvent("region-play",this)}},{key:"playLoop",value:function(){var e=this;this.play(),this.once("out",function(){return e.playLoop()})}},{key:"render",value:function(){var e=document.createElement("region");e.className="wavesurfer-region",e.title=this.formatTime(this.start,this.end),e.setAttribute("data-id",this.id);for(var t in this.attributes)e.setAttribute("data-region-"+t,this.attributes[t]);this.wrapper.scrollWidth;if(this.style(e,{position:"absolute",zIndex:2,height:"100%",top:"0px"}),this.resize){var r=e.appendChild(document.createElement("handle")),n=e.appendChild(document.createElement("handle"));r.className="wavesurfer-handle wavesurfer-handle-start",n.className="wavesurfer-handle wavesurfer-handle-end";var i={cursor:"col-resize",position:"absolute",left:"0px",top:"0px",width:"1%",maxWidth:"4px",height:"100%"};this.style(r,i),this.style(n,i),this.style(n,{left:"100%"})}this.element=this.wrapper.appendChild(e),this.updateRender(),this.bindEvents(e)}},{key:"formatTime",value:function(e,t){return(e==t?[e]:[e,t]).map(function(e){return[Math.floor(e%3600/60),("00"+Math.floor(e%60)).slice(-2)].join(":")}).join("-")}},{key:"getWidth",value:function(){return this.wavesurfer.drawer.width/this.wavesurfer.params.pixelRatio}},{key:"updateRender",value:function(){var e=this.wavesurfer.getDuration(),t=this.getWidth();if(this.start<0&&(this.start=0,this.end=this.end-this.start),this.end>e&&(this.end=e,this.start=e-(this.end-this.start)),null!=this.minLength&&(this.end=Math.max(this.start+this.minLength,this.end)),null!=this.maxLength&&(this.end=Math.min(this.start+this.maxLength,this.end)),null!=this.element){var r=Math.round(this.start/e*t),n=Math.round(this.end/e*t)-r;this.style(this.element,{left:r+"px",width:n+"px",backgroundColor:this.color,cursor:this.drag?"move":"default"});for(var i in this.attributes)this.element.setAttribute("data-region-"+i,this.attributes[i]);this.element.title=this.formatTime(this.start,this.end)}}},{key:"bindInOut",value:function(){var e=this;this.firedIn=!1,this.firedOut=!1;var t=function(t){!e.firedOut&&e.firedIn&&(e.start>=Math.round(100*t)/100||e.end<=Math.round(100*t)/100)&&(e.firedOut=!0,e.firedIn=!1,e.fireEvent("out"),e.wavesurfer.fireEvent("region-out",e)),!e.firedIn&&e.start<=t&&e.end>t&&(e.firedIn=!0,e.firedOut=!1,e.fireEvent("in"),e.wavesurfer.fireEvent("region-in",e))};this.wavesurfer.backend.on("audioprocess",t),this.on("remove",function(){e.wavesurfer.backend.un("audioprocess",t)}),this.on("out",function(){e.loop&&e.wavesurfer.play(e.start)})}},{key:"bindEvents",value:function(){var e=this;this.element.addEventListener("mouseenter",function(t){e.fireEvent("mouseenter",t),e.wavesurfer.fireEvent("region-mouseenter",e,t)}),this.element.addEventListener("mouseleave",function(t){e.fireEvent("mouseleave",t),e.wavesurfer.fireEvent("region-mouseleave",e,t)}),this.element.addEventListener("click",function(t){t.preventDefault(),e.fireEvent("click",t),e.wavesurfer.fireEvent("region-click",e,t)}),this.element.addEventListener("dblclick",function(t){t.stopPropagation(),t.preventDefault(),e.fireEvent("dblclick",t),e.wavesurfer.fireEvent("region-dblclick",e,t)}),(this.drag||this.resize)&&function(){var t=e.wavesurfer.drawer.container,r=e.wavesurfer.getDuration(),n=e.scrollSpeed,i=e.scrollThreshold,s=void 0,a=void 0,o=void 0,u=void 0,l=void 0,d=!1,h=void 0,c=void 0,v=function t(i){if(h&&(o||l)){var a=e.wrapper.scrollLeft+n*h;e.wrapper.scrollLeft=a=Math.min(u,Math.max(0,a));var d=e.wavesurfer.drawer.handleEvent(i)*r,c=d-s;s=d,o?e.onDrag(c):e.onResize(c,l),window.requestAnimationFrame(function(){t(i)})}},f=function(t){t.touches&&t.touches.length>1||(a=t.targetTouches?t.targetTouches[0].identifier:null,t.stopPropagation(),s=e.wavesurfer.drawer.handleEvent(t,!0)*r,u=e.wrapper.scrollWidth-e.wrapper.clientWidth,c=e.wrapper.getBoundingClientRect(),"handle"==t.target.tagName.toLowerCase()?l=t.target.classList.contains("wavesurfer-handle-start")?"start":"end":(o=!0,l=!1))},p=function(t){t.touches&&t.touches.length>1||((o||l)&&(o=!1,h=null,l=!1),d&&(d=!1,e.util.preventClick(),e.fireEvent("update-end",t),e.wavesurfer.fireEvent("region-update-end",e,t)))},m=function(n){if(!(n.touches&&n.touches.length>1)&&(!n.targetTouches||n.targetTouches[0].identifier==a)&&(o||l)){var u=s,f=e.wavesurfer.drawer.handleEvent(n)*r,p=f-s;if(s=f,e.drag&&o&&(d=d||!!p,e.onDrag(p)),e.resize&&l&&(d=d||!!p,e.onResize(p,l)),e.scroll&&t.clientWidth<e.wrapper.scrollWidth){if(o){var m=e.element.getBoundingClientRect(),g=m.left-c.left;f<u&&g>=0?h=-1:f>u&&g+m.width<=c.right&&(h=1),(-1===h&&g>i||1===h&&g+m.width<c.right-i)&&(h=null)}else{var w=n.clientX-c.left;h=w<=i?-1:w>=c.right-i?1:null}h&&v(n)}}};e.element.addEventListener("mousedown",f),e.element.addEventListener("touchstart",f),e.wrapper.addEventListener("mousemove",m),e.wrapper.addEventListener("touchmove",m),document.body.addEventListener("mouseup",p),document.body.addEventListener("touchend",p),e.on("remove",function(){document.body.removeEventListener("mouseup",p),document.body.removeEventListener("touchend",p),e.wrapper.removeEventListener("mousemove",m),e.wrapper.removeEventListener("touchmove",m)}),e.wavesurfer.on("destroy",function(){document.body.removeEventListener("mouseup",p),document.body.removeEventListener("touchend",p)})}()}},{key:"onDrag",value:function(e){var t=this.wavesurfer.getDuration();this.end+e>t||this.start+e<0||this.update({start:this.start+e,end:this.end+e})}},{key:"onResize",value:function(e,t){"start"==t?this.update({start:Math.min(this.start+e,this.end),end:Math.max(this.start+e,this.end)}):this.update({start:Math.min(this.end+e,this.start),end:Math.max(this.end+e,this.start)})}}]),e}(),a=function(){function e(t,r){var i=this;n(this,e),this.params=t,this.wavesurfer=r,this.util=r.util,Object.getOwnPropertyNames(this.util.Observer.prototype).forEach(function(e){s.prototype[e]=i.util.Observer.prototype[e]}),this.wavesurfer.Region=s,this.list={},this._onReady=function(){i.wrapper=i.wavesurfer.drawer.wrapper,i.params.regions&&i.params.regions.forEach(function(e){i.add(e)}),i.params.dragSelection&&i.enableDragSelection(i.params)}}return i(e,null,[{key:"create",value:function(t){return{name:"regions",deferInit:!(!t||!t.deferInit)&&t.deferInit,params:t,staticProps:{initRegions:function(){console.warn('Deprecated initRegions! Use wavesurfer.initPlugins("regions") instead!'),this.initPlugin("regions")},addRegion:function(e){return this.initialisedPluginList.regions||this.initPlugin("regions"),this.regions.add(e)},clearRegions:function(){this.regions&&this.regions.clear()},enableDragSelection:function(e){this.initialisedPluginList.regions||this.initPlugin("regions"),this.regions.enableDragSelection(e)},disableDragSelection:function(){this.regions.disableDragSelection()}},instance:e}}}]),i(e,[{key:"init",value:function(){this.wavesurfer.isReady&&this._onReady(),this.wavesurfer.on("ready",this._onReady)}},{key:"destroy",value:function(){this.wavesurfer.un("ready",this._onReady),this.disableDragSelection(),this.clear()}},{key:"add",value:function(e){var t=this,r=new this.wavesurfer.Region(e,this.wavesurfer);return this.list[r.id]=r,r.on("remove",function(){delete t.list[r.id]}),r}},{key:"clear",value:function(){var e=this;Object.keys(this.list).forEach(function(t){e.list[t].remove()})}},{key:"enableDragSelection",value:function(e){var t=this,r=e.slop||2,n=this.wavesurfer.drawer.container,i=!1!==e.scroll&&this.wavesurfer.params.scrollParent,s=e.scrollSpeed||1,a=e.scrollThreshold||10,o=void 0,u=this.wavesurfer.getDuration(),l=void 0,d=void 0,h=void 0,c=void 0,v=0,f=void 0,p=void 0,m=function e(r){if(h&&f){var n=t.wrapper.scrollLeft+s*f;t.wrapper.scrollLeft=n=Math.min(l,Math.max(0,n));var i=t.wavesurfer.drawer.handleEvent(r);h.update({start:Math.min(i*u,d*u),end:Math.max(i*u,d*u)}),n<l&&n>0&&window.requestAnimationFrame(function(){e(r)})}},g=function(e){e.touches&&e.touches.length>1||(u=t.wavesurfer.getDuration(),c=e.targetTouches?e.targetTouches[0].identifier:null,l=t.wrapper.scrollWidth-t.wrapper.clientWidth,p=t.wrapper.getBoundingClientRect(),o=!0,d=t.wavesurfer.drawer.handleEvent(e,!0),h=null,f=null)};this.wrapper.addEventListener("mousedown",g),this.wrapper.addEventListener("touchstart",g),this.on("disable-drag-selection",function(){t.wrapper.removeEventListener("touchstart",g),t.wrapper.removeEventListener("mousedown",g)});var w=function(e){e.touches&&e.touches.length>1||(o=!1,v=0,f=null,h&&(t.util.preventClick(),h.fireEvent("update-end",e),t.wavesurfer.fireEvent("region-update-end",h,e)),h=null)};this.wrapper.addEventListener("mouseup",w),this.wrapper.addEventListener("touchend",w),document.body.addEventListener("mouseup",w),document.body.addEventListener("touchend",w),this.on("disable-drag-selection",function(){document.body.removeEventListener("mouseup",w),document.body.removeEventListener("touchend",w),t.wrapper.removeEventListener("touchend",w),t.wrapper.removeEventListener("mouseup",w)});var y=function(s){if(o&&!(++v<=r||s.touches&&s.touches.length>1||s.targetTouches&&s.targetTouches[0].identifier!=c)){h||(h=t.add(e||{}));var l=t.wavesurfer.drawer.handleEvent(s);if(h.update({start:Math.min(l*u,d*u),end:Math.max(l*u,d*u)}),i&&n.clientWidth<t.wrapper.scrollWidth){var g=s.clientX-p.left;f=g<=a?-1:g>=p.right-a?1:null,f&&m(s)}}};this.wrapper.addEventListener("mousemove",y),this.wrapper.addEventListener("touchmove",y),this.on("disable-drag-selection",function(){t.wrapper.removeEventListener("touchmove",y),t.wrapper.removeEventListener("mousemove",y)})}},{key:"disableDragSelection",value:function(){this.fireEvent("disable-drag-selection")}},{key:"getCurrentRegion",value:function(){var e=this,t=this.wavesurfer.getCurrentTime(),r=null;return Object.keys(this.list).forEach(function(n){var i=e.list[n];i.start<=t&&i.end>=t&&(!r||i.end-i.start<r.end-r.start)&&(r=i)}),r}}]),e}();t.default=a,e.exports=t.default}})});
//# sourceMappingURL=wavesurfer.regions.min.js.map