wavesurfer.js
Version:
Interactive navigable audio visualization using Web Audio and Canvas
3 lines • 3.73 kB
JavaScript
/*! wavesurfer.js 1.0.41
* https://github.com/katspaugh/wavesurfer.js
* @license CC-BY-3.0 */!function(a,b){"function"==typeof define&&define.amd?define(["wavesurfer"],b):a.WaveSurfer.Timeline=b(a.WaveSurfer)}(this,function(a){"use strict";return a.Timeline={init:function(a){this.params=a;var b=this.wavesurfer=a.wavesurfer;if(!this.wavesurfer)throw Error("No WaveSurfer intance provided");var c=this.drawer=this.wavesurfer.drawer;if(this.container="string"==typeof a.container?document.querySelector(a.container):a.container,!this.container)throw Error("No container for WaveSurfer timeline");this.width=c.width,this.height=this.params.height||20,this.notchPercentHeight=this.params.notchPercentHeight||90,this.primaryColor=this.params.primaryColor||"#000",this.secondaryColor=this.params.secondaryColor||"#c0c0c0",this.primaryFontColor=this.params.primaryFontColor||"#000",this.secondaryFontColor=this.params.secondaryFontColor||"#000",this.fontFamily=this.params.fontFamily||"Arial",this.fontSize=this.params.fontSize||10,this.createWrapper(),this.createCanvas(),this.render(),b.drawer.wrapper.onscroll=this.updateScroll.bind(this),b.on("redraw",this.render.bind(this)),b.on("destroy",this.destroy.bind(this))},destroy:function(){this.unAll(),this.wrapper&&this.wrapper.parentNode&&(this.wrapper.parentNode.removeChild(this.wrapper),this.wrapper=null)},createWrapper:function(){var a=this.container.querySelector("timeline");a&&this.container.removeChild(a);var b=this.wavesurfer.params;this.wrapper=this.container.appendChild(document.createElement("timeline")),this.drawer.style(this.wrapper,{display:"block",position:"relative",userSelect:"none",webkitUserSelect:"none",height:this.height+"px"}),(b.fillParent||b.scrollParent)&&this.drawer.style(this.wrapper,{width:"100%",overflowX:"hidden",overflowY:"hidden"});var c=this;this.wrapper.addEventListener("click",function(a){a.preventDefault();var b="offsetX"in a?a.offsetX:a.layerX;c.fireEvent("click",b/c.wrapper.scrollWidth||0)})},createCanvas:function(){var a=this.canvas=this.wrapper.appendChild(document.createElement("canvas"));this.timeCc=a.getContext("2d"),this.wavesurfer.drawer.style(a,{position:"absolute",zIndex:4})},render:function(){this.updateCanvasStyle(),this.drawTimeCanvas()},updateCanvasStyle:function(){var a=this.drawer.wrapper.scrollWidth;this.canvas.width=a*this.wavesurfer.params.pixelRatio,this.canvas.height=this.height*this.wavesurfer.params.pixelRatio,this.canvas.style.width=a+"px",this.canvas.style.height=this.height+"px"},drawTimeCanvas:function(){var a=this.wavesurfer.backend,b=this.wavesurfer.params,c=a.getDuration();if(b.fillParent&&!b.scrollParent)var d=this.drawer.getWidth();else d=this.drawer.wrapper.scrollWidth*b.pixelRatio;var e=d/c;if(c>0){var f=0,g=0,h=parseInt(c,10)+1,i=function(a){if(a/60>1){var b=parseInt(a/60),a=parseInt(a%60);return a=10>a?"0"+a:a,""+b+":"+a}return a};if(1*e>=25)var j=1,k=10,l=5;else if(5*e>=25)var j=5,k=6,l=2;else if(15*e>=25)var j=15,k=4,l=2;else var j=60,k=4,l=2;for(var m=this.height-4,n=this.height*(this.notchPercentHeight/100)-4,o=this.fontSize*b.pixelRatio,p=0;h/j>p;p++)p%k==0?(this.timeCc.fillStyle=this.primaryColor,this.timeCc.fillRect(f,0,1,m),this.timeCc.font=o+"px "+this.fontFamily,this.timeCc.fillStyle=this.primaryFontColor,this.timeCc.fillText(i(g),f+5,m)):p%l==0?(this.timeCc.fillStyle=this.secondaryColor,this.timeCc.fillRect(f,0,1,m),this.timeCc.font=o+"px "+this.fontFamily,this.timeCc.fillStyle=this.secondaryFontColor,this.timeCc.fillText(i(g),f+5,m)):(this.timeCc.fillStyle=this.secondaryColor,this.timeCc.fillRect(f,0,1,n)),g+=j,f+=e*j}},updateScroll:function(){this.wrapper.scrollLeft=this.drawer.wrapper.scrollLeft}},a.util.extend(a.Timeline,a.Observer),a.Timeline});