UNPKG

wavesurfer.js

Version:

Interactive navigable audio visualization using Web Audio and Canvas

3 lines 6.7 kB
/*! wavesurfer.js 1.0.41 * https://github.com/katspaugh/wavesurfer.js * @license CC-BY-3.0 */"use strict";WaveSurfer.Regions={init:function(a){this.wavesurfer=a,this.wrapper=this.wavesurfer.drawer.wrapper,this.list={}},add:function(a){var b=Object.create(WaveSurfer.Region);return b.init(a,this.wavesurfer),this.list[b.id]=b,b.on("remove",function(){delete this.list[b.id]}.bind(this)),b},clear:function(){Object.keys(this.list).forEach(function(a){this.list[a].remove()},this)},enableDragSelection:function(a){var b,c,d,e=this;this.wrapper.addEventListener("mousedown",function(a){b=!0,c=e.wavesurfer.drawer.handleEvent(a),d=null}),this.wrapper.addEventListener("mouseup",function(a){b=!1,d&&(d.fireEvent("update-end",a),e.wavesurfer.fireEvent("region-update-end",d,a)),d=null}),this.wrapper.addEventListener("mousemove",function(f){if(b){d||(d=e.add(a||{}));var g=e.wavesurfer.getDuration(),h=e.wavesurfer.drawer.handleEvent(f);d.update({start:Math.min(h*g,c*g),end:Math.max(h*g,c*g)})}})}},WaveSurfer.Region={style:WaveSurfer.Drawer.style,init:function(a,b){this.wavesurfer=b,this.wrapper=b.drawer.wrapper,this.id=null==a.id?WaveSurfer.util.getId():a.id,this.start=Number(a.start)||0,this.end=null==a.end?this.start+4/this.wrapper.scrollWidth*this.wavesurfer.getDuration():Number(a.end),this.resize=void 0===a.resize?!0:Boolean(a.resize),this.drag=void 0===a.drag?!0:Boolean(a.drag),this.loop=Boolean(a.loop),this.color=a.color||"rgba(0, 0, 0, 0.1)",this.data=a.data||{},this.maxLength=a.maxLength,this.minLength=a.minLength,this.bindInOut(),this.render(),this.wavesurfer.fireEvent("region-created",this)},update:function(a){null!=a.start&&(this.start=Number(a.start)),null!=a.end&&(this.end=Number(a.end)),null!=a.loop&&(this.loop=Boolean(a.loop)),null!=a.color&&(this.color=a.color),null!=a.data&&(this.data=a.data),null!=a.resize&&(this.resize=Boolean(a.resize)),null!=a.drag&&(this.drag=Boolean(a.drag)),null!=a.maxLength&&(this.maxLength=Number(a.maxLength)),null!=a.minLength&&(this.minLength=Number(a.minLength)),this.updateRender(),this.fireEvent("update"),this.wavesurfer.fireEvent("region-updated",this)},remove:function(a){this.element&&(this.wrapper.removeChild(this.element),this.element=null,this.fireEvent("remove"),this.wavesurfer.fireEvent("region-removed",this))},play:function(){this.wavesurfer.play(this.start,this.end),this.fireEvent("play"),this.wavesurfer.fireEvent("region-play",this)},playLoop:function(){this.play(),this.once("out",this.playLoop.bind(this))},render:function(){var a=document.createElement("region");a.className="wavesurfer-region",a.title=this.formatTime(this.start,this.end),a.setAttribute("data-id",this.id);this.wrapper.scrollWidth;if(this.style(a,{position:"absolute",zIndex:2,height:"100%",top:"0px"}),this.resize){var b=a.appendChild(document.createElement("handle")),c=a.appendChild(document.createElement("handle"));b.className="wavesurfer-handle wavesurfer-handle-start",c.className="wavesurfer-handle wavesurfer-handle-end";var d={cursor:"col-resize",position:"absolute",left:"0px",top:"0px",width:"1%",maxWidth:"4px",height:"100%"};this.style(b,d),this.style(c,d),this.style(c,{left:"100%"})}this.element=this.wrapper.appendChild(a),this.updateRender(),this.bindEvents(a)},formatTime:function(a,b){return(a==b?[a]:[a,b]).map(function(a){return[Math.floor(a%3600/60),("00"+Math.floor(a%60)).slice(-2)].join(":")}).join("–")},updateRender:function(){var a=this.wavesurfer.getDuration(),b=this.wrapper.scrollWidth;this.start<0&&(this.start=0,this.end=this.end-this.start),this.end>a&&(this.end=a,this.start=a-(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)),this.style(this.element,{left:~~(this.start/a*b)+"px",width:~~((this.end-this.start)/a*b)+"px",backgroundColor:this.color,cursor:this.drag?"move":"default"}),this.element.title=this.formatTime(this.start,this.end)},bindInOut:function(){var a=this,b=function(){a.firedIn=!1,a.firedOut=!1},c=function(b){!a.firedIn&&a.start<=b&&a.end>b&&(a.firedIn=!0,a.fireEvent("in"),a.wavesurfer.fireEvent("region-in",a)),!a.firedOut&&a.firedIn&&a.end<=b&&(a.firedOut=!0,a.fireEvent("out"),a.wavesurfer.fireEvent("region-out",a))};this.wavesurfer.on("play",b),this.wavesurfer.backend.on("audioprocess",c),this.on("remove",function(){a.wavesurfer.un("play",b),a.wavesurfer.backend.un("audioprocess",c)}),this.on("out",function(){a.loop&&a.wavesurfer.play(a.start)})},bindEvents:function(){var a=this;this.element.addEventListener("mouseenter",function(b){a.fireEvent("mouseenter",b),a.wavesurfer.fireEvent("region-mouseenter",a,b)}),this.element.addEventListener("mouseleave",function(b){a.fireEvent("mouseleave",b),a.wavesurfer.fireEvent("region-mouseleave",a,b)}),this.element.addEventListener("click",function(b){b.preventDefault(),a.fireEvent("click",b),a.wavesurfer.fireEvent("region-click",a,b)}),this.element.addEventListener("dblclick",function(b){b.stopPropagation(),b.preventDefault(),a.fireEvent("dblclick",b),a.wavesurfer.fireEvent("region-dblclick",a,b)}),(this.drag||this.resize)&&function(){var b,c,d,e=a.wavesurfer.getDuration(),f=function(f){f.stopPropagation(),d=a.wavesurfer.drawer.handleEvent(f)*e,"handle"==f.target.tagName.toLowerCase()?c=f.target.classList.contains("wavesurfer-handle-start")?"start":"end":b=!0},g=function(d){(b||c)&&(b=!1,c=!1,d.stopPropagation(),d.preventDefault(),a.fireEvent("update-end",d),a.wavesurfer.fireEvent("region-update-end",a,d))},h=function(f){if(b||c){var g=a.wavesurfer.drawer.handleEvent(f)*e,h=g-d;d=g,a.drag&&b&&a.onDrag(h),a.resize&&c&&a.onResize(h,c)}};a.element.addEventListener("mousedown",f),a.wrapper.addEventListener("mousemove",h),document.body.addEventListener("mouseup",g),a.on("remove",function(){document.body.removeEventListener("mouseup",g),a.wrapper.removeEventListener("mousemove",h)}),a.wavesurfer.on("destroy",function(){document.body.removeEventListener("mouseup",g)})}()},onDrag:function(a){this.update({start:this.start+a,end:this.end+a})},onResize:function(a,b){"start"==b?this.update({start:Math.min(this.start+a,this.end),end:Math.max(this.start+a,this.end)}):this.update({start:Math.min(this.end+a,this.start),end:Math.max(this.end+a,this.start)})}},WaveSurfer.util.extend(WaveSurfer.Region,WaveSurfer.Observer),WaveSurfer.initRegions=function(){this.regions||(this.regions=Object.create(WaveSurfer.Regions),this.regions.init(this))},WaveSurfer.addRegion=function(a){return this.initRegions(),this.regions.add(a)},WaveSurfer.clearRegions=function(){this.regions&&this.regions.clear()},WaveSurfer.enableDragSelection=function(a){this.initRegions(),this.regions.enableDragSelection(a)};