1 | import MultiCanvas from './drawer.multicanvas';
|
---|
2 | import * as util from './util';
|
---|
3 | import CanvasEntry from './drawer.canvasentry';
|
---|
4 |
|
---|
5 | /**
|
---|
6 | * Calculate FFT - Based on https://github.com/corbanbrook/dsp.js
|
---|
7 | */
|
---|
8 | /* eslint-disable complexity, no-redeclare, no-var, one-var */
|
---|
9 | const FFT = function(bufferSize, sampleRate, windowFunc, alpha) {
|
---|
10 | this.bufferSize = bufferSize;
|
---|
11 | this.sampleRate = sampleRate;
|
---|
12 | this.bandwidth = (2 / bufferSize) * (sampleRate / 2);
|
---|
13 |
|
---|
14 | this.sinTable = new Float32Array(bufferSize);
|
---|
15 | this.cosTable = new Float32Array(bufferSize);
|
---|
16 | this.windowValues = new Float32Array(bufferSize);
|
---|
17 | this.reverseTable = new Uint32Array(bufferSize);
|
---|
18 |
|
---|
19 | this.peakBand = 0;
|
---|
20 | this.peak = 0;
|
---|
21 |
|
---|
22 | var i;
|
---|
23 | switch (windowFunc) {
|
---|
24 | case 'bartlett':
|
---|
25 | for (i = 0; i < bufferSize; i++) {
|
---|
26 | this.windowValues[i] =
|
---|
27 | (2 / (bufferSize - 1)) *
|
---|
28 | ((bufferSize - 1) / 2 - Math.abs(i - (bufferSize - 1) / 2));
|
---|
29 | }
|
---|
30 | break;
|
---|
31 | case 'bartlettHann':
|
---|
32 | for (i = 0; i < bufferSize; i++) {
|
---|
33 | this.windowValues[i] =
|
---|
34 | 0.62 -
|
---|
35 | 0.48 * Math.abs(i / (bufferSize - 1) - 0.5) -
|
---|
36 | 0.38 * Math.cos((Math.PI * 2 * i) / (bufferSize - 1));
|
---|
37 | }
|
---|
38 | break;
|
---|
39 | case 'blackman':
|
---|
40 | alpha = alpha || 0.16;
|
---|
41 | for (i = 0; i < bufferSize; i++) {
|
---|
42 | this.windowValues[i] =
|
---|
43 | (1 - alpha) / 2 -
|
---|
44 | 0.5 * Math.cos((Math.PI * 2 * i) / (bufferSize - 1)) +
|
---|
45 | (alpha / 2) *
|
---|
46 | Math.cos((4 * Math.PI * i) / (bufferSize - 1));
|
---|
47 | }
|
---|
48 | break;
|
---|
49 | case 'cosine':
|
---|
50 | for (i = 0; i < bufferSize; i++) {
|
---|
51 | this.windowValues[i] = Math.cos(
|
---|
52 | (Math.PI * i) / (bufferSize - 1) - Math.PI / 2
|
---|
53 | );
|
---|
54 | }
|
---|
55 | break;
|
---|
56 | case 'gauss':
|
---|
57 | alpha = alpha || 0.25;
|
---|
58 | for (i = 0; i < bufferSize; i++) {
|
---|
59 | this.windowValues[i] = Math.pow(
|
---|
60 | Math.E,
|
---|
61 | -0.5 *
|
---|
62 | Math.pow(
|
---|
63 | (i - (bufferSize - 1) / 2) /
|
---|
64 | ((alpha * (bufferSize - 1)) / 2),
|
---|
65 | 2
|
---|
66 | )
|
---|
67 | );
|
---|
68 | }
|
---|
69 | break;
|
---|
70 | case 'hamming':
|
---|
71 | for (i = 0; i < bufferSize; i++) {
|
---|
72 | this.windowValues[i] =
|
---|
73 | 0.54 -
|
---|
74 | 0.46 * Math.cos((Math.PI * 2 * i) / (bufferSize - 1));
|
---|
75 | }
|
---|
76 | break;
|
---|
77 | case 'hann':
|
---|
78 | case undefined:
|
---|
79 | for (i = 0; i < bufferSize; i++) {
|
---|
80 | this.windowValues[i] =
|
---|
81 | 0.5 * (1 - Math.cos((Math.PI * 2 * i) / (bufferSize - 1)));
|
---|
82 | }
|
---|
83 | break;
|
---|
84 | case 'lanczoz':
|
---|
85 | for (i = 0; i < bufferSize; i++) {
|
---|
86 | this.windowValues[i] =
|
---|
87 | Math.sin(Math.PI * ((2 * i) / (bufferSize - 1) - 1)) /
|
---|
88 | (Math.PI * ((2 * i) / (bufferSize - 1) - 1));
|
---|
89 | }
|
---|
90 | break;
|
---|
91 | case 'rectangular':
|
---|
92 | for (i = 0; i < bufferSize; i++) {
|
---|
93 | this.windowValues[i] = 1;
|
---|
94 | }
|
---|
95 | break;
|
---|
96 | case 'triangular':
|
---|
97 | for (i = 0; i < bufferSize; i++) {
|
---|
98 | this.windowValues[i] =
|
---|
99 | (2 / bufferSize) *
|
---|
100 | (bufferSize / 2 - Math.abs(i - (bufferSize - 1) / 2));
|
---|
101 | }
|
---|
102 | break;
|
---|
103 | default:
|
---|
104 | throw Error("No such window function '" + windowFunc + "'");
|
---|
105 | }
|
---|
106 |
|
---|
107 | var limit = 1;
|
---|
108 | var bit = bufferSize >> 1;
|
---|
109 | var i;
|
---|
110 |
|
---|
111 | while (limit < bufferSize) {
|
---|
112 | for (i = 0; i < limit; i++) {
|
---|
113 | this.reverseTable[i + limit] = this.reverseTable[i] + bit;
|
---|
114 | }
|
---|
115 |
|
---|
116 | limit = limit << 1;
|
---|
117 | bit = bit >> 1;
|
---|
118 | }
|
---|
119 |
|
---|
120 | for (i = 0; i < bufferSize; i++) {
|
---|
121 | this.sinTable[i] = Math.sin(-Math.PI / i);
|
---|
122 | this.cosTable[i] = Math.cos(-Math.PI / i);
|
---|
123 | }
|
---|
124 |
|
---|
125 | this.calculateSpectrum = function(buffer) {
|
---|
126 | // Locally scope variables for speed up
|
---|
127 | var bufferSize = this.bufferSize,
|
---|
128 | cosTable = this.cosTable,
|
---|
129 | sinTable = this.sinTable,
|
---|
130 | reverseTable = this.reverseTable,
|
---|
131 | real = new Float32Array(bufferSize),
|
---|
132 | imag = new Float32Array(bufferSize),
|
---|
133 | bSi = 2 / this.bufferSize,
|
---|
134 | sqrt = Math.sqrt,
|
---|
135 | rval,
|
---|
136 | ival,
|
---|
137 | mag,
|
---|
138 | spectrum = new Float32Array(bufferSize / 2);
|
---|
139 |
|
---|
140 | var k = Math.floor(Math.log(bufferSize) / Math.LN2);
|
---|
141 |
|
---|
142 | if (Math.pow(2, k) !== bufferSize) {
|
---|
143 | throw 'Invalid buffer size, must be a power of 2.';
|
---|
144 | }
|
---|
145 | if (bufferSize !== buffer.length) {
|
---|
146 | throw 'Supplied buffer is not the same size as defined FFT. FFT Size: ' +
|
---|
147 | bufferSize +
|
---|
148 | ' Buffer Size: ' +
|
---|
149 | buffer.length;
|
---|
150 | }
|
---|
151 |
|
---|
152 | var halfSize = 1,
|
---|
153 | phaseShiftStepReal,
|
---|
154 | phaseShiftStepImag,
|
---|
155 | currentPhaseShiftReal,
|
---|
156 | currentPhaseShiftImag,
|
---|
157 | off,
|
---|
158 | tr,
|
---|
159 | ti,
|
---|
160 | tmpReal;
|
---|
161 |
|
---|
162 | for (var i = 0; i < bufferSize; i++) {
|
---|
163 | real[i] =
|
---|
164 | buffer[reverseTable[i]] * this.windowValues[reverseTable[i]];
|
---|
165 | imag[i] = 0;
|
---|
166 | }
|
---|
167 |
|
---|
168 | while (halfSize < bufferSize) {
|
---|
169 | phaseShiftStepReal = cosTable[halfSize];
|
---|
170 | phaseShiftStepImag = sinTable[halfSize];
|
---|
171 |
|
---|
172 | currentPhaseShiftReal = 1;
|
---|
173 | currentPhaseShiftImag = 0;
|
---|
174 |
|
---|
175 | for (var fftStep = 0; fftStep < halfSize; fftStep++) {
|
---|
176 | var i = fftStep;
|
---|
177 |
|
---|
178 | while (i < bufferSize) {
|
---|
179 | off = i + halfSize;
|
---|
180 | tr =
|
---|
181 | currentPhaseShiftReal * real[off] -
|
---|
182 | currentPhaseShiftImag * imag[off];
|
---|
183 | ti =
|
---|
184 | currentPhaseShiftReal * imag[off] +
|
---|
185 | currentPhaseShiftImag * real[off];
|
---|
186 |
|
---|
187 | real[off] = real[i] - tr;
|
---|
188 | imag[off] = imag[i] - ti;
|
---|
189 | real[i] += tr;
|
---|
190 | imag[i] += ti;
|
---|
191 |
|
---|
192 | i += halfSize << 1;
|
---|
193 | }
|
---|
194 |
|
---|
195 | tmpReal = currentPhaseShiftReal;
|
---|
196 | currentPhaseShiftReal =
|
---|
197 | tmpReal * phaseShiftStepReal -
|
---|
198 | currentPhaseShiftImag * phaseShiftStepImag;
|
---|
199 | currentPhaseShiftImag =
|
---|
200 | tmpReal * phaseShiftStepImag +
|
---|
201 | currentPhaseShiftImag * phaseShiftStepReal;
|
---|
202 | }
|
---|
203 |
|
---|
204 | halfSize = halfSize << 1;
|
---|
205 | }
|
---|
206 |
|
---|
207 | for (var i = 0, N = bufferSize / 2; i < N; i++) {
|
---|
208 | rval = real[i];
|
---|
209 | ival = imag[i];
|
---|
210 | mag = bSi * sqrt(rval * rval + ival * ival);
|
---|
211 |
|
---|
212 | if (mag > this.peak) {
|
---|
213 | this.peakBand = i;
|
---|
214 | this.peak = mag;
|
---|
215 | }
|
---|
216 | spectrum[i] = mag;
|
---|
217 | }
|
---|
218 | return spectrum;
|
---|
219 | };
|
---|
220 | };
|
---|
221 | /* eslint-enable complexity, no-redeclare, no-var, one-var */
|
---|
222 |
|
---|
223 |
|
---|
224 | /**
|
---|
225 | * Experimental SpectrumMultiCanvas renderer for wavesurfer.
|
---|
226 | *
|
---|
227 | * A `SpectrumMultiCanvas` consists of one or more `CanvasEntry` instances, depending
|
---|
228 | * on the zoom level.
|
---|
229 | */
|
---|
230 | export default class SpectrumMultiCanvas extends MultiCanvas {
|
---|
231 | /**
|
---|
232 | * @param {HTMLElement} container The container node of the wavesurfer instance
|
---|
233 | * @param {WavesurferParams} params The wavesurfer initialisation options
|
---|
234 | */
|
---|
235 | constructor(container, params) {
|
---|
236 | super(container, params);
|
---|
237 |
|
---|
238 | if (params.colorMap) {
|
---|
239 | if (params.colorMap.length < 256) {
|
---|
240 | throw new Error('Colormap must contain 256 elements');
|
---|
241 | }
|
---|
242 | for (let i = 0; i < params.colorMap.length; i++) {
|
---|
243 | const cmEntry = params.colorMap[i];
|
---|
244 | if ((cmEntry.length !== 4) && (cmEntry.length !== 3)) {
|
---|
245 | throw new Error(
|
---|
246 | 'ColorMap entries must contain 3 (rgb) or 4 (rgba) values'
|
---|
247 | );
|
---|
248 | }
|
---|
249 | }
|
---|
250 | this.colorMap = params.colorMap;
|
---|
251 | } else {
|
---|
252 | this.colorMap = [];
|
---|
253 | for (let i = 0; i < 256; i++) {
|
---|
254 | const val = (255 - i) / 256;
|
---|
255 | this.colorMap.push([val, val, val, 1]);
|
---|
256 | }
|
---|
257 | }
|
---|
258 |
|
---|
259 | if (params.avDataUrl) {
|
---|
260 | this.avDataUrl = params.avDataUrl;
|
---|
261 | }
|
---|
262 | }
|
---|
263 |
|
---|
264 | /**
|
---|
265 | * Initialize the drawer
|
---|
266 | */
|
---|
267 | init() {
|
---|
268 | super.init();
|
---|
269 |
|
---|
270 | if (this.avDataUrl) {
|
---|
271 | this.loadFrequenciesData(this.avDataUrl);
|
---|
272 | } else {
|
---|
273 | console.error("No Arousal+Valence (AV) Data URL provided");
|
---|
274 | }
|
---|
275 | }
|
---|
276 |
|
---|
277 | normaliseAVVals(vals)
|
---|
278 | {
|
---|
279 | var norm_vals = new Array(vals.length);
|
---|
280 |
|
---|
281 | var max_val = 0;
|
---|
282 | for (var i=0; i<vals.length; i++) {
|
---|
283 | var abs_val = Math.abs(vals[i]);
|
---|
284 | if (abs_val > max_val) {
|
---|
285 | max_val = abs_val;
|
---|
286 | }
|
---|
287 | }
|
---|
288 |
|
---|
289 | var scale_factor = (max_val < 0.8) ? 0.8 : max_val;
|
---|
290 |
|
---|
291 | for (var i=0; i<vals.length; i++) {
|
---|
292 | var val = vals[i];
|
---|
293 | var norm_val = scale_factor * val / max_val;
|
---|
294 | norm_vals[i] = norm_val;
|
---|
295 | }
|
---|
296 |
|
---|
297 | return norm_vals;
|
---|
298 | }
|
---|
299 |
|
---|
300 | createAVProgressTimelineData(arousal_vals,valence_vals, my)
|
---|
301 | {
|
---|
302 | //console.log("**** createAVProgressTimelineData");
|
---|
303 | var canvas_width = this.canvases[0].wave.width;
|
---|
304 | console.log("**** canvas width = " + canvas_width);
|
---|
305 | console.log("**** width = " + this.width);
|
---|
306 |
|
---|
307 | if (canvas_width != 1045) {
|
---|
308 | console.log("!!!! overriding canvas width to be: 1045");
|
---|
309 | canvas_width = 1045;
|
---|
310 | }
|
---|
311 |
|
---|
312 | //console.log(" arousal_val = " + JSON.stringify(arousal_vals));
|
---|
313 | //console.log("this.arousal_val = " + JSON.stringify(this.arousal_vals));
|
---|
314 |
|
---|
315 | //this.arousal_vals = arousal_vals;
|
---|
316 | //this.valence_vals = valence_vals;
|
---|
317 |
|
---|
318 | this.arousal_vals.unshift(0);
|
---|
319 | this.valence_vals.unshift(0);
|
---|
320 |
|
---|
321 | this.norm_arousal_vals = this.normaliseAVVals(this.arousal_vals);
|
---|
322 | this.norm_valence_vals = this.normaliseAVVals(this.valence_vals);
|
---|
323 |
|
---|
324 | const time_slice = 6; // 6 secs
|
---|
325 | const frame_overlap = 3; // 3 secs
|
---|
326 |
|
---|
327 | this.timeline_steps = new Array();
|
---|
328 | this.timeline_steps.unshift(0);
|
---|
329 |
|
---|
330 | var num_vals = this.arousal_vals.length;
|
---|
331 | var t = time_slice;
|
---|
332 | var n = 1;
|
---|
333 |
|
---|
334 | while (n<num_vals) {
|
---|
335 | this.timeline_steps[n] = t;
|
---|
336 | t += frame_overlap;
|
---|
337 | n++;
|
---|
338 | }
|
---|
339 | const total_duration = t;
|
---|
340 | console.log("*** n = " + n);
|
---|
341 | console.log("*** total duration = " + total_duration);
|
---|
342 |
|
---|
343 | this.timeline_steps[n] = total_duration;
|
---|
344 | this.arousal_vals[n] = 0;
|
---|
345 | this.valence_vals[n] = 0;
|
---|
346 | this.norm_arousal_vals[n] = 0;
|
---|
347 | this.norm_valence_vals[n] = 0;
|
---|
348 | num_vals++;
|
---|
349 |
|
---|
350 | this.arousal_progress_timeline = new Array();
|
---|
351 | this.valence_progress_timeline = new Array();
|
---|
352 |
|
---|
353 | this.norm_arousal_progress_timeline = new Array();
|
---|
354 | this.norm_valence_progress_timeline = new Array();
|
---|
355 |
|
---|
356 | for (var i=1; i<num_vals; i++) {
|
---|
357 | const start_t = this.timeline_steps[i-1];
|
---|
358 | const end_t = this.timeline_steps[i];
|
---|
359 | const start_ts = Math.round((start_t / total_duration) * canvas_width);
|
---|
360 | const end_ts = Math.round((end_t / total_duration) * canvas_width);
|
---|
361 |
|
---|
362 | const start_arousal = this.arousal_vals[i-1];
|
---|
363 | const start_valence = this.valence_vals[i-1];
|
---|
364 | const end_arousal = this.arousal_vals[i];
|
---|
365 | const end_valence = this.valence_vals[i];
|
---|
366 |
|
---|
367 | const norm_start_arousal = this.norm_arousal_vals[i-1];
|
---|
368 | const norm_start_valence = this.norm_valence_vals[i-1];
|
---|
369 | const norm_end_arousal = this.norm_arousal_vals[i];
|
---|
370 | const norm_end_valence = this.norm_valence_vals[i];
|
---|
371 |
|
---|
372 | const ts_diff = end_ts - start_ts;
|
---|
373 | const arousal_diff = end_arousal - start_arousal;
|
---|
374 | const valence_diff = end_valence - start_valence;
|
---|
375 | const norm_arousal_diff = norm_end_arousal - norm_start_arousal;
|
---|
376 | const norm_valence_diff = norm_end_valence - norm_start_valence;
|
---|
377 |
|
---|
378 | var local_ts = 0;
|
---|
379 | console.log("*** start_ts = " + start_ts + ", end_ts = " + end_ts + " (ts_diff = " + ts_diff +")");
|
---|
380 | console.log("*** start_arousal = " + start_arousal + ", end_arousal = " + end_arousal);
|
---|
381 | console.log("*** norm_start_arousal = " + norm_start_arousal + ", norm_end_arousal = " + norm_end_arousal);
|
---|
382 |
|
---|
383 | for (var ts=start_ts; ts<end_ts; ts++) {
|
---|
384 | var local_proportion = local_ts / ts_diff;
|
---|
385 | var interpolated_arousal = start_arousal + (local_proportion * arousal_diff);
|
---|
386 | var interpolated_valence = start_valence + (local_proportion * valence_diff);
|
---|
387 | var norm_interpolated_arousal = norm_start_arousal + (local_proportion * norm_arousal_diff);
|
---|
388 | var norm_interpolated_valence = norm_start_valence + (local_proportion * norm_valence_diff);
|
---|
389 |
|
---|
390 | this.arousal_progress_timeline[ts] = interpolated_arousal;
|
---|
391 | this.valence_progress_timeline[ts] = interpolated_valence;
|
---|
392 |
|
---|
393 | this.norm_arousal_progress_timeline[ts] = norm_interpolated_arousal;
|
---|
394 | this.norm_valence_progress_timeline[ts] = norm_interpolated_valence;
|
---|
395 |
|
---|
396 | local_ts++;
|
---|
397 | }
|
---|
398 | }
|
---|
399 |
|
---|
400 | console.log(this.arousal_progress_timeline);
|
---|
401 | //console.log(this);
|
---|
402 | console.log("Generated interpolated AV progress timeline");
|
---|
403 | }
|
---|
404 |
|
---|
405 | loadFrequenciesData(url) {
|
---|
406 | //var that = this;
|
---|
407 |
|
---|
408 | const request = this.wavesurfer.util.fetchFile({ url: url });
|
---|
409 |
|
---|
410 | request.on('success', data => {
|
---|
411 | console.log("loadFrequenceisData: Retrieved AV URL data");
|
---|
412 | console.log(data);
|
---|
413 | //console.log("*** this = ");
|
---|
414 | //console.log(this);
|
---|
415 | //console.log("*** that = ");
|
---|
416 | //console.log(that);
|
---|
417 | //this.arousal_vals = data.arousal.slice(); // **** slice() does array copy
|
---|
418 | //this.valence_vals = data.valence.slice(); // **** slice() does array copy
|
---|
419 |
|
---|
420 | // The following two lines use map() to both:
|
---|
421 | // convert the JSON string vals to numbers
|
---|
422 | // generate a fresh array of values (rather than a shared ref) which is what we want
|
---|
423 | this.arousal_vals = data.arousal.map((v) => Number(v));
|
---|
424 | this.valence_vals = data.valence.map((v) => Number(v));
|
---|
425 |
|
---|
426 | //this.createAVProgressTimelineData(arousal_vals, valence_vals, this); // **** need to pass in 'this' ??
|
---|
427 | });
|
---|
428 |
|
---|
429 | request.on('error', e => this.fireEvent('error', e));
|
---|
430 |
|
---|
431 | return request;
|
---|
432 | }
|
---|
433 |
|
---|
434 | /**
|
---|
435 | * Update cursor style
|
---|
436 | */
|
---|
437 |
|
---|
438 | updateCursor() {
|
---|
439 | if (this.params.renderWave == 1) {
|
---|
440 | super.updateCursor();
|
---|
441 | }
|
---|
442 | else {
|
---|
443 | this.style(this.progressWave, {
|
---|
444 | //borderRightWidth: this.params.cursorSpectrumWidth + 'px',
|
---|
445 | //borderRightColor: this.params.cursorSpectrumColor
|
---|
446 | borderRightWidth: '4px',
|
---|
447 | borderRightColor: 'rgba(255,255,255,0.3)'
|
---|
448 | });
|
---|
449 | }
|
---|
450 | }
|
---|
451 |
|
---|
452 |
|
---|
453 |
|
---|
454 | drawPeaks(peaks, length, start, end) {
|
---|
455 | if (this.params.renderWave == 1) {
|
---|
456 | super.drawPeaks(peaks,length,start,end);
|
---|
457 | if ($( "#av-display" ).length) {
|
---|
458 | $( "#av-display" ).show();
|
---|
459 | }
|
---|
460 | //this.createAVProgressTimelineData(this.arousal_vals, this.valence_vals, this); // **** need to pass in 'this' ??
|
---|
461 | }
|
---|
462 | else {
|
---|
463 | if (!this.setWidth(length)) {
|
---|
464 | this.clearWave();
|
---|
465 | }
|
---|
466 |
|
---|
467 | this.getFrequencies(this.drawSpectrogram);
|
---|
468 | }
|
---|
469 | }
|
---|
470 |
|
---|
471 | resample(oldMatrix) {
|
---|
472 | const columnsNumber = this.width;
|
---|
473 | const newMatrix = [];
|
---|
474 |
|
---|
475 | const oldPiece = 1 / oldMatrix.length;
|
---|
476 | const newPiece = 1 / columnsNumber;
|
---|
477 | let i;
|
---|
478 |
|
---|
479 | for (i = 0; i < columnsNumber; i++) {
|
---|
480 | const column = new Array(oldMatrix[0].length);
|
---|
481 | let j;
|
---|
482 |
|
---|
483 | for (j = 0; j < oldMatrix.length; j++) {
|
---|
484 | const oldStart = j * oldPiece;
|
---|
485 | const oldEnd = oldStart + oldPiece;
|
---|
486 | const newStart = i * newPiece;
|
---|
487 | const newEnd = newStart + newPiece;
|
---|
488 |
|
---|
489 | const overlap =
|
---|
490 | oldEnd <= newStart || newEnd <= oldStart
|
---|
491 | ? 0
|
---|
492 | : Math.min(
|
---|
493 | Math.max(oldEnd, newStart),
|
---|
494 | Math.max(newEnd, oldStart)
|
---|
495 | ) -
|
---|
496 | Math.max(
|
---|
497 | Math.min(oldEnd, newStart),
|
---|
498 | Math.min(newEnd, oldStart)
|
---|
499 | );
|
---|
500 | let k;
|
---|
501 | /* eslint-disable max-depth */
|
---|
502 | if (overlap > 0) {
|
---|
503 | for (k = 0; k < oldMatrix[0].length; k++) {
|
---|
504 | if (column[k] == null) {
|
---|
505 | column[k] = 0;
|
---|
506 | }
|
---|
507 | column[k] += (overlap / newPiece) * oldMatrix[j][k];
|
---|
508 | }
|
---|
509 | }
|
---|
510 | /* eslint-enable max-depth */
|
---|
511 | }
|
---|
512 |
|
---|
513 | const intColumn = new Uint8Array(oldMatrix[0].length);
|
---|
514 | let m;
|
---|
515 |
|
---|
516 | for (m = 0; m < oldMatrix[0].length; m++) {
|
---|
517 | intColumn[m] = column[m];
|
---|
518 | }
|
---|
519 |
|
---|
520 | newMatrix.push(intColumn);
|
---|
521 | }
|
---|
522 |
|
---|
523 | return newMatrix;
|
---|
524 | }
|
---|
525 |
|
---|
526 | drawSpectrogram(frequenciesData, my) {
|
---|
527 | console.log("*** spectrummultican as::drawSpectrum() spec ....spec.length = " + frequenciesData.length)
|
---|
528 | console.log(frequenciesData);
|
---|
529 | //const spectrCc = my.spectrCc;
|
---|
530 | //const length = my.wavesurfer.backend.getDuration();
|
---|
531 | //const height = my.height;
|
---|
532 | //const pixels = my.resample(frequenciesData);
|
---|
533 | //const heightFactor = my.buffer ? 2 / my.buffer.numberOfChannels : 1;
|
---|
534 |
|
---|
535 | const canvas = my.canvases[0].wave;
|
---|
536 | const spectrCc = canvas.getContext('2d');
|
---|
537 | const length = my.wavesurfer.backend.getDuration();
|
---|
538 | const height = canvas.height;
|
---|
539 | const pixels = my.resample(frequenciesData);
|
---|
540 | const heightFactor = my.buffer ? 2 / my.buffer.numberOfChannels : 1;
|
---|
541 |
|
---|
542 | // now double it!
|
---|
543 | const scaledHeightFactor = heightFactor * 2;
|
---|
544 |
|
---|
545 |
|
---|
546 | let i;
|
---|
547 | let j;
|
---|
548 |
|
---|
549 | for (i = 0; i < pixels.length; i++) {
|
---|
550 | for (j = 0; j < pixels[i].length; j++) {
|
---|
551 | const colorMap = my.colorMap[pixels[i][j]]; // ****
|
---|
552 | if (colorMap.length == 4) {
|
---|
553 | //my.spectrCc.fillStyle =
|
---|
554 | spectrCc.fillStyle =
|
---|
555 | 'rgba(' +
|
---|
556 | colorMap[0] * 256 +
|
---|
557 | ', ' +
|
---|
558 | colorMap[1] * 256 +
|
---|
559 | ', ' +
|
---|
560 | colorMap[2] * 256 +
|
---|
561 | ',' +
|
---|
562 | colorMap[3] +
|
---|
563 | ')';
|
---|
564 | }
|
---|
565 | else {
|
---|
566 | //my.spectrCc.fillStyle =
|
---|
567 | spectrCc.fillStyle =
|
---|
568 | 'rgb(' +
|
---|
569 | colorMap[0] * 256 +
|
---|
570 | ', ' +
|
---|
571 | colorMap[1] * 256 +
|
---|
572 | ', ' +
|
---|
573 | colorMap[2] * 256 +
|
---|
574 | ')';
|
---|
575 | }
|
---|
576 |
|
---|
577 | //my.spectrCc.fillRect(
|
---|
578 | spectrCc.fillRect(
|
---|
579 | i,
|
---|
580 | height - j * scaledHeightFactor,
|
---|
581 | 1,
|
---|
582 | scaledHeightFactor
|
---|
583 | );
|
---|
584 | }
|
---|
585 | }
|
---|
586 |
|
---|
587 | my.createAVProgressTimelineData(my.arousal_vals, my.valence_vals, my); // **** need to pass in 'this' ??
|
---|
588 | }
|
---|
589 |
|
---|
590 | getFrequencies(callback) {
|
---|
591 | const fftSamples = this.fftSamples || 512;
|
---|
592 | const buffer = (this.buffer = this.wavesurfer.backend.buffer);
|
---|
593 | if (buffer == null) return; // **** GS3 edit
|
---|
594 | const channelOne = buffer.getChannelData(0);
|
---|
595 | const bufferLength = buffer.length;
|
---|
596 | const sampleRate = buffer.sampleRate;
|
---|
597 | const frequencies = [];
|
---|
598 |
|
---|
599 | if (!buffer) {
|
---|
600 | this.fireEvent('error', 'Web Audio buffer is not available');
|
---|
601 | return;
|
---|
602 | }
|
---|
603 |
|
---|
604 | let noverlap = this.noverlap;
|
---|
605 | if (!noverlap) {
|
---|
606 | const uniqueSamplesPerPx = buffer.length / this.canvases[0].wave.width; // **** GS3 edit
|
---|
607 | noverlap = Math.max(0, Math.round(fftSamples - uniqueSamplesPerPx));
|
---|
608 | }
|
---|
609 |
|
---|
610 | const fft = new FFT(
|
---|
611 | fftSamples,
|
---|
612 | sampleRate,
|
---|
613 | this.windowFunc,
|
---|
614 | this.alpha
|
---|
615 | );
|
---|
616 | const maxSlicesCount = Math.floor(
|
---|
617 | bufferLength / (fftSamples - noverlap)
|
---|
618 | );
|
---|
619 | let currentOffset = 0;
|
---|
620 |
|
---|
621 | while (currentOffset + fftSamples < channelOne.length) {
|
---|
622 | const segment = channelOne.slice(
|
---|
623 | currentOffset,
|
---|
624 | currentOffset + fftSamples
|
---|
625 | );
|
---|
626 | const spectrum = fft.calculateSpectrum(segment);
|
---|
627 | const array = new Uint8Array(fftSamples / 2);
|
---|
628 | let j;
|
---|
629 | for (j = 0; j < fftSamples / 2; j++) {
|
---|
630 | array[j] = Math.max(-255, Math.log10(spectrum[j]) * 45);
|
---|
631 | }
|
---|
632 | frequencies.push(array);
|
---|
633 | currentOffset += fftSamples - noverlap;
|
---|
634 | }
|
---|
635 | callback(frequencies, this);
|
---|
636 | }
|
---|
637 |
|
---|
638 |
|
---|
639 | /**
|
---|
640 | * Draw a rectangle on the multi-canvas
|
---|
641 | *
|
---|
642 | * @param {number} x X-position of the rectangle
|
---|
643 | * @param {number} y Y-position of the rectangle
|
---|
644 | * @param {number} width Width of the rectangle
|
---|
645 | * @param {number} height Height of the rectangle
|
---|
646 | * @param {number} radius Radius of the rectangle
|
---|
647 | */
|
---|
648 | /*
|
---|
649 | fillRect(x, y, width, height, radius) {
|
---|
650 | const startCanvas = Math.floor(x / this.maxCanvasWidth);
|
---|
651 | const endCanvas = Math.min(
|
---|
652 | Math.ceil((x + width) / this.maxCanvasWidth) + 1,
|
---|
653 | this.canvases.length
|
---|
654 | );
|
---|
655 | let i = startCanvas;
|
---|
656 | for (i; i < endCanvas; i++) {
|
---|
657 | const entry = this.canvases[i];
|
---|
658 | const leftOffset = i * this.maxCanvasWidth;
|
---|
659 |
|
---|
660 | const intersection = {
|
---|
661 | x1: Math.max(x, i * this.maxCanvasWidth),
|
---|
662 | y1: y,
|
---|
663 | x2: Math.min(
|
---|
664 | x + width,
|
---|
665 | i * this.maxCanvasWidth + entry.wave.width
|
---|
666 | ),
|
---|
667 | y2: y + height
|
---|
668 | };
|
---|
669 |
|
---|
670 | if (intersection.x1 < intersection.x2) {
|
---|
671 | this.setFillStyles(entry);
|
---|
672 |
|
---|
673 | entry.fillRects(
|
---|
674 | intersection.x1 - leftOffset,
|
---|
675 | intersection.y1,
|
---|
676 | intersection.x2 - intersection.x1,
|
---|
677 | intersection.y2 - intersection.y1,
|
---|
678 | radius
|
---|
679 | );
|
---|
680 | }
|
---|
681 | }
|
---|
682 | }
|
---|
683 | */
|
---|
684 |
|
---|
685 |
|
---|
686 | /**
|
---|
687 | * Render the new progress
|
---|
688 | *
|
---|
689 | * @param {number} position X-offset of progress position in pixels
|
---|
690 | */
|
---|
691 | /*
|
---|
692 | updateProgress(position) {
|
---|
693 | this.style(this.progressWave, { width: position + 'px' });
|
---|
694 | }
|
---|
695 | */
|
---|
696 |
|
---|
697 | /**
|
---|
698 | * Render the new progress
|
---|
699 | *
|
---|
700 | * @param {number} position X-offset of progress position in pixels
|
---|
701 | */
|
---|
702 | updateProgress(position) {
|
---|
703 |
|
---|
704 | if (!this.arousal_progress_timeline) {
|
---|
705 | this.createAVProgressTimelineData(this.arousal_vals, this.valence_vals, this); // **** need to pass in 'this' ??
|
---|
706 | }
|
---|
707 |
|
---|
708 | var pixel_ratio = this.params.pixelRatio
|
---|
709 | var floor_position = Math.floor(position);
|
---|
710 | //var scaled_floor_position = Math.floor(position * pixel_ratio);
|
---|
711 | console.log("position = " + position);
|
---|
712 | //console.log("scaled_floor_position = " + scaled_floor_position);
|
---|
713 |
|
---|
714 | var canvas_width = this.canvases[0].wave.width;
|
---|
715 | console.log("updateProgress(): canvas_width = " + canvas_width + " (not currently used in this fn)");
|
---|
716 |
|
---|
717 | if (this.params.renderWave == 1) {
|
---|
718 | super.updateProgress(position);
|
---|
719 | }
|
---|
720 | else {
|
---|
721 |
|
---|
722 | //var scaled_canvas_width = canvas_width * pixel_ratio;
|
---|
723 |
|
---|
724 | // ****
|
---|
725 | //console.log("position = " + position + "/" + canvas_width);
|
---|
726 | //console.log(this);
|
---|
727 |
|
---|
728 | var norm_arousal_val = this.norm_arousal_progress_timeline[floor_position];
|
---|
729 | var norm_valence_val = this.norm_valence_progress_timeline[floor_position];
|
---|
730 |
|
---|
731 | // ****
|
---|
732 | //console.log("floor_position = " + floor_position + ", arousal = " + arousal_val + ", valence = " + valence_val);
|
---|
733 |
|
---|
734 | // shift [-1,1] scale
|
---|
735 | /*
|
---|
736 | var css_norm_valence_alpha = 0.5 + (norm_arousal_val + 1.0)/4.0;
|
---|
737 | var css_norm_arousal_width = (norm_valence_val + 1.0) * 20;
|
---|
738 |
|
---|
739 | this.style(this.progressWave, {
|
---|
740 | borderRightWidth: css_norm_arousal_width+'px',
|
---|
741 | borderRightColor: 'rgba(255,255,255,'+css_norm_valence_alpha+')'
|
---|
742 | });
|
---|
743 | */
|
---|
744 |
|
---|
745 |
|
---|
746 | var css_norm_arousal_alpha = 0.5 + (norm_arousal_val + 1.0)/4.0;
|
---|
747 | var css_norm_valence_width = (norm_valence_val + 1.0) * 20;
|
---|
748 |
|
---|
749 | this.style(this.progressWave, {
|
---|
750 | borderRightWidth: css_norm_valence_width+'px',
|
---|
751 | borderRightColor: 'rgba(255,255,255,'+css_norm_arousal_alpha+')'
|
---|
752 | });
|
---|
753 |
|
---|
754 | super.updateProgress(position);
|
---|
755 | }
|
---|
756 |
|
---|
757 | var arousal_val = this.arousal_progress_timeline[floor_position];
|
---|
758 | var valence_val = this.valence_progress_timeline[floor_position];
|
---|
759 |
|
---|
760 | console.log("*** arousal_val [" + floor_position + "]" + " = " + arousal_val);
|
---|
761 |
|
---|
762 | var arousal_val_3dp = Math.round(arousal_val*1000)/1000;
|
---|
763 | var valence_val_3dp = Math.round(valence_val*1000)/1000;
|
---|
764 |
|
---|
765 | if (arousal_val_3dp >= 0) {
|
---|
766 | arousal_val_3dp = " " + arousal_val_3dp;
|
---|
767 | }
|
---|
768 |
|
---|
769 | if (valence_val_3dp >= 0) {
|
---|
770 | valence_val_3dp = " " + valence_val_3dp;
|
---|
771 | }
|
---|
772 |
|
---|
773 | if ($('#arousal-val').length) {
|
---|
774 | $('#arousal-val').html(arousal_val_3dp);
|
---|
775 | }
|
---|
776 | if ($('#valence-val').length) {
|
---|
777 | $('#valence-val').html(valence_val_3dp);
|
---|
778 | }
|
---|
779 |
|
---|
780 | }
|
---|
781 |
|
---|
782 | }
|
---|