wavesurfer.js/dist/plugin/wavesurfer.timeline.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,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("timeline",[],t):"object"==typeof exports?exports.timeline=t():(e.WaveSurfer=e.WaveSurfer||{},e.WaveSurfer.timeline=t())}("undefined"!=typeof self?self:this,function(){return function(e){function t(a){if(r[a])return r[a].exports;var n=r[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,t),n.l=!0,n.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,a){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:a})},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=0)}([function(e,t,r){"use strict";function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var r=0;r<t.length;r++){var a=t[r];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,r,a){return r&&e(t.prototype,r),a&&e(t,a),t}}(),i=function(){function e(t,r){var n=this;if(a(this,e),s.call(this),this.container="string"==typeof t.container?document.querySelector(t.container):t.container,!this.container)throw new Error("No container for wavesurfer timeline");this.wavesurfer=r,this.util=r.util,this.params=this.util.extend({},{height:20,notchPercentHeight:90,labelPadding:5,primaryColor:"#000",secondaryColor:"#c0c0c0",primaryFontColor:"#000",secondaryFontColor:"#000",fontFamily:"Arial",fontSize:10,zoomDebounce:!1,formatTimeCallback:function(e){if(e/60>1){var t=parseInt(e/60,10);return e=parseInt(e%60,10),e=e<10?"0"+e:e,t+":"+e}return Math.round(1e3*e)/1e3},timeInterval:function(e){return e>=25?1:5*e>=25?5:15*e>=25?15:60*Math.ceil(.5/e)},primaryLabelInterval:function(e){return e>=25?10:5*e>=25?6:4},secondaryLabelInterval:function(e){return e>=25?5:2}},t),this.canvases=[],this.wrapper=null,this.drawer=null,this.pixelRatio=null,this.maxCanvasWidth=null,this.maxCanvasElementWidth=null,this._onZoom=this.params.zoomDebounce?this.wavesurfer.util.debounce(function(){return n.render()},this.params.zoomDebounce):function(){return n.render()}}return n(e,null,[{key:"create",value:function(t){return{name:"timeline",deferInit:!(!t||!t.deferInit)&&t.deferInit,params:t,instance:e}}}]),n(e,[{key:"init",value:function(){this.wavesurfer.on("ready",this._onReady),this.wavesurfer.isReady&&this._onReady()}},{key:"destroy",value:function(){this.unAll(),this.wavesurfer.un("redraw",this._onRedraw),this.wavesurfer.un("zoom",this._onZoom),this.wavesurfer.un("ready",this._onReady),this.wavesurfer.drawer.wrapper.removeEventListener("scroll",this._onScroll),this.wrapper&&this.wrapper.parentNode&&(this.wrapper.removeEventListener("click",this._onWrapperClick),this.wrapper.parentNode.removeChild(this.wrapper),this.wrapper=null)}},{key:"createWrapper",value:function(){var e=this.wavesurfer.params;this.container.innerHTML="",this.wrapper=this.container.appendChild(document.createElement("timeline")),this.util.style(this.wrapper,{display:"block",position:"relative",userSelect:"none",webkitUserSelect:"none",height:this.params.height+"px"}),(e.fillParent||e.scrollParent)&&this.util.style(this.wrapper,{width:"100%",overflowX:"hidden",overflowY:"hidden"}),this.wrapper.addEventListener("click",this._onWrapperClick)}},{key:"render",value:function(){this.wrapper||this.createWrapper(),this.updateCanvases(),this.updateCanvasesPositioning(),this.renderCanvases()}},{key:"updateCanvases",value:function(){for(var e=this,t=Math.round(this.drawer.wrapper.scrollWidth),r=Math.ceil(t/this.maxCanvasElementWidth);this.canvases.length<r;)!function(){var t=e.wrapper.appendChild(document.createElement("canvas"));e.canvases.push(t),e.util.style(t,{position:"absolute",zIndex:4})}();for(;this.canvases.length>r;)!function(){var t=e.canvases.pop();t.parentElement.removeChild(t)}()}},{key:"updateCanvasesPositioning",value:function(){var e=this,t=this.canvases.length;this.canvases.forEach(function(r,a){var n=a===t-1?e.drawer.wrapper.scrollWidth-e.maxCanvasElementWidth*(t-1):e.maxCanvasElementWidth;r.width=n*e.pixelRatio,r.height=(e.params.height+1)*e.pixelRatio,e.util.style(r,{width:n+"px",height:e.params.height+"px",left:a*e.maxCanvasElementWidth+"px"})})}},{key:"renderCanvases",value:function(){var e=this,t=this.wavesurfer.backend.getDuration();if(!(t<=0)){var r=this.wavesurfer.params,a=this.params.fontSize*r.pixelRatio,n=parseInt(t,10)+1,i=r.fillParent&&!r.scrollParent?this.drawer.getWidth():this.drawer.wrapper.scrollWidth*r.pixelRatio,s=this.params.height*this.pixelRatio,o=this.params.height*(this.params.notchPercentHeight/100)*this.pixelRatio,l=i/t,h=this.params.formatTimeCallback,c=function(e){return"function"==typeof e?e(l):e},u=c(this.params.timeInterval),p=c(this.params.primaryLabelInterval),f=c(this.params.secondaryLabelInterval),d=0,v=0,m=void 0,w=[];for(m=0;m<n/u;m++)w.push([m,v,d]),v+=u,d+=l*u;var y=function(e){w.forEach(function(t){e(t[0],t[1],t[2])})};this.setFillStyles(this.params.primaryColor),this.setFonts(a+"px "+this.params.fontFamily),this.setFillStyles(this.params.primaryFontColor),y(function(t,r,a){t%p==0&&(e.fillRect(a,0,1,s),e.fillText(h(r),a+e.params.labelPadding*e.pixelRatio,s))}),this.setFillStyles(this.params.secondaryColor),this.setFonts(a+"px "+this.params.fontFamily),this.setFillStyles(this.params.secondaryFontColor),y(function(t,r,a){t%f==0&&(e.fillRect(a,0,1,s),e.fillText(h(r),a+e.params.labelPadding*e.pixelRatio,s))}),this.setFillStyles(this.params.secondaryColor),y(function(t,r,a){t%f!=0&&t%p!=0&&e.fillRect(a,0,1,o)})}}},{key:"setFillStyles",value:function(e){this.canvases.forEach(function(t){t.getContext("2d").fillStyle=e})}},{key:"setFonts",value:function(e){this.canvases.forEach(function(t){t.getContext("2d").font=e})}},{key:"fillRect",value:function(e,t,r,a){var n=this;this.canvases.forEach(function(i,s){var o=s*n.maxCanvasWidth,l={x1:Math.max(e,s*n.maxCanvasWidth),y1:t,x2:Math.min(e+r,s*n.maxCanvasWidth+i.width),y2:t+a};l.x1<l.x2&&i.getContext("2d").fillRect(l.x1-o,l.y1,l.x2-l.x1,l.y2-l.y1)})}},{key:"fillText",value:function(e,t,r){var a=void 0,n=0;this.canvases.forEach(function(i){var s=i.getContext("2d"),o=s.canvas.width;n>t+a||(n+o>t&&(a=s.measureText(e).width,s.fillText(e,t-n,r)),n+=o)})}}]),e}(),s=function(){var e=this;this._onScroll=function(){e.wrapper&&e.drawer.wrapper&&(e.wrapper.scrollLeft=e.drawer.wrapper.scrollLeft)},this._onRedraw=function(){return e.render()},this._onReady=function(){var t=e.wavesurfer;e.drawer=t.drawer,e.pixelRatio=t.drawer.params.pixelRatio,e.maxCanvasWidth=t.drawer.maxCanvasWidth||t.drawer.width,e.maxCanvasElementWidth=t.drawer.maxCanvasElementWidth||Math.round(e.maxCanvasWidth/e.pixelRatio),t.drawer.wrapper.addEventListener("scroll",e._onScroll),t.on("redraw",e._onRedraw),t.on("zoom",e._onZoom),e.render()},this._onWrapperClick=function(t){t.preventDefault();var r="offsetX"in t?t.offsetX:t.layerX;e.fireEvent("click",r/e.wrapper.scrollWidth||0)}};t.default=i,e.exports=t.default}])});
//# sourceMappingURL=wavesurfer.timeline.min.js.map