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

Interactive navigable audio visualization using Web Audio and Canvas

/*! wavesurfer.js 1.3.4 (Sat, 25 Feb 2017 22:02:05 GMT)
* https://github.com/katspaugh/wavesurfer.js
* @license CC-BY-3.0 */!function(a,b){"function"==typeof define&&define.amd?define(["wavesurfer"],function(a){return b(a)}):"object"==typeof exports?module.exports=b(require("wavesurfer.js")):b(WaveSurfer)}(this,function(a){"use strict";a.Minimap=a.util.extend({},a.Drawer,a.Drawer.Canvas,{init:function(b,c){this.wavesurfer=b,this.container=this.wavesurfer.drawer.container,this.lastPos=this.wavesurfer.drawer.lastPos,this.params=b.util.extend({},this.wavesurfer.drawer.params,{showRegions:!1,showOverview:!1,overviewBorderColor:"green",overviewBorderSize:2},c,{scrollParent:!1,fillParent:!0}),this.width=0,this.height=this.params.height*this.params.pixelRatio,this.createWrapper(),this.createElements(),a.Regions&&this.params.showRegions&&this.regions(),this.bindWaveSurferEvents(),this.bindMinimapEvents()},regions:function(){var a=this;this.regions={},this.wavesurfer.on("region-created",function(b){a.regions[b.id]=b,a.renderRegions()}),this.wavesurfer.on("region-updated",function(b){a.regions[b.id]=b,a.renderRegions()}),this.wavesurfer.on("region-removed",function(b){delete a.regions[b.id],a.renderRegions()})},renderRegions:function(){for(var a=this,b=this.wrapper.querySelectorAll("region"),c=0;c<b.length;++c)this.wrapper.removeChild(b[c]);Object.keys(this.regions).forEach(function(b){var c=a.regions[b],d=a.width*((c.end-c.start)/a.wavesurfer.getDuration()),e=a.width*(c.start/a.wavesurfer.getDuration()),f=a.style(document.createElement("region"),{height:"inherit",backgroundColor:c.color,width:d+"px",left:e+"px",display:"block",position:"absolute"});f.classList.add(b),a.wrapper.appendChild(f)})},createElements:function(){a.Drawer.Canvas.createElements.call(this),this.params.showOverview&&(this.overviewRegion=this.style(document.createElement("overview"),{height:this.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.wrapper.appendChild(this.overviewRegion))},bindWaveSurferEvents:function(){var a=this;this.render(),this.wavesurfer.on("audioprocess",function(b){a.progress(a.wavesurfer.backend.getPlayedPercents())}),this.wavesurfer.on("seek",function(b){a.progress(a.wavesurfer.backend.getPlayedPercents())}),this.params.showOverview&&(this.wavesurfer.on("scroll",function(b){a.draggingOverview||a.moveOverviewRegion(b.target.scrollLeft/a.ratio)}),this.wavesurfer.drawer.wrapper.addEventListener("mouseover",function(b){a.draggingOverview&&(a.draggingOverview=!1)}));var b=0,c=this.wavesurfer.util.debounce(function(){b!=a.wrapper.clientWidth&&(b=a.wrapper.clientWidth,a.render(),a.progress(a.wavesurfer.backend.getPlayedPercents()))},100);window.addEventListener("resize",c,!0),window.addEventListener("orientationchange",c,!0),this.wavesurfer.on("destroy",function(){a.destroy.bind(this),window.removeEventListener("resize",c,!0)})},bindMinimapEvents:function(){var a=this,b=0,c=!0,d={clientX:0,clientY:0};this.on("click",function(a,b){c?(this.progress(b),this.wavesurfer.seekAndCenter(b)):c=!0}.bind(this)),this.params.showOverview&&(this.overviewRegion.addEventListener("mousedown",function(c){a.draggingOverview=!0,b=c.layerX,d.clientX=c.clientX,d.clientY=c.clientY}),this.wrapper.addEventListener("mousemove",function(c){a.draggingOverview&&a.moveOverviewRegion(c.clientX-a.container.getBoundingClientRect().left-b)}),this.wrapper.addEventListener("mouseup",function(b){d.clientX-b.clientX===0&&d.clientX-b.clientX===0?(c=!0,a.draggingOverview=!1):a.draggingOverview&&(c=!1,a.draggingOverview=!1)}))},render:function(){var a=this.getWidth(),b=this.wavesurfer.backend.getPeaks(a,0,a);this.drawPeaks(b,a,0,a),this.params.showOverview&&(this.ratio=this.wavesurfer.drawer.width/this.width,this.waveShowedWidth=this.wavesurfer.drawer.width/this.ratio,this.waveWidth=this.wavesurfer.drawer.width,this.overviewWidth=this.width/this.ratio,this.overviewPosition=0,this.overviewRegion.style.width=this.overviewWidth-2*this.params.overviewBorderSize+"px")},moveOverviewRegion:function(a){a<0?this.overviewPosition=0:a+this.overviewWidth<this.width?this.overviewPosition=a:this.overviewPosition=this.width-this.overviewWidth,this.overviewRegion.style.left=this.overviewPosition+"px",this.wavesurfer.drawer.wrapper.scrollLeft=this.overviewPosition*this.ratio}}),a.initMinimap=function(b){var c=Object.create(a.Minimap);return c.init(this,b),c}});