', { class: 'audio-container' })
76 | .css('background', '#121212')
77 | .append(this.$player);
78 |
79 | this.$el.append(this.$audio);
80 | // create DOM containers for visualization
81 | this.audioHeight = this.$audio.height();
82 | this.graphHeight = this.height - this.audioHeight - this.axisHeight;
83 |
84 | this.$axis = $('
', { class: 'axis-container' });
85 | this.$graph = $('
', { class: 'graph-container' });
86 | this.$axis.css({'height': this.axisHeight, background: '#ffffff' });
87 | this.$graph.css({'height': this.graphHeight, background: '#ffffff' });
88 |
89 | this.$el.append(this.$axis, this.$graph);
90 |
91 | // create graph
92 | this.createTimeline();
93 | this.createAxis();
94 | this.bindPlayerEvents();
95 | this.bindSegmentEvents();
96 | };
97 |
98 | // -----------------------------------
99 | // create components
100 | // -----------------------------------
101 | Plugin.prototype.createTimeline = function() {
102 | // create graph
103 | this.graph = waves.ui.timeline()
104 | .width(this.width)
105 | .height(this.graphHeight)
106 | .xDomain([0, this.audioBuffer.duration]);
107 |
108 | this.waveformLayer = waves.ui.waveform()
109 | .data(this.audioBuffer.getChannelData(0).buffer)
110 | .sampleRate(this.audioBuffer.sampleRate)
111 | .color(this.config.waveformColor);
112 |
113 | if (this.annotations) {
114 | this.segmentLayer = waves.ui.segment()
115 | .params({
116 | interactions: this.config.segmentInteractions,
117 | opacity: this.config.segmentOpacity
118 | })
119 | .data(this.annotations)
120 | .color((function(d, v) {
121 | if (v === undefined) { return d.color || this.config.segmentColor }
122 | d.color = v;
123 | }).bind(this));
124 | }
125 |
126 | this.cursorLayer = waves.ui.marker()
127 | .params({ displayHandle: false })
128 | .color(this.config.cursorColor)
129 | .opacity(0.9);
130 |
131 | this.anchorLayer = waves.ui.marker()
132 | .params({ displayHandle: false })
133 | .color(this.config.anchorColor)
134 | .opacity(0.7);
135 |
136 | this.graph.add(this.waveformLayer);
137 | if (this.segmentLayer) {
138 | this.graph.add(this.segmentLayer);
139 | }
140 | this.graph.add(this.cursorLayer);
141 | this.graph.add(this.anchorLayer);
142 |
143 | d3.select(this.$graph[0]).call(this.graph.draw);
144 | };
145 |
146 | Plugin.prototype.createAxis = function() {
147 | var zoomerSvg = d3.select(this.$axis[0]).append('svg')
148 | .attr('width', this.width)
149 | .attr('height', 30)
150 | .style('font-family', 'monospace')
151 | .style('font-size', '11px');
152 |
153 | var xAxis = d3.svg.axis()
154 | .scale(this.graph.xScale)
155 | .tickSize(1)
156 | .tickFormat(function(d) {
157 | var form = d % 1 === 0 ? '%M:%S' : '%M:%S:%L';
158 | var date = new Date(d * 1000);
159 | var format = d3.time.format(form);
160 | return format(date);
161 | });
162 |
163 | // add the axis to the newly created svg element
164 | var axis = zoomerSvg.append('g')
165 | .attr('class', 'x-axis')
166 | .attr('transform', 'translate(0, 0)')
167 | .attr('fill', '#555')
168 | .call(xAxis);
169 |
170 | var graph = this.graph;
171 | var anchor = this.anchorLayer;
172 | // instanciate the zoomer layer
173 | var zoom = waves.ui.zoomer()
174 | .select('.axis-container', this.$el[0])
175 | .on('mousedown', function(e) {
176 | var xDomainPos = graph.xScale.invert(e.anchor);
177 | anchor.setCurrentTime(xDomainPos);
178 | graph.update(anchor);
179 | // disable selection on body
180 | $('body').css({ userSelect: 'none' });
181 | })
182 | .on('mousemove', function(e) {
183 | e.originalEvent.preventDefault();
184 | // update graph
185 | graph.xZoom(e);
186 | graph.update();
187 | // redraw the axis to keep it up to date with the graph
188 | axis.call(xAxis);
189 | })
190 | .on('mouseup', function(e) {
191 | // set the final xZoom value of the graph
192 | graph.xZoomSet();
193 | // update axis
194 | axis.call(xAxis);
195 | // enable selection on body
196 | $('body').css({ userSelect: 'text' });
197 | });
198 | };
199 |
200 | // -----------------------------------
201 | // update cursor
202 | // -----------------------------------
203 | Plugin.prototype.updateCursorPosition = function() {
204 | this.currentTime = this.$player[0].currentTime;
205 | this.cursorLayer.setCurrentTime(this.currentTime);
206 | this.graph.update(this.cursorLayer);
207 | };
208 |
209 | Plugin.prototype.requestCursorUpdate = function() {
210 | var requestCursorUpdate = this.requestCursorUpdate.bind(this);
211 | this.updateCursorPosition();
212 | this.rAFId = requestAnimationFrame(requestCursorUpdate);
213 | };
214 |
215 | Plugin.prototype.cancelCursorUpdate = function() {
216 | cancelAnimationFrame(this.rAFId);
217 | };
218 |
219 | // -----------------------------------
220 | // events
221 | // -----------------------------------
222 | Plugin.prototype.bindPlayerEvents = function() {
223 | var player = this.$player[0];
224 | var updateCursorPosition = this.updateCursorPosition.bind(this);
225 | var requestCursorUpdate = this.requestCursorUpdate.bind(this);
226 | var cancelCursorUpdate = this.cancelCursorUpdate.bind(this);
227 |
228 | player.addEventListener('seeked', updateCursorPosition);
229 | player.addEventListener('play', requestCursorUpdate);
230 | player.addEventListener('pause', cancelCursorUpdate);
231 | player.addEventListener('ended', function() {
232 | cancelCursorUpdate();
233 | player.currentTime = 0;
234 | updateCursorPosition();
235 | });
236 | };
237 |
238 | Plugin.prototype.bindSegmentEvents = function() {
239 | if (!this.segmentLayer) { return; }
240 | var player = this.$player[0];
241 |
242 | this.segmentLayer.on('mousedown', function(item, e) {
243 | if (!item) { return; }
244 | var datum = d3.select(item).datum();
245 | player.currentTime = datum.start;
246 | player.play();
247 | });
248 | };
249 |
250 | // -----------------------------------
251 | // plugin factory
252 | // -----------------------------------
253 | $.fn[pluginName] = function(options) {
254 | options = options || {};
255 |
256 | return $(this).each(function(index, el) {
257 | var $el = $(el);
258 |
259 | if (!$el.data('plugin-' + pluginName)) {
260 | $el.data('plugin-' + pluginName, new Plugin($el, options));
261 | }
262 | });
263 | };
264 | }(jQuery, waves, window, document));
--------------------------------------------------------------------------------