diff --git a/Gruntfile.js b/Gruntfile.js index dbec73e30..2329d9c8b 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -5,33 +5,27 @@ module.exports = function(grunt) { // JS Lint on all non-vendor files jshint: { all: [ - 'lib/js/**/*.js', - '!lib/js/almond.js', - '!lib/js/vendor/*.js' + 'src/**/*.js', + '!src/almond.js' ] - // lib_test: { - // src: ['lib/**/*.js', 'test/**/*.js'] - // } }, // r.js concatenation and minification of javascript requirejs: { compile: { options: { - name: "almond", - baseUrl: "lib/js/", - include: ['main'], - mainConfigFile: "lib/js/main.js", + name: "bower_components/almond/almond", + baseUrl: '.', + include: ['peaks'], out: "build/js/peaks.min.js", - optimize: "none", paths: { - "waveform-data": "../../bower_components/waveform-data/dist/waveform-data.min", - "EventEmitter": "../../bower_components/eventEmitter/EventEmitter", - "m": "waveform_viewer" + "peaks": "src/main", + "waveform-data": "bower_components/waveform-data/dist/waveform-data.min", + "EventEmitter": "bower_components/eventEmitter/EventEmitter" }, wrap: { // https://github.com/jrburke/almond#exporting-a-public-api - startFile: 'lib/js/frag/start.frag', - endFile: 'lib/js/frag/end.frag' + startFile: 'src/frag/start.frag', + endFile: 'src/frag/end.frag' }, optimize: "uglify2", uglify2: { @@ -76,7 +70,7 @@ module.exports = function(grunt) { livereload: 1337 }, js: { - files: ['lib/**/*.js'] + files: ['src/*.js'] }, lib_test: { files: '<%= jshint.lib_test.src %>', diff --git a/bower.json b/bower.json index 9ae540e1a..cea91b8ee 100644 --- a/bower.json +++ b/bower.json @@ -15,5 +15,9 @@ "KineticJS": "http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js", "eventEmitter": "~4.2.1", "waveform-data": "~1.1.1" + }, + "devDependencies": { + "requirejs": "~2.1.11", + "almond": "~0.2.9" } } diff --git a/build/js/peaks.min.js b/build/js/peaks.min.js index fca802a30..1c79306b8 100644 --- a/build/js/peaks.min.js +++ b/build/js/peaks.min.js @@ -1,5 +1,5 @@ /** - * almond 0.2.5 Copyright (c) 2011-2012, The Dojo Foundation All Rights Reserved. + * @license almond 0.2.9 Copyright (c) 2011-2014, The Dojo Foundation All Rights Reserved. * Available via the MIT or new BSD license. * see: http://github.com/jrburke/almond for details */ @@ -15,5 +15,5 @@ * https://github.com/bbcrd/waveform-data.js * Copyright (c) 2014 ; Licensed LGPL-3.0 */ -!function(e,t){"function"==typeof define&&define.amd?define(t):window.peaks=t()}(this,function(){var e,t,r;return function(n){function i(e,t){return _.call(e,t)}function a(e,t){var r,n,i,a,o,s,f,m,u,c,d=t&&t.split("/"),h=g.map,l=h&&h["*"]||{};if(e&&"."===e.charAt(0))if(t){for(d=d.slice(0,d.length-1),e=d.concat(e.split("/")),m=0;m0&&(e.splice(m-1,2),m-=2)}e=e.join("/")}else 0===e.indexOf("./")&&(e=e.substring(2));if((d||l)&&h){for(r=e.split("/"),m=r.length;m>0;m-=1){if(n=r.slice(0,m).join("/"),d)for(u=d.length;u>0;u-=1)if(i=h[d.slice(0,u).join("/")],i&&(i=i[n])){a=i,o=m;break}if(a)break;!s&&l&&l[n]&&(s=l[n],f=m)}!a&&s&&(a=s,o=f),a&&(r.splice(0,o,a),e=r.join("/"))}return e}function o(e,t){return function(){return h.apply(n,b.call(arguments,0).concat([e,t]))}}function s(e){return function(t){return a(t,e)}}function f(e){return function(t){v[e]=t}}function m(e){if(i(w,e)){var t=w[e];delete w[e],y[e]=!0,d.apply(n,t)}if(!i(v,e)&&!i(y,e))throw new Error("No "+e);return v[e]}function u(e){var t,r=e?e.indexOf("!"):-1;return r>-1&&(t=e.substring(0,r),e=e.substring(r+1,e.length)),[t,e]}function c(e){return function(){return g&&g.config&&g.config[e]||{}}}var d,h,l,p,v={},w={},g={},y={},_=Object.prototype.hasOwnProperty,b=[].slice;l=function(e,t){var r,n=u(e),i=n[0];return e=n[1],i&&(i=a(i,t),r=m(i)),i?e=r&&r.normalize?r.normalize(e,s(t)):a(e,t):(e=a(e,t),n=u(e),i=n[0],e=n[1],i&&(r=m(i))),{f:i?i+"!"+e:e,n:e,pr:i,p:r}},p={require:function(e){return o(e)},exports:function(e){var t=v[e];return"undefined"!=typeof t?t:v[e]={}},module:function(e){return{id:e,uri:"",exports:v[e],config:c(e)}}},d=function(e,t,r,a){var s,u,c,d,h,g,_=[];if(a=a||e,"function"==typeof r){for(t=!t.length&&r.length?["require","exports","module"]:t,h=0;ht&&(e.x=t)):(t=i.inMarker.getX()+i.inMarker.getWidth(),e.x0&&o.push(a),o.push(i%60),o.push(n%60);for(var s=0;sf?"0"+f:f}return o=o.join(":"),t||(10>r&&(r="0"+r),o+="."+r),o},defaultInMarker:function(t){return e(t.height,t.outMarkerColor,!0)},defaultOutMarker:function(t){return e(t.height,t.outMarkerColor,!1)},defaultSegmentLabelDraw:function(){return function(e,t){return new Kinetic.Text({x:12,y:12,text:t.labelText,fontSize:12,fontFamily:"Arial, sans-serif",fill:"#000",textAlign:"center"})}}}}),r("m/player/player",["m/player/waveform/waveform.mixins"],function(e){var t=function(t){var r={timeFromPercentage:function(e,t){return e*(t/100)}};return{init:function(e){var r=this;this.player=e,this.duration=this.player.duration,4===this.player.readyState&&t.emit("player_load",r),this.player.addEventListener("timeupdate",function(){t.emit("player_time_update",r.getTime())}),this.player.addEventListener("play",function(){t.emit("player_play",r.getTime())}),this.player.addEventListener("pause",function(){t.emit("player_pause",r.getTime())}),this.player.addEventListener("seeked",function(){t.emit("waveform_seek",r.getTime())})},setSource:function(e){this.player.setAttribute("src",e)},getSource:function(){return this.player.src},play:function(){this.player.play(),t.emit("radio_play",this.getTime())},pause:function(){this.player.pause(),t.emit("radio_pause",this.getTime())},getTime:function(){return this.player.currentTime},getTimeFromPercentage:function(t){return e.niceTime(this.duration*t/100,!1)},getSecsFromPercentage:function(e){return Math.floor(this.duration*e/100)},getDuration:function(){return this.duration},getPercentage:function(){return this.getPercentageFromSeconds(this.player.currentTime)},getPercentageFromSeconds:function(e){var t=e/this.duration*100;return Math.round(100*t)/100},seek:function(e){this.player.currentTime=r.timeFromPercentage(this.duration,e)},seekBySeconds:function(e){this.player.currentTime=e}}};return t}),!function(e){"object"==typeof exports?module.exports=e():"function"==typeof r&&r.amd?r("waveform-data",e):"undefined"!=typeof window?window.WaveformData=e():"undefined"!=typeof global?global.WaveformData=e():"undefined"!=typeof self&&(self.WaveformData=e())}(function(){return function e(r,n,i){function a(s,f){if(!n[s]){if(!r[s]){var m="function"==typeof t&&t;if(!f&&m)return m(s,!0);if(o)return o(s,!0);throw new Error("Cannot find module '"+s+"'")}var u=n[s]={exports:{}};r[s][0].call(u.exports,function(e){var t=r[s][1][e];return a(t?t:e)},u,u.exports,e,r,n,i)}return n[s].exports}for(var o="function"==typeof t&&t,s=0;st)throw new RangeError("End point must be non-negative.");if(e>=t)throw new RangeError("We can't end prior to the starting point.");if(0>e)throw new RangeError("Start point must be non-negative.");if(e>=r)throw new RangeError("Start point must be within range.");t>r&&(t=r),this.offset_start=e,this.offset_end=t,this.offset_length=t-e},set_segment:function(e,t,n){return n=n||"default",this.segments[n]=new r(this,e,t),this.segments[n]},resample:function(e){"number"==typeof e&&(e={width:e});var t=[],r=e.scale||Math.floor(this.duration*this.adapter.sample_rate/e.width),i=this.adapter.scale,a=this.adapter.length,o=a?this.min_sample(0):0,s=a?this.max_sample(0):0,f=0,m=0,u=-128,c=127;if(i>r)throw new Error("Zoom level "+r+" too low, minimum: "+i);for(var d,h,l,p,v,w=function(e){return Math.floor(e*r)},g=function(e,r){t.push(e,r)};a>f;){for(;Math.floor(w(m)/i)===f;)m&&g(o,s),v=f,m++,d=w(m),h=w(m-1),d!==h&&(o=c,s=u);for(d=w(m),l=Math.floor(d/i),l>a&&(l=a);l>f;)p=this.min_sample(f),o>p&&(o=p),p=this.max_sample(f),p>s&&(s=p),f++}return f!==v&&g(o,s),new n({version:this.adapter.version,samples_per_pixel:r,length:t.length/2,data:t,sample_rate:this.adapter.sample_rate},n.adapters.object)},get min(){return this.offsetValues(this.offset_start,this.offset_length,0)},get max(){return this.offsetValues(this.offset_start,this.offset_length,1)},offsetValues:function(e,t,r){var n=this.adapter,i=Array.apply(null,new Array(t));return r+=2*e,i.map(function(e,t){return n.at(2*t+r)})},get duration(){return this.adapter.length*this.adapter.scale/this.adapter.sample_rate},get offset_duration(){return this.offset_length*this.adapter.scale/this.adapter.sample_rate},get pixels_per_second(){return this.adapter.sample_rate/this.adapter.scale},get seconds_per_pixel(){return this.adapter.scale/this.adapter.sample_rate},at:function(e){return this.adapter.at(e)},at_time:function(e){return Math.floor(e*this.adapter.sample_rate/this.adapter.scale)},time:function(e){return e*this.seconds_per_pixel},in_offset:function(e){return e>=this.offset_start&&ethis.context.offset_start?this.context.offset_start:this.start>=this.context.offset_start&&this.startthis.context.offset_start&&this.end<=this.context.offset_end?this.end:this.end>this.context.offset_end&&this.startthis.start&&this.context.offset_starta))break;++i==r.length&&(t*=60,i=0)}return e},r.prototype.axisDrawFunction=function(r,n){var i=10,a=this.getAxisLabelScale(),o=t(n,a),s=o-n,f=this.view.data.at_time(s),m=r.getContext();m.strokeStyle="#ccc",m.lineWidth=1,m.font="11px sans-serif",m.fillStyle="#aaa",m.textAlign="left",m.textBaseline="bottom";for(var u=o;x=f+this.view.data.at_time(u-o),!(x>=this.view.width);){m.beginPath(),m.moveTo(x+.5,0),m.lineTo(x+.5,0+i),m.moveTo(x+.5,this.view.height),m.lineTo(x+.5,this.view.height-i),m.stroke();var c=e.niceTime(u,!0),d=m.measureText(c).width,h=x-d/2,l=this.view.height-1-i;h>=0&&m.fillText(c,h,l),u+=a}},r}),r("m/player/waveform/waveform.overview",["m/player/waveform/waveform.axis","m/player/waveform/waveform.mixins"],function(e,t){function r(t,r,n){var i=this;i.options=n.options,i.data=t,i.container=r,i.width=i.container.clientWidth,i.height=i.options.height,i.frameOffset=0,i.seeking=!1,i.stage=new Kinetic.Stage({container:r,width:i.width,height:i.height}),i.waveformLayer=new Kinetic.Layer,i.background=new Kinetic.Rect({x:0,y:0,width:i.width,height:i.height}),i.waveformLayer.add(i.background),i.uiLayer=new Kinetic.Layer,i.refLayer=new Kinetic.Layer,i.axis=new e(i),i.createWaveform(),i.createRefWaveform(),i.axis.drawAxis(0),i.createUi();var a=function(){i.stage.off("mousemove mouseup"),i.seeking=!1};i.stage.on("mousedown",function(e){if(e.targetNode&&!e.targetNode.attrs.draggable&&!e.targetNode.parent.attrs.draggable)if("mousedown"==e.type){i.seeking=!0;var t=i.refWaveformShape.getWidth();i.updateRefWaveform(i.data.time(e.layerX),i.data.time(e.layerX+t)),n.emit("overview_user_seek",i.data.time(e.layerX),e.layerX),i.stage.on("mousemove",function(e){i.updateRefWaveform(i.data.time(e.layerX),i.data.time(e.layerX+t)),n.emit("overview_user_seek",i.data.time(e.layerX),e.layerX)}),i.stage.on("mouseup",a)}else a()}),n.on("player_time_update",function(e){i.seeking||(i.playheadPixel=i.data.at_time(e),i.updateUi(i.playheadPixel))}),n.on("overview_user_seek",function(e,t){i.playheadPixel=t,i.updateUi(i.playheadPixel),i.options.audioElement.currentTime=e}),n.on("waveform_zoom_displaying",function(e,t){i.updateRefWaveform(e,t)}),n.on("resizeEndOverview",function(e,t){i.width=e,i.data=t,i.stage.setWidth(i.width),i.updateWaveform(),n.emit("overview_resized")})}return r.prototype.createWaveform=function(){var e=this;this.waveformShape=new Kinetic.Shape({drawFunc:function(r){t.waveformDrawFunction.call(this,e.data,r,t.interpolateHeight(e.height))},fill:e.options.overviewWaveformColor,strokeWidth:0}),this.waveformLayer.add(this.waveformShape),this.stage.add(this.waveformLayer)},r.prototype.createRefWaveform=function(){var e=this;this.refWaveformShape=new Kinetic.Shape({drawFunc:function(r){t.waveformOffsetDrawFunction.call(this,e.data,r,t.interpolateHeight(e.height))},fill:e.options.zoomWaveformColor,strokeWidth:0}),this.refLayer.add(this.refWaveformShape),this.stage.add(this.refLayer)},r.prototype.createUi=function(){var e=this;this.playheadLine=new Kinetic.Line({points:e._getPlayheadPoints(0),stroke:"rgba(0,0,0,1)",strokeWidth:1}),this.uiLayer.add(this.playheadLine),this.stage.add(this.uiLayer)},r.prototype.updateWaveform=function(){var e=this;e.waveformShape.setDrawFunc(function(r){t.waveformDrawFunction.call(this,e.data,r,t.interpolateHeight(e.height))}),e.waveformLayer.draw()},r.prototype.updateWaveform=function(){var e=this;e.waveformShape.setDrawFunc(function(r){t.waveformDrawFunction.call(this,e.data,r,t.interpolateHeight(e.height))}),e.waveformLayer.draw()},r.prototype.updateRefWaveform=function(e,r){var n=this,i=n.data.at_time(e),a=n.data.at_time(r);n.refWaveformShape.setDrawFunc(function(e){n.data.set_segment(i,a,"zoom"),t.waveformOffsetDrawFunction.call(this,n.data,e,t.interpolateHeight(n.height))}),n.refWaveformShape.setWidth(n.data.at_time(r)-n.data.at_time(e)),n.refLayer.draw()},r.prototype.updateUi=function(e){var t=this;t.playheadLine.setAttr("points",t._getPlayheadPoints(e)),t.uiLayer.draw()},r.prototype._getPlayheadPoints=function(e){var t=this;return[{x:e+.5,y:0},{x:e+.5,y:t.height}]},r}),r("m/player/waveform/waveform.zoomview",["m/player/waveform/waveform.axis","m/player/waveform/waveform.mixins"],function(e,t){function r(t,r,n){var i=this;i.peaks=n,i.options=n.options,i.rootData=t,i.playing=!1,i.seeking=!1,i.current_zoom_level=0,i.data=i.rootData.resample({scale:i.options.zoomLevels[i.current_zoom_level]}),i.playheadPixel=i.data.at_time(i.options.audioElement.currentTime),i.pixelLength=i.data.adapter.length,i.pixelsPerSecond=i.data.pixels_per_second,i.frameOffset=0,i.container=r,i.width=i.container.clientWidth,i.height=i.options.height,i.stage=new Kinetic.Stage({container:r,width:i.width,height:i.height}),i.zoomWaveformLayer=new Kinetic.Layer,i.uiLayer=new Kinetic.Layer,i.background=new Kinetic.Rect({x:0,y:0,width:i.width,height:i.height}),i.zoomWaveformLayer.add(i.background),i.axis=new e(i),i.createZoomWaveform(),i.axis.drawAxis(0),i.createUi(),i.stage.on("mousedown",function(e){if(e.targetNode&&!e.targetNode.attrs.draggable&&!e.targetNode.parent.attrs.draggable&&"mousedown"==e.type){i.seeking=!0;var t,r,n=e.layerX;i.stage.on("mousemove",function(e){t=e.layerX>n?n-e.layerX:1*(n-e.layerX),n=e.layerX,r=i.frameOffset+t,r=0>r?0:r>i.pixelLength-i.width?i.pixelLength-i.width:r,i.seeking=!1,i.frameOffset=r,i.updateZoomWaveform(r)}),i.stage.on("mouseup",function(){i.stage.off("mousemove mouseup"),i.seeking&&i.peaks.emit("zoomview_user_seek",i.data.time(i.frameOffset+n),i.frameOffset+n)})}});var a=function(e){var t=i.data.at_time(e);i.seekFrame(t),i.playing&&i.playFrom(e,t)};i.peaks.on("player_time_update",function(e){i.seeking||i.playing||i.seekFrame(i.data.at_time(e))}),i.peaks.on("player_time_update",function(e){i.seeking||!i.playing||i.data.in_offset(i.data.at_time(e))||i.newFrame(i.frameOffset)}),i.peaks.on("zoomview_user_seek",function(e,t){i.options.audioElement.currentTime=e,i.syncPlayhead(t),i.playing&&i.playFrom(e,i.data.at_time(e))}),i.peaks.on("waveform_seek",a),i.peaks.on("overview_user_seek",a),i.peaks.on("player_play",function(e){i.playing=!0,i.playFrom(e,i.data.at_time(e))}),i.peaks.on("player_pause",function(e){i.playing=!1,i.playheadLineAnimation&&i.playheadLineAnimation.stop(),i.syncPlayhead(i.data.at_time(e))}),i.peaks.on("waveform_zoom_level_changed",function(e){i.playing||e!=i.current_zoom_level&&(i.current_zoom_level=e,i.data=i.rootData.resample({scale:e}),i.pixelsPerSecond=i.data.pixels_per_second,i.seekFrame(i.data.at_time(i.options.audioElement.currentTime)))}),i.peaks.on("window_resized",function(e,t){i.width=e,i.data=t,i.stage.setWidth(i.width),i.updateZoomWaveform(i.frameOffset),i.peaks.emit("zoomview_resized")});var o=function(e){var t=i.options.audioElement.currentTime;t+=i.options.nudgeIncrement*e,i.seekFrame(i.data.at_time(t))};i.peaks.on("kybrd_left",o.bind(i,-1)),i.peaks.on("kybrd_right",o.bind(i,1)),i.peaks.on("kybrd_shift_left",o.bind(i,-10)),i.peaks.on("kybrd_shift_right",o.bind(i,10))}return r.prototype.createZoomWaveform=function(){var e=this;e.zoomWaveformShape=new Kinetic.Shape({drawFunc:function(r){e.data.offset(0,e.width),t.waveformDrawFunction.call(this,e.data,r,t.interpolateHeight(e.height))},fill:e.options.zoomWaveformColor,strokeWidth:0}),e.zoomWaveformLayer.add(e.zoomWaveformShape),e.stage.add(e.zoomWaveformLayer),e.peaks.emit("waveform_zoom_displaying",0*e.data.seconds_per_pixel,e.width*e.data.seconds_per_pixel)},r.prototype.createUi=function(){var e=this;e.zoomPlayheadLine=new Kinetic.Line({points:[{x:0,y:0},{x:0,y:e.height}],stroke:"rgba(0,0,0,1)",strokeWidth:1}),e.zoomPlayheadText=new Kinetic.Text({x:2,y:12,text:"00:00:00",fontSize:11,fontFamily:"sans-serif",fill:"#aaa",align:"right"}),e.zoomPlayheadGroup=new Kinetic.Group({x:0,y:0}).add(e.zoomPlayheadLine).add(e.zoomPlayheadText),e.uiLayer.add(e.zoomPlayheadGroup),e.stage.add(e.uiLayer)},r.prototype.updateZoomWaveform=function(e){var r=this,n=r.playheadPixel>=e&&r.playheadPixel<=e+r.width;if(n){var i=r.playheadPixel-e;r.zoomPlayheadGroup.show().setAttr("x",i+.5),r.zoomPlayheadText.setText(t.niceTime(r.data.time(r.playheadPixel),!1))}else r.zoomPlayheadGroup.hide();r.uiLayer.draw(),r.zoomWaveformShape.setDrawFunc(function(n){r.data.offset(e,e+r.width),t.waveformDrawFunction.call(this,r.data,n,t.interpolateHeight(r.height))}),r.zoomWaveformLayer.draw(),r.axis.drawAxis(r.data.time(e)),r.peaks.emit("waveform_zoom_displaying",e*r.data.seconds_per_pixel,(e+r.width)*r.data.seconds_per_pixel)},r.prototype.playFrom=function(e,t){var r=this;r.playheadLineAnimation&&r.playheadLineAnimation.stop();var n=0;r.playheadLineAnimation=new Kinetic.Animation(function(e){var i=e.time,a=i/1e3,o=Math.round(t-r.frameOffset+r.pixelsPerSecond*(a-n));r.syncPlayhead(r.frameOffset+o)},r.uiLayer),r.playheadLineAnimation.start()},r.prototype.newFrame=function(e){var t=e+this.width;return t=r.frameOffset&&e<=r.frameOffset+r.width;if(r.playheadPixel=e,n){var i=r.playheadPixel-r.frameOffset;r.zoomPlayheadGroup.show().setAttr("x",i+.5),r.zoomPlayheadText.setText(t.niceTime(r.data.time(r.playheadPixel),!1))}else r.zoomPlayheadGroup.hide()},r.prototype.seekFrame=function(e){var t=this,r=t.data.adapter.length-t.width;t.data.in_offset(e)||(t.frameOffset=e>t.width&&r>e?e-Math.round(t.width/2):e>=r?r:0),t.syncPlayhead(e),t.updateZoomWaveform(t.frameOffset)},r}),r("m/player/waveform/waveform.segments",["m/player/waveform/waveform.mixins"],function(e){return function(t){var r=this;r.segments=[],r.views=[t.waveform.waveformZoomView,t.waveform.waveformOverview].map(function(e){return e.segmentLayer||(e.segmentLayer=new Kinetic.Layer,e.stage.add(e.segmentLayer),e.segmentLayer.moveToTop()),e});var n=function(e,n,i,s,f,m){var u={id:e,startTime:n,endTime:i,labelText:m||""},c=new Kinetic.Group,d=new Kinetic.Group,h=[c,d];f=f||o();var l=function(){this.parent.label.show(),this.parent.view.segmentLayer.draw()},p=function(){this.parent.label.hide(),this.parent.view.segmentLayer.draw()};return h.forEach(function(e,n){var i=r.views[n];e.waveformShape=new Kinetic.Shape({fill:f,strokeWidth:0}),e.waveformShape.on("mouseenter",l),e.waveformShape.on("mouseleave",p),e.add(e.waveformShape),e.label=new t.options.segmentLabelDraw(e,u),e.add(e.label.hide()),s&&(e.inMarker=new t.options.segmentInMarker(!0,e,u,a),e.add(e.inMarker),e.outMarker=new t.options.segmentOutMarker(!0,e,u,a),e.add(e.outMarker)),i.segmentLayer.add(e)}),u.zoom=c,u.zoom.view=t.waveform.waveformZoomView,u.overview=d,u.overview.view=t.waveform.waveformOverview,u.color=f,u.editable=s,u},i=function(r){t.waveform.waveformOverview.data.set_segment(t.waveform.waveformOverview.data.at_time(r.startTime),t.waveform.waveformOverview.data.at_time(r.endTime),r.id),t.waveform.waveformZoomView.data.set_segment(t.waveform.waveformZoomView.data.at_time(r.startTime),t.waveform.waveformZoomView.data.at_time(r.endTime),r.id);var n=t.waveform.waveformOverview.data.at_time(r.startTime),i=t.waveform.waveformOverview.data.at_time(r.endTime);r.overview.waveformShape.setDrawFunc(function(n){e.waveformSegmentDrawFunction.call(this,t.waveform.waveformOverview.data,r.id,n,e.interpolateHeight(t.waveform.waveformOverview.height))}),r.overview.setWidth(i-n),r.editable&&(r.overview.inMarker&&r.overview.inMarker.show().setX(n-r.overview.inMarker.getWidth()),r.overview.outMarker&&r.overview.outMarker.show().setX(i),r.overview.inMarker.label.setText(e.niceTime(r.startTime,!1)),r.overview.outMarker.label.setText(e.niceTime(r.endTime,!1)));var a=t.waveform.waveformZoomView.data.at_time(r.startTime),o=t.waveform.waveformZoomView.data.at_time(r.endTime),s=t.waveform.waveformZoomView.frameOffset,f=t.waveform.waveformZoomView.frameOffset+t.waveform.waveformZoomView.width;if(s>a&&(a=s),o>f&&(o=f),t.waveform.waveformZoomView.data.segments[r.id].visible){var m=a-s,u=o-s;r.zoom.show(),r.zoom.waveformShape.setDrawFunc(function(n){e.waveformSegmentDrawFunction.call(this,t.waveform.waveformZoomView.data,r.id,n,e.interpolateHeight(t.waveform.waveformZoomView.height))}),r.editable&&(r.zoom.inMarker&&r.zoom.inMarker.show().setX(m-r.zoom.inMarker.getWidth()),r.zoom.outMarker&&r.zoom.outMarker.show().setX(u),r.zoom.inMarker.label.setText(e.niceTime(r.startTime,!1)),r.zoom.outMarker.label.setText(e.niceTime(r.endTime,!1)))}else r.zoom.hide()},a=function(e,t){if(e.inMarker.getX()>0){var n=e.view.frameOffset+e.inMarker.getX()+e.inMarker.getWidth();t.startTime=e.view.data.time(n)}if(e.outMarker.getX()=0==!1)throw new TypeError("[waveform.segments.createSegment] startTime should be a positive value");if(t>0==!1)throw new TypeError("[waveform.segments.createSegment] endTime should be a positive value");if(t>e==!1)throw new RangeError("[waveform.segments.createSegment] endTime should be higher than startTime");var m=n(f,e,t,a,o,s);return i(m),r.segments.push(m),m},this.render=function(){r.views.forEach(function(e){e.segmentLayer.draw()})}}}),r("m/player/waveform/waveform.core",["waveform-data","m/player/waveform/waveform.overview","m/player/waveform/waveform.zoomview","m/player/waveform/waveform.segments"],function(e,t,r,n){return function(i){return{init:function(r){var n=i.options;this.ui=r;var a=this,o=new XMLHttpRequest,s="withCredentials"in o;s||(console&&console.info&&console.info("Changing request type to .json as browser does not support ArrayBuffer"),n.dataUri=n.dataUri.replace(/\.dat$/i,".json")),o.open("GET",n.dataUri,!0),n.dataUri.match(/\.json$/i)?s&&(o.responseType="json"):o.responseType="arraybuffer",o.onload=function(t){4===this.readyState&&200===this.status&&f(e.create(t.target))},o.send();var f=function(e){a.origWaveformData=e;var r=a.origWaveformData.resample(a.ui.player.clientWidth);a.waveformOverview=new t(r,a.ui.overview,i),i.emit("waveformOverviewReady"),a.bindResize()}},openZoomView:function(){var e=this;e.waveformZoomView=new r(e.origWaveformData,e.ui.zoom,i),i.emit("waveform_zoom_start"),e.segments=new n(i),e.segments.init()},bindResize:function(){var e=this;window.addEventListener("resize",function(){e.ui.overview.hidden=!0,e.ui.zoom.hidden=!0,this.resizeTimeoutId&&clearTimeout(this.resizeTimeoutId),this.resizeTimeoutId=setTimeout(function(){var t=e.ui.player.clientWidth,r=e.origWaveformData.resample(t);i.emit("resizeEndOverview",t,r),i.emit("window_resized",t,e.origWaveformData)},500)}),i.on("overview_resized",function(){e.ui.overview.removeAttribute("hidden")}),i.on("zoomview_resized",function(){e.ui.zoom.removeAttribute("hidden")})}}}}),r("m/player/player.keyboard",[],function(){function e(e){return function(a){var o=a.keyCode,s=a.type;if(-1===["OBJECT","TEXTAREA","INPUT","SELECT","OPTION"].indexOf(a.target.nodeName))if([t,r,n,i].indexOf(a.type)>-1&&a.preventDefault(),"keydown"===s||"keypress"===s)switch(o){case t:e.emit("kybrd_space");break;case r:e.emit("kybrd_tab")}else if("keyup"===s)switch(o){case n:e.emit(a.shiftKey?"kybrd_shift_left":"kybrd_left");break;case i:e.emit(e.shiftKey?"kybrd_shift_right":"kybrd_right")}}}var t=32,r=9,n=37,i=39;return{init:function(t){document.addEventListener("keydown",e(t)),document.addEventListener("keypress",e(t)),document.addEventListener("keyup",e(t))}}}),t.config({paths:{m:"waveform_viewer"}}),r("main",["EventEmitter","m/player/player","m/player/waveform/waveform.core","m/player/waveform/waveform.mixins","m/player/player.keyboard"],function(e,t,r,n,i){function a(e){this.options={zoomLevels:[512,1024,2048,4096],keyboard:!1,nudgeIncrement:.01,inMarkerColor:"#a0a0a0",outMarkerColor:"#a0a0a0",zoomWaveformColor:"rgba(0, 225, 128, 1)",overviewWaveformColor:"rgba(0,0,0,0.2)",randomizeSegmentColor:!0,height:200,segmentColor:"rgba(255, 161, 39, 1)",template:['
','
','
',"
"].join("")},this.container=e,this.currentZoomLevel=0 -}var o=function(e){return{player:e.querySelector(".waveform"),zoom:e.querySelector(".zoom-container"),overview:e.querySelector(".overview-container")}},s=function(e,t){for(var r in t)e[r]=t[r];return e};return a.init=function(e){if(e=e||{},!e.audioElement)throw new Error("Please provide an audio element.");if(!(e.audioElement instanceof HTMLMediaElement))throw new TypeError("[Peaks.init] The audioElement option should be an HTMLMediaElement.");if(!e.dataUri)throw new TypeError("[Peaks.init] The dataUri option is mandatory.");if(!e.container)throw new Error("Please provide a container object.");if(e.container.clientWidth>0==!1)throw new TypeError("Please ensure that the container has a width.");var f=new a(e.container);if(s(f.options,e),s(f.options,{segmentInMarker:n.defaultInMarker(f.options),segmentOutMarker:n.defaultOutMarker(f.options),segmentLabelDraw:n.defaultSegmentLabelDraw(f.options)}),"string"==typeof f.options.template)f.container.innerHTML=f.options.template;else{if(!(f.options.template instanceof HTMLElement))throw new TypeError("Please ensure you provide an HTML string or a DOM template as `template` instance option. Provided: "+f.options.template);f.container.appendChild(f.options.template)}return f.options.keyboard&&i.init(f),f.player=new t(f),f.player.init(f.options.audioElement),f.waveform=new r(f),f.waveform.init(o(f.container)),f.on("waveformOverviewReady",function(){f.waveform.openZoomView(),f.options.segments&&f.segments.addSegment(f.options.segments)}),f},a.prototype=Object.create(e.prototype,{segments:{get:function(){var e=this;return{addSegment:function(t,r,n,i,a){var o=arguments[0];if("number"==typeof o&&(o=[{startTime:t,endTime:r,editable:n,color:i,labelText:a}]),!Array.isArray(o))throw new TypeError("[Peaks.segments.addSegment] Unrecognized segment parameters.");o.forEach(function(t){e.waveform.segments.createSegment(t.startTime,t.endTime,t.editable,t.color,t.labelText)}),e.waveform.segments.render()},getSegments:function(){return e.waveform.segments.segments}}}},time:{get:function(){var e=this;return{setCurrentTime:function(t){return e.player.seekBySeconds(t)},getCurrentTime:function(){return e.player.getTime()}}}},zoom:{get:function(){var e=this;return{zoomIn:function(){e.zoom.setZoom(e.currentZoomLevel-1)},zoomOut:function(){e.zoom.setZoom(e.currentZoomLevel+1)},setZoom:function(t){t>=e.options.zoomLevels.length&&(t=e.options.zoomLevels.length-1),0>t&&(t=0),e.currentZoomLevel=t,e.emit("waveform_zoom_level_changed",e.options.zoomLevels[t])},getZoom:function(){return e.currentZoomLevel}}}}}),a}),t("main")}); \ No newline at end of file +!function(e,t){"function"==typeof define&&define.amd?define(t):window.peaks=t()}(this,function(){var e,t,n;return function(r){function i(e,t){return _.call(e,t)}function a(e,t){var n,r,i,a,o,s,f,u,m,c,d,h=t&&t.split("/"),l=g.map,p=l&&l["*"]||{};if(e&&"."===e.charAt(0))if(t){for(h=h.slice(0,h.length-1),e=e.split("/"),o=e.length-1,g.nodeIdCompat&&k.test(e[o])&&(e[o]=e[o].replace(k,"")),e=h.concat(e),m=0;m0&&(e.splice(m-1,2),m-=2)}e=e.join("/")}else 0===e.indexOf("./")&&(e=e.substring(2));if((h||p)&&l){for(n=e.split("/"),m=n.length;m>0;m-=1){if(r=n.slice(0,m).join("/"),h)for(c=h.length;c>0;c-=1)if(i=l[h.slice(0,c).join("/")],i&&(i=i[r])){a=i,s=m;break}if(a)break;!f&&p&&p[r]&&(f=p[r],u=m)}!a&&f&&(a=f,s=u),a&&(n.splice(0,s,a),e=n.join("/"))}return e}function o(e,t){return function(){return h.apply(r,b.call(arguments,0).concat([e,t]))}}function s(e){return function(t){return a(t,e)}}function f(e){return function(t){v[e]=t}}function u(e){if(i(w,e)){var t=w[e];delete w[e],y[e]=!0,d.apply(r,t)}if(!i(v,e)&&!i(y,e))throw new Error("No "+e);return v[e]}function m(e){var t,n=e?e.indexOf("!"):-1;return n>-1&&(t=e.substring(0,n),e=e.substring(n+1,e.length)),[t,e]}function c(e){return function(){return g&&g.config&&g.config[e]||{}}}var d,h,l,p,v={},w={},g={},y={},_=Object.prototype.hasOwnProperty,b=[].slice,k=/\.js$/;l=function(e,t){var n,r=m(e),i=r[0];return e=r[1],i&&(i=a(i,t),n=u(i)),i?e=n&&n.normalize?n.normalize(e,s(t)):a(e,t):(e=a(e,t),r=m(e),i=r[0],e=r[1],i&&(n=u(i))),{f:i?i+"!"+e:e,n:e,pr:i,p:n}},p={require:function(e){return o(e)},exports:function(e){var t=v[e];return"undefined"!=typeof t?t:v[e]={}},module:function(e){return{id:e,uri:"",exports:v[e],config:c(e)}}},d=function(e,t,n,a){var s,m,c,d,h,g,_=[],b=typeof n;if(a=a||e,"undefined"===b||"function"===b){for(t=!t.length&&n.length?["require","exports","module"]:t,h=0;ht&&(e.x=t)):(t=i.inMarker.getX()+i.inMarker.getWidth(),e.x0&&o.push(a),o.push(i%60),o.push(r%60);for(var s=0;sf?"0"+f:f}return o=o.join(":"),t||(10>n&&(n="0"+n),o+="."+n),o},defaultInMarker:function(t){return e(t.height,t.outMarkerColor,!0)},defaultOutMarker:function(t){return e(t.height,t.outMarkerColor,!1)},defaultSegmentLabelDraw:function(){return function(e,t){return new Kinetic.Text({x:12,y:12,text:t.labelText,fontSize:12,fontFamily:"Arial, sans-serif",fill:"#000",textAlign:"center"})}}}}),n("peaks/player/player",["peaks/waveform/waveform.mixins"],function(e){var t=function(t){var n={timeFromPercentage:function(e,t){return e*(t/100)}};return{init:function(e){var n=this;this.player=e,this.duration=this.player.duration,4===this.player.readyState&&t.emit("player_load",n),this.player.addEventListener("timeupdate",function(){t.emit("player_time_update",n.getTime())}),this.player.addEventListener("play",function(){t.emit("player_play",n.getTime())}),this.player.addEventListener("pause",function(){t.emit("player_pause",n.getTime())}),this.player.addEventListener("seeked",function(){t.emit("waveform_seek",n.getTime())})},setSource:function(e){this.player.setAttribute("src",e)},getSource:function(){return this.player.src},play:function(){this.player.play(),t.emit("radio_play",this.getTime())},pause:function(){this.player.pause(),t.emit("radio_pause",this.getTime())},getTime:function(){return this.player.currentTime},getTimeFromPercentage:function(t){return e.niceTime(this.duration*t/100,!1)},getSecsFromPercentage:function(e){return Math.floor(this.duration*e/100)},getDuration:function(){return this.duration},getPercentage:function(){return this.getPercentageFromSeconds(this.player.currentTime)},getPercentageFromSeconds:function(e){var t=e/this.duration*100;return Math.round(100*t)/100},seek:function(e){this.player.currentTime=n.timeFromPercentage(this.duration,e)},seekBySeconds:function(e){this.player.currentTime=e}}};return t}),!function(e){"object"==typeof exports?module.exports=e():"function"==typeof n&&n.amd?n("waveform-data",e):"undefined"!=typeof window?window.WaveformData=e():"undefined"!=typeof global?global.WaveformData=e():"undefined"!=typeof self&&(self.WaveformData=e())}(function(){return function e(n,r,i){function a(s,f){if(!r[s]){if(!n[s]){var u="function"==typeof t&&t;if(!f&&u)return u(s,!0);if(o)return o(s,!0);throw new Error("Cannot find module '"+s+"'")}var m=r[s]={exports:{}};n[s][0].call(m.exports,function(e){var t=n[s][1][e];return a(t?t:e)},m,m.exports,e,n,r,i)}return r[s].exports}for(var o="function"==typeof t&&t,s=0;st)throw new RangeError("End point must be non-negative.");if(e>=t)throw new RangeError("We can't end prior to the starting point.");if(0>e)throw new RangeError("Start point must be non-negative.");if(e>=n)throw new RangeError("Start point must be within range.");t>n&&(t=n),this.offset_start=e,this.offset_end=t,this.offset_length=t-e},set_segment:function(e,t,r){return r=r||"default",this.segments[r]=new n(this,e,t),this.segments[r]},resample:function(e){"number"==typeof e&&(e={width:e});var t=[],n=e.scale||Math.floor(this.duration*this.adapter.sample_rate/e.width),i=this.adapter.scale,a=this.adapter.length,o=a?this.min_sample(0):0,s=a?this.max_sample(0):0,f=0,u=0,m=-128,c=127;if(i>n)throw new Error("Zoom level "+n+" too low, minimum: "+i);for(var d,h,l,p,v,w=function(e){return Math.floor(e*n)},g=function(e,n){t.push(e,n)};a>f;){for(;Math.floor(w(u)/i)===f;)u&&g(o,s),v=f,u++,d=w(u),h=w(u-1),d!==h&&(o=c,s=m);for(d=w(u),l=Math.floor(d/i),l>a&&(l=a);l>f;)p=this.min_sample(f),o>p&&(o=p),p=this.max_sample(f),p>s&&(s=p),f++}return f!==v&&g(o,s),new r({version:this.adapter.version,samples_per_pixel:n,length:t.length/2,data:t,sample_rate:this.adapter.sample_rate},r.adapters.object)},get min(){return this.offsetValues(this.offset_start,this.offset_length,0)},get max(){return this.offsetValues(this.offset_start,this.offset_length,1)},offsetValues:function(e,t,n){var r=this.adapter,i=Array.apply(null,new Array(t));return n+=2*e,i.map(function(e,t){return r.at(2*t+n)})},get duration(){return this.adapter.length*this.adapter.scale/this.adapter.sample_rate},get offset_duration(){return this.offset_length*this.adapter.scale/this.adapter.sample_rate},get pixels_per_second(){return this.adapter.sample_rate/this.adapter.scale},get seconds_per_pixel(){return this.adapter.scale/this.adapter.sample_rate},at:function(e){return this.adapter.at(e)},at_time:function(e){return Math.floor(e*this.adapter.sample_rate/this.adapter.scale)},time:function(e){return e*this.seconds_per_pixel},in_offset:function(e){return e>=this.offset_start&&ethis.context.offset_start?this.context.offset_start:this.start>=this.context.offset_start&&this.startthis.context.offset_start&&this.end<=this.context.offset_end?this.end:this.end>this.context.offset_end&&this.startthis.start&&this.context.offset_starta))break;++i==n.length&&(t*=60,i=0)}return e},n.prototype.axisDrawFunction=function(n,r){var i=10,a=this.getAxisLabelScale(),o=t(r,a),s=o-r,f=this.view.data.at_time(s),u=n.getContext();u.strokeStyle="#ccc",u.lineWidth=1,u.font="11px sans-serif",u.fillStyle="#aaa",u.textAlign="left",u.textBaseline="bottom";for(var m,c=o;m=f+this.view.data.at_time(c-o),!(m>=this.view.width);){u.beginPath(),u.moveTo(m+.5,0),u.lineTo(m+.5,0+i),u.moveTo(m+.5,this.view.height),u.lineTo(m+.5,this.view.height-i),u.stroke();var d=e.niceTime(c,!0),h=u.measureText(d).width,l=m-h/2,p=this.view.height-1-i;l>=0&&u.fillText(d,l,p),c+=a}},n}),n("peaks/waveform/waveform.overview",["peaks/waveform/waveform.axis","peaks/waveform/waveform.mixins"],function(e,t){function n(t,n,r){var i=this;i.options=r.options,i.data=t,i.container=n,i.width=i.container.clientWidth,i.height=i.options.height,i.frameOffset=0,i.seeking=!1,i.stage=new Kinetic.Stage({container:n,width:i.width,height:i.height}),i.waveformLayer=new Kinetic.Layer,i.background=new Kinetic.Rect({x:0,y:0,width:i.width,height:i.height}),i.waveformLayer.add(i.background),i.uiLayer=new Kinetic.Layer,i.refLayer=new Kinetic.Layer,i.axis=new e(i),i.createWaveform(),i.createRefWaveform(),i.axis.drawAxis(0),i.createUi();var a=function(){i.stage.off("mousemove mouseup"),i.seeking=!1};i.stage.on("mousedown",function(e){if(e.targetNode&&!e.targetNode.attrs.draggable&&!e.targetNode.parent.attrs.draggable)if("mousedown"==e.type){i.seeking=!0;var t=i.refWaveformShape.getWidth();i.updateRefWaveform(i.data.time(e.layerX),i.data.time(e.layerX+t)),r.emit("overview_user_seek",i.data.time(e.layerX),e.layerX),i.stage.on("mousemove",function(e){i.updateRefWaveform(i.data.time(e.layerX),i.data.time(e.layerX+t)),r.emit("overview_user_seek",i.data.time(e.layerX),e.layerX)}),i.stage.on("mouseup",a)}else a()}),r.on("player_time_update",function(e){i.seeking||(i.playheadPixel=i.data.at_time(e),i.updateUi(i.playheadPixel))}),r.on("overview_user_seek",function(e,t){i.playheadPixel=t,i.updateUi(i.playheadPixel),i.options.audioElement.currentTime=e}),r.on("waveform_zoom_displaying",function(e,t){i.updateRefWaveform(e,t)}),r.on("resizeEndOverview",function(e,t){i.width=e,i.data=t,i.stage.setWidth(i.width),i.updateWaveform(),r.emit("overview_resized")})}return n.prototype.createWaveform=function(){var e=this;this.waveformShape=new Kinetic.Shape({drawFunc:function(n){t.waveformDrawFunction.call(this,e.data,n,t.interpolateHeight(e.height))},fill:e.options.overviewWaveformColor,strokeWidth:0}),this.waveformLayer.add(this.waveformShape),this.stage.add(this.waveformLayer)},n.prototype.createRefWaveform=function(){var e=this;this.refWaveformShape=new Kinetic.Shape({drawFunc:function(n){t.waveformOffsetDrawFunction.call(this,e.data,n,t.interpolateHeight(e.height))},fill:e.options.zoomWaveformColor,strokeWidth:0}),this.refLayer.add(this.refWaveformShape),this.stage.add(this.refLayer)},n.prototype.createUi=function(){var e=this;this.playheadLine=new Kinetic.Line({points:e._getPlayheadPoints(0),stroke:"rgba(0,0,0,1)",strokeWidth:1}),this.uiLayer.add(this.playheadLine),this.stage.add(this.uiLayer)},n.prototype.updateWaveform=function(){var e=this;e.waveformShape.setDrawFunc(function(n){t.waveformDrawFunction.call(this,e.data,n,t.interpolateHeight(e.height))}),e.waveformLayer.draw()},n.prototype.updateWaveform=function(){var e=this;e.waveformShape.setDrawFunc(function(n){t.waveformDrawFunction.call(this,e.data,n,t.interpolateHeight(e.height))}),e.waveformLayer.draw()},n.prototype.updateRefWaveform=function(e,n){var r=this,i=r.data.at_time(e),a=r.data.at_time(n);r.refWaveformShape.setDrawFunc(function(e){r.data.set_segment(i,a,"zoom"),t.waveformOffsetDrawFunction.call(this,r.data,e,t.interpolateHeight(r.height))}),r.refWaveformShape.setWidth(r.data.at_time(n)-r.data.at_time(e)),r.refLayer.draw()},n.prototype.updateUi=function(e){var t=this;t.playheadLine.setAttr("points",t._getPlayheadPoints(e)),t.uiLayer.draw()},n.prototype._getPlayheadPoints=function(e){var t=this;return[{x:e+.5,y:0},{x:e+.5,y:t.height}]},n}),n("peaks/waveform/waveform.zoomview",["peaks/waveform/waveform.axis","peaks/waveform/waveform.mixins"],function(e,t){function n(t,n,r){var i=this;i.peaks=r,i.options=r.options,i.rootData=t,i.playing=!1,i.seeking=!1,i.current_zoom_level=0,i.data=i.rootData.resample({scale:i.options.zoomLevels[i.current_zoom_level]}),i.playheadPixel=i.data.at_time(i.options.audioElement.currentTime),i.pixelLength=i.data.adapter.length,i.pixelsPerSecond=i.data.pixels_per_second,i.frameOffset=0,i.container=n,i.width=i.container.clientWidth,i.height=i.options.height,i.stage=new Kinetic.Stage({container:n,width:i.width,height:i.height}),i.zoomWaveformLayer=new Kinetic.Layer,i.uiLayer=new Kinetic.Layer,i.background=new Kinetic.Rect({x:0,y:0,width:i.width,height:i.height}),i.zoomWaveformLayer.add(i.background),i.axis=new e(i),i.createZoomWaveform(),i.axis.drawAxis(0),i.createUi(),i.stage.on("mousedown",function(e){if(e.targetNode&&!e.targetNode.attrs.draggable&&!e.targetNode.parent.attrs.draggable&&"mousedown"==e.type){i.seeking=!0;var t,n,r=e.layerX;i.stage.on("mousemove",function(e){t=e.layerX>r?r-e.layerX:1*(r-e.layerX),r=e.layerX,n=i.frameOffset+t,n=0>n?0:n>i.pixelLength-i.width?i.pixelLength-i.width:n,i.seeking=!1,i.frameOffset=n,i.updateZoomWaveform(n)}),i.stage.on("mouseup",function(){i.stage.off("mousemove mouseup"),i.seeking&&i.peaks.emit("zoomview_user_seek",i.data.time(i.frameOffset+r),i.frameOffset+r)})}});var a=function(e){var t=i.data.at_time(e);i.seekFrame(t),i.playing&&i.playFrom(e,t)};i.peaks.on("player_time_update",function(e){i.seeking||i.playing||i.seekFrame(i.data.at_time(e))}),i.peaks.on("player_time_update",function(e){i.seeking||!i.playing||i.data.in_offset(i.data.at_time(e))||i.newFrame(i.frameOffset)}),i.peaks.on("zoomview_user_seek",function(e,t){i.options.audioElement.currentTime=e,i.syncPlayhead(t),i.playing&&i.playFrom(e,i.data.at_time(e))}),i.peaks.on("waveform_seek",a),i.peaks.on("overview_user_seek",a),i.peaks.on("player_play",function(e){i.playing=!0,i.playFrom(e,i.data.at_time(e))}),i.peaks.on("player_pause",function(e){i.playing=!1,i.playheadLineAnimation&&i.playheadLineAnimation.stop(),i.syncPlayhead(i.data.at_time(e))}),i.peaks.on("waveform_zoom_level_changed",function(e){i.playing||e!=i.current_zoom_level&&(i.current_zoom_level=e,i.data=i.rootData.resample({scale:e}),i.pixelsPerSecond=i.data.pixels_per_second,i.seekFrame(i.data.at_time(i.options.audioElement.currentTime)))}),i.peaks.on("window_resized",function(e,t){i.width=e,i.data=t,i.stage.setWidth(i.width),i.updateZoomWaveform(i.frameOffset),i.peaks.emit("zoomview_resized")});var o=function(e){var t=i.options.audioElement.currentTime;t+=i.options.nudgeIncrement*e,i.seekFrame(i.data.at_time(t))};i.peaks.on("kybrd_left",o.bind(i,-1)),i.peaks.on("kybrd_right",o.bind(i,1)),i.peaks.on("kybrd_shift_left",o.bind(i,-10)),i.peaks.on("kybrd_shift_right",o.bind(i,10))}return n.prototype.createZoomWaveform=function(){var e=this;e.zoomWaveformShape=new Kinetic.Shape({drawFunc:function(n){e.data.offset(0,e.width),t.waveformDrawFunction.call(this,e.data,n,t.interpolateHeight(e.height))},fill:e.options.zoomWaveformColor,strokeWidth:0}),e.zoomWaveformLayer.add(e.zoomWaveformShape),e.stage.add(e.zoomWaveformLayer),e.peaks.emit("waveform_zoom_displaying",0*e.data.seconds_per_pixel,e.width*e.data.seconds_per_pixel)},n.prototype.createUi=function(){var e=this;e.zoomPlayheadLine=new Kinetic.Line({points:[{x:0,y:0},{x:0,y:e.height}],stroke:"rgba(0,0,0,1)",strokeWidth:1}),e.zoomPlayheadText=new Kinetic.Text({x:2,y:12,text:"00:00:00",fontSize:11,fontFamily:"sans-serif",fill:"#aaa",align:"right"}),e.zoomPlayheadGroup=new Kinetic.Group({x:0,y:0}).add(e.zoomPlayheadLine).add(e.zoomPlayheadText),e.uiLayer.add(e.zoomPlayheadGroup),e.stage.add(e.uiLayer)},n.prototype.updateZoomWaveform=function(e){var n=this,r=n.playheadPixel>=e&&n.playheadPixel<=e+n.width;if(r){var i=n.playheadPixel-e;n.zoomPlayheadGroup.show().setAttr("x",i+.5),n.zoomPlayheadText.setText(t.niceTime(n.data.time(n.playheadPixel),!1))}else n.zoomPlayheadGroup.hide();n.uiLayer.draw(),n.zoomWaveformShape.setDrawFunc(function(r){n.data.offset(e,e+n.width),t.waveformDrawFunction.call(this,n.data,r,t.interpolateHeight(n.height))}),n.zoomWaveformLayer.draw(),n.axis.drawAxis(n.data.time(e)),n.peaks.emit("waveform_zoom_displaying",e*n.data.seconds_per_pixel,(e+n.width)*n.data.seconds_per_pixel)},n.prototype.playFrom=function(e,t){var n=this;n.playheadLineAnimation&&n.playheadLineAnimation.stop();var r=0;n.playheadLineAnimation=new Kinetic.Animation(function(e){var i=e.time,a=i/1e3,o=Math.round(t-n.frameOffset+n.pixelsPerSecond*(a-r));n.syncPlayhead(n.frameOffset+o)},n.uiLayer),n.playheadLineAnimation.start()},n.prototype.newFrame=function(e){var t=e+this.width;return t=n.frameOffset&&e<=n.frameOffset+n.width;if(n.playheadPixel=e,r){var i=n.playheadPixel-n.frameOffset;n.zoomPlayheadGroup.show().setAttr("x",i+.5),n.zoomPlayheadText.setText(t.niceTime(n.data.time(n.playheadPixel),!1))}else n.zoomPlayheadGroup.hide()},n.prototype.seekFrame=function(e){var t=this,n=t.data.adapter.length-t.width;t.data.in_offset(e)||(t.frameOffset=e>t.width&&n>e?e-Math.round(t.width/2):e>=n?n:0),t.syncPlayhead(e),t.updateZoomWaveform(t.frameOffset)},n}),n("peaks/waveform/waveform.segments",["peaks/waveform/waveform.mixins"],function(e){return function(t){var n=this;n.segments=[],n.views=[t.waveform.waveformZoomView,t.waveform.waveformOverview].map(function(e){return e.segmentLayer||(e.segmentLayer=new Kinetic.Layer,e.stage.add(e.segmentLayer),e.segmentLayer.moveToTop()),e});var r=function(e,r,i,s,f,u){var m={id:e,startTime:r,endTime:i,labelText:u||""},c=new Kinetic.Group,d=new Kinetic.Group,h=[c,d];f=f||o();var l=function(){this.parent.label.show(),this.parent.view.segmentLayer.draw()},p=function(){this.parent.label.hide(),this.parent.view.segmentLayer.draw()};return h.forEach(function(e,r){var i=n.views[r];e.waveformShape=new Kinetic.Shape({fill:f,strokeWidth:0}),e.waveformShape.on("mouseenter",l),e.waveformShape.on("mouseleave",p),e.add(e.waveformShape),e.label=new t.options.segmentLabelDraw(e,m),e.add(e.label.hide()),s&&(e.inMarker=new t.options.segmentInMarker(!0,e,m,a),e.add(e.inMarker),e.outMarker=new t.options.segmentOutMarker(!0,e,m,a),e.add(e.outMarker)),i.segmentLayer.add(e)}),m.zoom=c,m.zoom.view=t.waveform.waveformZoomView,m.overview=d,m.overview.view=t.waveform.waveformOverview,m.color=f,m.editable=s,m},i=function(n){t.waveform.waveformOverview.data.set_segment(t.waveform.waveformOverview.data.at_time(n.startTime),t.waveform.waveformOverview.data.at_time(n.endTime),n.id),t.waveform.waveformZoomView.data.set_segment(t.waveform.waveformZoomView.data.at_time(n.startTime),t.waveform.waveformZoomView.data.at_time(n.endTime),n.id);var r=t.waveform.waveformOverview.data.at_time(n.startTime),i=t.waveform.waveformOverview.data.at_time(n.endTime);n.overview.waveformShape.setDrawFunc(function(r){e.waveformSegmentDrawFunction.call(this,t.waveform.waveformOverview.data,n.id,r,e.interpolateHeight(t.waveform.waveformOverview.height))}),n.overview.setWidth(i-r),n.editable&&(n.overview.inMarker&&n.overview.inMarker.show().setX(r-n.overview.inMarker.getWidth()),n.overview.outMarker&&n.overview.outMarker.show().setX(i),n.overview.inMarker.label.setText(e.niceTime(n.startTime,!1)),n.overview.outMarker.label.setText(e.niceTime(n.endTime,!1)));var a=t.waveform.waveformZoomView.data.at_time(n.startTime),o=t.waveform.waveformZoomView.data.at_time(n.endTime),s=t.waveform.waveformZoomView.frameOffset,f=t.waveform.waveformZoomView.frameOffset+t.waveform.waveformZoomView.width;if(s>a&&(a=s),o>f&&(o=f),t.waveform.waveformZoomView.data.segments[n.id].visible){var u=a-s,m=o-s;n.zoom.show(),n.zoom.waveformShape.setDrawFunc(function(r){e.waveformSegmentDrawFunction.call(this,t.waveform.waveformZoomView.data,n.id,r,e.interpolateHeight(t.waveform.waveformZoomView.height))}),n.editable&&(n.zoom.inMarker&&n.zoom.inMarker.show().setX(u-n.zoom.inMarker.getWidth()),n.zoom.outMarker&&n.zoom.outMarker.show().setX(m),n.zoom.inMarker.label.setText(e.niceTime(n.startTime,!1)),n.zoom.outMarker.label.setText(e.niceTime(n.endTime,!1)))}else n.zoom.hide()},a=function(e,t){if(e.inMarker.getX()>0){var r=e.view.frameOffset+e.inMarker.getX()+e.inMarker.getWidth();t.startTime=e.view.data.time(r)}if(e.outMarker.getX()=0==!1)throw new TypeError("[waveform.segments.createSegment] startTime should be a positive value");if(t>0==!1)throw new TypeError("[waveform.segments.createSegment] endTime should be a positive value");if(t>e==!1)throw new RangeError("[waveform.segments.createSegment] endTime should be higher than startTime");var u=r(f,e,t,a,o,s);return i(u),n.segments.push(u),u},this.render=function(){n.views.forEach(function(e){e.segmentLayer.draw()})}}}),n("peaks/waveform/waveform.core",["waveform-data","peaks/waveform/waveform.overview","peaks/waveform/waveform.zoomview","peaks/waveform/waveform.segments"],function(e,t,n,r){return function(i){return{init:function(n){var r=i.options;this.ui=n;var a=this,o=new XMLHttpRequest,s="withCredentials"in o;s||(console&&console.info&&console.info("Changing request type to .json as browser does not support ArrayBuffer"),r.dataUri=r.dataUri.replace(/\.dat$/i,".json")),o.open("GET",r.dataUri,!0),r.dataUri.match(/\.json$/i)?s&&(o.responseType="json"):o.responseType="arraybuffer",o.onload=function(t){4===this.readyState&&200===this.status&&f(e.create(t.target))},o.send();var f=function(e){a.origWaveformData=e;var n=a.origWaveformData.resample(a.ui.player.clientWidth);a.waveformOverview=new t(n,a.ui.overview,i),i.emit("waveformOverviewReady"),a.bindResize()}},openZoomView:function(){var e=this;e.waveformZoomView=new n(e.origWaveformData,e.ui.zoom,i),i.emit("waveform_zoom_start"),e.segments=new r(i),e.segments.init()},bindResize:function(){var e=this;window.addEventListener("resize",function(){e.ui.overview.hidden=!0,e.ui.zoom.hidden=!0,e.resizeTimeoutId&&clearTimeout(e.resizeTimeoutId),e.resizeTimeoutId=setTimeout(function(){var t=e.ui.player.clientWidth,n=e.origWaveformData.resample(t);i.emit("resizeEndOverview",t,n),i.emit("window_resized",t,e.origWaveformData)},500)}),i.on("overview_resized",function(){e.ui.overview.removeAttribute("hidden")}),i.on("zoomview_resized",function(){e.ui.zoom.removeAttribute("hidden")})}}}}),n("peaks/player/player.keyboard",[],function(){function e(e){return function(a){var o=a.keyCode,s=a.type;if(-1===["OBJECT","TEXTAREA","INPUT","SELECT","OPTION"].indexOf(a.target.nodeName))if([t,n,r,i].indexOf(a.type)>-1&&a.preventDefault(),"keydown"===s||"keypress"===s)switch(o){case t:e.emit("kybrd_space");break;case n:e.emit("kybrd_tab")}else if("keyup"===s)switch(o){case r:e.emit(a.shiftKey?"kybrd_shift_left":"kybrd_left");break;case i:e.emit(e.shiftKey?"kybrd_shift_right":"kybrd_right")}}}var t=32,n=9,r=37,i=39;return{init:function(t){document.addEventListener("keydown",e(t)),document.addEventListener("keypress",e(t)),document.addEventListener("keyup",e(t))}}}),n("peaks",["EventEmitter","peaks/player/player","peaks/waveform/waveform.core","peaks/waveform/waveform.mixins","peaks/player/player.keyboard"],function(e,t,n,r,i){function a(e){this.options={zoomLevels:[512,1024,2048,4096],keyboard:!1,nudgeIncrement:.01,inMarkerColor:"#a0a0a0",outMarkerColor:"#a0a0a0",zoomWaveformColor:"rgba(0, 225, 128, 1)",overviewWaveformColor:"rgba(0,0,0,0.2)",randomizeSegmentColor:!0,height:200,segmentColor:"rgba(255, 161, 39, 1)",template:['
','
','
',"
"].join("")},this.container=e,this.currentZoomLevel=0 +}var o=function(e){return{player:e.querySelector(".waveform"),zoom:e.querySelector(".zoom-container"),overview:e.querySelector(".overview-container")}},s=function(e,t){for(var n in t)e[n]=t[n];return e};return a.init=function(e){if(e=e||{},!e.audioElement)throw new Error("Please provide an audio element.");if(!(e.audioElement instanceof HTMLMediaElement))throw new TypeError("[Peaks.init] The audioElement option should be an HTMLMediaElement.");if(!e.dataUri)throw new TypeError("[Peaks.init] The dataUri option is mandatory.");if(!e.container)throw new Error("Please provide a container object.");if(e.container.clientWidth>0==!1)throw new TypeError("Please ensure that the container has a width.");var f=new a(e.container);if(s(f.options,e),s(f.options,{segmentInMarker:r.defaultInMarker(f.options),segmentOutMarker:r.defaultOutMarker(f.options),segmentLabelDraw:r.defaultSegmentLabelDraw(f.options)}),"string"==typeof f.options.template)f.container.innerHTML=f.options.template;else{if(!(f.options.template instanceof HTMLElement))throw new TypeError("Please ensure you provide an HTML string or a DOM template as `template` instance option. Provided: "+f.options.template);f.container.appendChild(f.options.template)}return f.options.keyboard&&i.init(f),f.player=new t(f),f.player.init(f.options.audioElement),f.waveform=new n(f),f.waveform.init(o(f.container)),f.on("waveformOverviewReady",function(){f.waveform.openZoomView(),f.options.segments&&f.segments.addSegment(f.options.segments)}),f},a.prototype=Object.create(e.prototype,{segments:{get:function(){var e=this;return{addSegment:function(t,n,r,i,a){var o=arguments[0];if("number"==typeof o&&(o=[{startTime:t,endTime:n,editable:r,color:i,labelText:a}]),!Array.isArray(o))throw new TypeError("[Peaks.segments.addSegment] Unrecognized segment parameters.");o.forEach(function(t){e.waveform.segments.createSegment(t.startTime,t.endTime,t.editable,t.color,t.labelText)}),e.waveform.segments.render()},getSegments:function(){return e.waveform.segments.segments}}}},time:{get:function(){var e=this;return{setCurrentTime:function(t){return e.player.seekBySeconds(t)},getCurrentTime:function(){return e.player.getTime()}}}},zoom:{get:function(){var e=this;return{zoomIn:function(){e.zoom.setZoom(e.currentZoomLevel-1)},zoomOut:function(){e.zoom.setZoom(e.currentZoomLevel+1)},setZoom:function(t){t>=e.options.zoomLevels.length&&(t=e.options.zoomLevels.length-1),0>t&&(t=0),e.currentZoomLevel=t,e.emit("waveform_zoom_level_changed",e.options.zoomLevels[t])},getZoom:function(){return e.currentZoomLevel}}}}}),a}),t("peaks")}); \ No newline at end of file diff --git a/demo_page_dev.html b/demo_page_dev.html index 8b0cec513..be0536c9e 100644 --- a/demo_page_dev.html +++ b/demo_page_dev.html @@ -23,21 +23,18 @@ - +