wavesurfer.js/dist/plugin/wavesurfer.minimap.min.js

Interactive navigable audio visualization using Web Audio and Canvas

/*!
 * 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,r){"object"==typeof exports&&"object"==typeof module?module.exports=r():"function"==typeof define&&define.amd?define("minimap",[],r):"object"==typeof exports?exports.minimap=r():(e.WaveSurfer=e.WaveSurfer||{},e.WaveSurfer.minimap=r())}("undefined"!=typeof self?self:this,function(){return function(e){function r(t){if(i[t])return i[t].exports;var n=i[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,r),n.l=!0,n.exports}var i={};return r.m=e,r.c=i,r.d=function(e,i,t){r.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:t})},r.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(i,"a",i),i},r.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},r.p="localhost:8080/dist/plugin/",r(r.s=1)}([,function(e,r,i){"use strict";function t(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(r,"__esModule",{value:!0});var n=function(){function e(e,r){for(var i=0;i<r.length;i++){var t=r[i];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}return function(r,i,t){return i&&e(r.prototype,i),t&&e(r,t),r}}(),o=function(){function e(r,i){var n=this;if(t(this,e),this.params=i.util.extend({},i.params,{showRegions:!1,showOverview:!1,overviewBorderColor:"green",overviewBorderSize:2,container:!1,height:Math.max(Math.round(i.params.height/4),20)},r,{scrollParent:!1,fillParent:!0}),"string"==typeof r.container){var o=document.querySelector(r.container);o||console.warn("Wavesurfer minimap container "+r.container+" was not found! The minimap will be automatically appended below the waveform."),this.params.container=o}r.container||(this.params.container=i.util.style(document.createElement("minimap"),{display:"block"})),this.drawer=new i.Drawer(this.params.container,this.params),this.wavesurfer=i,this.util=i.util,this.renderEvent="MediaElement"===i.params.backend?"waveform-ready":"ready",this.overviewRegion=null,this.drawer.createWrapper(),this.createElements();var s=!1;this._onShouldRender=function(){s||(n.bindWavesurferEvents(),n.bindMinimapEvents(),s=!0),document.body.contains(n.params.container)||i.container.insertBefore(n.params.container,null),n.wavesurfer.regions&&n.params.showRegions&&n.regions(),n.render()},this._onAudioprocess=function(e){n.drawer.progress(n.wavesurfer.backend.getPlayedPercents())},this._onSeek=function(){return n.drawer.progress(i.backend.getPlayedPercents())},this._onScroll=function(e){n.draggingOverview||n.moveOverviewRegion(e.target.scrollLeft/n.ratio)},this._onMouseover=function(e){n.draggingOverview&&(n.draggingOverview=!1)};var a=0;this._onResize=i.util.debounce(function(){a!=n.drawer.wrapper.clientWidth&&(a=n.drawer.wrapper.clientWidth,n.render(),n.drawer.progress(n.wavesurfer.backend.getPlayedPercents()))})}return n(e,null,[{key:"create",value:function(r){return{name:"minimap",deferInit:!(!r||!r.deferInit)&&r.deferInit,params:r,staticProps:{initMinimap:function(e){console.warn("Deprecated initMinimap!"),r=e,this.initPlugins("minimap")}},instance:e}}}]),n(e,[{key:"init",value:function(){this.wavesurfer.isReady&&this._onShouldRender(),this.wavesurfer.on(this.renderEvent,this._onShouldRender)}},{key:"destroy",value:function(){window.removeEventListener("resize",this._onResize,!0),window.removeEventListener("orientationchange",this._onResize,!0),this.wavesurfer.drawer.wrapper.removeEventListener("mouseover",this._onMouseover),this.wavesurfer.un(this.renderEvent,this._onShouldRender),this.wavesurfer.un("seek",this._onSeek),this.wavesurfer.un("scroll",this._onScroll),this.wavesurfer.un("audioprocess",this._onAudioprocess),this.drawer.destroy(),this.overviewRegion=null,this.unAll()}},{key:"regions",value:function(){var e=this;this.regions={},this.wavesurfer.on("region-created",function(r){e.regions[r.id]=r,e.renderRegions()}),this.wavesurfer.on("region-updated",function(r){e.regions[r.id]=r,e.renderRegions()}),this.wavesurfer.on("region-removed",function(r){delete e.regions[r.id],e.renderRegions()})}},{key:"renderRegions",value:function(){var e=this,r=this.drawer.wrapper.querySelectorAll("region"),i=void 0;for(i=0;i<r.length;++i)this.drawer.wrapper.removeChild(r[i]);Object.keys(this.regions).forEach(function(r){var i=e.regions[r],t=e.drawer.width*((i.end-i.start)/e.wavesurfer.getDuration()),n=e.drawer.width*(i.start/e.wavesurfer.getDuration()),o=e.util.style(document.createElement("region"),{height:"inherit",backgroundColor:i.color,width:t+"px",left:n+"px",display:"block",position:"absolute"});o.classList.add(r),e.drawer.wrapper.appendChild(o)})}},{key:"createElements",value:function(){this.drawer.createElements(),this.params.showOverview&&(this.overviewRegion=this.util.style(document.createElement("overview"),{height:this.drawer.wrapper.offsetHeight-2*this.params.overviewBorderSize+"px",width:"0px",display:"block",position:"absolute",cursor:"move",border:this.params.overviewBorderSize+"px solid "+this.params.overviewBorderColor,zIndex:2,opacity:this.params.overviewOpacity}),this.drawer.wrapper.appendChild(this.overviewRegion))}},{key:"bindWavesurferEvents",value:function(){window.addEventListener("resize",this._onResize,!0),window.addEventListener("orientationchange",this._onResize,!0),this.wavesurfer.on("audioprocess",this._onAudioprocess),this.wavesurfer.on("seek",this._onSeek),this.params.showOverview&&(this.wavesurfer.on("scroll",this._onScroll),this.wavesurfer.drawer.wrapper.addEventListener("mouseover",this._onMouseover))}},{key:"bindMinimapEvents",value:function(){var e=this,r={clientX:0,clientY:0},i=0,t=!0;this.params.interact&&(this.drawer.wrapper.addEventListener("click",function(r){e.fireEvent("click",r,e.drawer.handleEvent(r))}),this.on("click",function(r,i){t?(e.drawer.progress(i),e.wavesurfer.seekAndCenter(i)):t=!0})),this.params.showOverview&&(this.overviewRegion.addEventListener("mousedown",function(t){e.draggingOverview=!0,i=t.layerX,r.clientX=t.clientX,r.clientY=t.clientY}),this.drawer.wrapper.addEventListener("mousemove",function(r){e.draggingOverview&&e.moveOverviewRegion(r.clientX-e.drawer.container.getBoundingClientRect().left-i)}),this.drawer.wrapper.addEventListener("mouseup",function(i){r.clientX-i.clientX==0&&r.clientX-i.clientX==0?(t=!0,e.draggingOverview=!1):e.draggingOverview&&(t=!1,e.draggingOverview=!1)}))}},{key:"render",value:function(){var e=this.drawer.getWidth(),r=this.wavesurfer.backend.getPeaks(e,0,e);this.drawer.drawPeaks(r,e,0,e),this.drawer.progress(this.wavesurfer.backend.getPlayedPercents()),this.params.showOverview&&(this.ratio=this.wavesurfer.drawer.width/this.drawer.width,this.waveShowedWidth=this.wavesurfer.drawer.width/this.ratio,this.waveWidth=this.wavesurfer.drawer.width,this.overviewWidth=this.drawer.width/this.ratio,this.overviewPosition=0,this.moveOverviewRegion(this.wavesurfer.drawer.wrapper.scrollLeft/this.ratio),this.overviewRegion.style.width=this.overviewWidth-2*this.params.overviewBorderSize+"px")}},{key:"moveOverviewRegion",value:function(e){e<0?this.overviewPosition=0:e+this.overviewWidth<this.drawer.width?this.overviewPosition=e:this.overviewPosition=this.drawer.width-this.overviewWidth,this.overviewRegion.style.left=this.overviewPosition+"px",this.draggingOverview&&(this.wavesurfer.drawer.wrapper.scrollLeft=this.overviewPosition*this.ratio)}}]),e}();r.default=o,e.exports=r.default}])});
//# sourceMappingURL=wavesurfer.minimap.min.js.map