source: gs3-extensions/mars-src/trunk/src/wavesurfer-renderer/drawer.spectrummulticanvas.js@ 35193

import MultiCanvas from './drawer.multicanvas';
import * as util from './util';
import CanvasEntry from './drawer.canvasentry';

/**
 * Calculate FFT - Based on https://github.com/corbanbrook/dsp.js
 */
/* eslint-disable complexity, no-redeclare, no-var, one-var */
const FFT = function(bufferSize, sampleRate, windowFunc, alpha) {
    this.bufferSize = bufferSize;
    this.sampleRate = sampleRate;
    this.bandwidth = (2 / bufferSize) * (sampleRate / 2);

    this.sinTable = new Float32Array(bufferSize);
    this.cosTable = new Float32Array(bufferSize);
    this.windowValues = new Float32Array(bufferSize);
    this.reverseTable = new Uint32Array(bufferSize);

    this.peakBand = 0;
    this.peak = 0;

    var i;
    switch (windowFunc) {
        case 'bartlett':
            for (i = 0; i < bufferSize; i++) {
                this.windowValues[i] =
                    (2 / (bufferSize - 1)) *
                    ((bufferSize - 1) / 2 - Math.abs(i - (bufferSize - 1) / 2));
            }
            break;
        case 'bartlettHann':
            for (i = 0; i < bufferSize; i++) {
                this.windowValues[i] =
                    0.62 -
                    0.48 * Math.abs(i / (bufferSize - 1) - 0.5) -
                    0.38 * Math.cos((Math.PI * 2 * i) / (bufferSize - 1));
            }
            break;
        case 'blackman':
            alpha = alpha || 0.16;
            for (i = 0; i < bufferSize; i++) {
                this.windowValues[i] =
                    (1 - alpha) / 2 -
                    0.5 * Math.cos((Math.PI * 2 * i) / (bufferSize - 1)) +
                    (alpha / 2) *
                        Math.cos((4 * Math.PI * i) / (bufferSize - 1));
            }
            break;
        case 'cosine':
            for (i = 0; i < bufferSize; i++) {
                this.windowValues[i] = Math.cos(
                    (Math.PI * i) / (bufferSize - 1) - Math.PI / 2
                );
            }
            break;
        case 'gauss':
            alpha = alpha || 0.25;
            for (i = 0; i < bufferSize; i++) {
                this.windowValues[i] = Math.pow(
                    Math.E,
                    -0.5 *
                        Math.pow(
                            (i - (bufferSize - 1) / 2) /
                                ((alpha * (bufferSize - 1)) / 2),
                            2
                        )
                );
            }
            break;
        case 'hamming':
            for (i = 0; i < bufferSize; i++) {
                this.windowValues[i] =
                    0.54 -
                    0.46 * Math.cos((Math.PI * 2 * i) / (bufferSize - 1));
            }
            break;
        case 'hann':
        case undefined:
            for (i = 0; i < bufferSize; i++) {
                this.windowValues[i] =
                    0.5 * (1 - Math.cos((Math.PI * 2 * i) / (bufferSize - 1)));
            }
            break;
        case 'lanczoz':
            for (i = 0; i < bufferSize; i++) {
                this.windowValues[i] =
                    Math.sin(Math.PI * ((2 * i) / (bufferSize - 1) - 1)) /
                    (Math.PI * ((2 * i) / (bufferSize - 1) - 1));
            }
            break;
        case 'rectangular':
            for (i = 0; i < bufferSize; i++) {
                this.windowValues[i] = 1;
            }
            break;
        case 'triangular':
            for (i = 0; i < bufferSize; i++) {
                this.windowValues[i] =
                    (2 / bufferSize) *
                    (bufferSize / 2 - Math.abs(i - (bufferSize - 1) / 2));
            }
            break;
        default:
            throw Error("No such window function '" + windowFunc + "'");
    }

    var limit = 1;
    var bit = bufferSize >> 1;
    var i;

    while (limit < bufferSize) {
        for (i = 0; i < limit; i++) {
            this.reverseTable[i + limit] = this.reverseTable[i] + bit;
        }

        limit = limit << 1;
        bit = bit >> 1;
    }

    for (i = 0; i < bufferSize; i++) {
        this.sinTable[i] = Math.sin(-Math.PI / i);
        this.cosTable[i] = Math.cos(-Math.PI / i);
    }

    this.calculateSpectrum = function(buffer) {
        // Locally scope variables for speed up
        var bufferSize = this.bufferSize,
            cosTable = this.cosTable,
            sinTable = this.sinTable,
            reverseTable = this.reverseTable,
            real = new Float32Array(bufferSize),
            imag = new Float32Array(bufferSize),
            bSi = 2 / this.bufferSize,
            sqrt = Math.sqrt,
            rval,
            ival,
            mag,
            spectrum = new Float32Array(bufferSize / 2);

        var k = Math.floor(Math.log(bufferSize) / Math.LN2);

        if (Math.pow(2, k) !== bufferSize) {
            throw 'Invalid buffer size, must be a power of 2.';
        }
        if (bufferSize !== buffer.length) {
            throw 'Supplied buffer is not the same size as defined FFT. FFT Size: ' +
                bufferSize +
                ' Buffer Size: ' +
                buffer.length;
        }

        var halfSize = 1,
            phaseShiftStepReal,
            phaseShiftStepImag,
            currentPhaseShiftReal,
            currentPhaseShiftImag,
            off,
            tr,
            ti,
            tmpReal;

        for (var i = 0; i < bufferSize; i++) {
            real[i] =
                buffer[reverseTable[i]] * this.windowValues[reverseTable[i]];
            imag[i] = 0;
        }

        while (halfSize < bufferSize) {
            phaseShiftStepReal = cosTable[halfSize];
            phaseShiftStepImag = sinTable[halfSize];

            currentPhaseShiftReal = 1;
            currentPhaseShiftImag = 0;

            for (var fftStep = 0; fftStep < halfSize; fftStep++) {
                var i = fftStep;

                while (i < bufferSize) {
                    off = i + halfSize;
                    tr =
                        currentPhaseShiftReal * real[off] -
                        currentPhaseShiftImag * imag[off];
                    ti =
                        currentPhaseShiftReal * imag[off] +
                        currentPhaseShiftImag * real[off];

                    real[off] = real[i] - tr;
                    imag[off] = imag[i] - ti;
                    real[i] += tr;
                    imag[i] += ti;

                    i += halfSize << 1;
                }

                tmpReal = currentPhaseShiftReal;
                currentPhaseShiftReal =
                    tmpReal * phaseShiftStepReal -
                    currentPhaseShiftImag * phaseShiftStepImag;
                currentPhaseShiftImag =
                    tmpReal * phaseShiftStepImag +
                    currentPhaseShiftImag * phaseShiftStepReal;
            }

            halfSize = halfSize << 1;
        }

        for (var i = 0, N = bufferSize / 2; i < N; i++) {
            rval = real[i];
            ival = imag[i];
            mag = bSi * sqrt(rval * rval + ival * ival);

            if (mag > this.peak) {
                this.peakBand = i;
                this.peak = mag;
            }
            spectrum[i] = mag;
        }
        return spectrum;
    };
};
/* eslint-enable complexity, no-redeclare, no-var, one-var */


/**
 * Experimental SpectrumMultiCanvas renderer for wavesurfer.
 *
 * A `SpectrumMultiCanvas` consists of one or more `CanvasEntry` instances, depending
 * on the zoom level.
 */
export default class SpectrumMultiCanvas extends MultiCanvas {
    /**
     * @param {HTMLElement} container The container node of the wavesurfer instance
     * @param {WavesurferParams} params The wavesurfer initialisation options
     */
    constructor(container, params) {
        super(container, params);
    
        if (params.colorMap) {
            if (params.colorMap.length < 256) {
                throw new Error('Colormap must contain 256 elements');
            }
            for (let i = 0; i < params.colorMap.length; i++) {
                const cmEntry = params.colorMap[i];
                if ((cmEntry.length !== 4) && (cmEntry.length !== 3)) {
                    throw new Error(
                        'ColorMap entries must contain 3 (rgb) or 4 (rgba) values'
                    );
                }
            }
            this.colorMap = params.colorMap;
        } else {
            this.colorMap = [];
            for (let i = 0; i < 256; i++) {
                const val = (255 - i) / 256;
                this.colorMap.push([val, val, val, 1]);
            }
        }

    if (params.avDataUrl) {
        this.avDataUrl = params.avDataUrl;
    }
    }

    /**
     * Initialize the drawer
     */
    init() {
    super.init();

    if (this.avDataUrl) {
        this.loadFrequenciesData(this.avDataUrl);
        } else {
        console.error("No Arousal+Valence (AV) Data URL provided");
        }
    }

    normaliseAVVals(vals)
    {
    var norm_vals = new Array(vals.length);

    var max_val = 0;
    for (var i=0; i<vals.length; i++) {
        var abs_val = Math.abs(vals[i]);
        if (abs_val > max_val) {
        max_val = abs_val;
        }
    }

    var scale_factor = (max_val < 0.8) ? 0.8 : max_val;
    
    for (var i=0; i<vals.length; i++) {
        var val = vals[i];
        var norm_val = scale_factor * val / max_val;
        norm_vals[i] = norm_val;
    }

    return norm_vals;
    }
    
    createAVProgressTimelineData(arousal_vals,valence_vals, my)
    {
    //console.log("**** createAVProgressTimelineData");
    var canvas_width = this.canvases[0].wave.width;
    //console.log("**** canvas width = " + canvas_width);

    //console.log("     arousal_val = " + JSON.stringify(arousal_vals));
    //console.log("this.arousal_val = " + JSON.stringify(this.arousal_vals));
    
    //this.arousal_vals = arousal_vals;
    //this.valence_vals = valence_vals;

    this.arousal_vals.unshift(0);
    this.valence_vals.unshift(0);

    this.norm_arousal_vals = this.normaliseAVVals(this.arousal_vals);
    this.norm_valence_vals = this.normaliseAVVals(this.valence_vals);

    const time_slice    = 6; // 6 secs
    const frame_overlap = 3; // 3 secs

    this.timeline_steps = new Array();
    this.timeline_steps.unshift(0);

    var num_vals = this.arousal_vals.length;
    var t = time_slice;
    var n = 1;

    while (n<num_vals) {
        this.timeline_steps[n] = t;
        t += frame_overlap;
        n++;
    }
    const total_duration = t;
    //console.log("***              n = " + n);
    //console.log("*** total duration = " + total_duration);
    
    this.timeline_steps[n] = total_duration;
    this.arousal_vals[n] = 0;
    this.valence_vals[n] = 0;
    this.norm_arousal_vals[n] = 0;
    this.norm_valence_vals[n] = 0;
    num_vals++;
    
    this.arousal_progress_timeline = new Array();
    this.valence_progress_timeline = new Array();

    this.norm_arousal_progress_timeline = new Array();
    this.norm_valence_progress_timeline = new Array();

    for (var i=1; i<num_vals; i++) {
        const start_t = this.timeline_steps[i-1];
        const end_t   = this.timeline_steps[i];
        const start_ts = Math.round((start_t / total_duration) * canvas_width);
        const end_ts   = Math.round((end_t   / total_duration) * canvas_width);
          
        const start_arousal = this.arousal_vals[i-1];
        const start_valence = this.valence_vals[i-1];
        const end_arousal = this.arousal_vals[i];
        const end_valence = this.valence_vals[i];

        const norm_start_arousal = this.norm_arousal_vals[i-1];
        const norm_start_valence = this.norm_valence_vals[i-1];
        const norm_end_arousal = this.norm_arousal_vals[i];
        const norm_end_valence = this.norm_valence_vals[i];

        const ts_diff = end_ts - start_ts;
        const arousal_diff = end_arousal - start_arousal;
        const valence_diff = end_valence - start_valence;
        const norm_arousal_diff = norm_end_arousal - norm_start_arousal;
        const norm_valence_diff = norm_end_valence - norm_start_valence;

        var local_ts = 0;
        //console.log("*** start_ts = " + start_ts +  ", end_ts = " + end_ts + " (ts_diff = " + ts_diff +")");
        //console.log("*** start_arousal = " + start_arousal +  ", end_arousal = " + end_arousal);
        //console.log("*** norm_start_arousal = " + norm_start_arousal +  ", norm_end_arousal = " + norm_end_arousal);
        
        for (var ts=start_ts; ts<end_ts; ts++) {
        var local_proportion = local_ts / ts_diff;
        var interpolated_arousal = start_arousal + (local_proportion * arousal_diff);
        var interpolated_valence = start_valence + (local_proportion * valence_diff);
        var norm_interpolated_arousal = norm_start_arousal + (local_proportion * norm_arousal_diff);
        var norm_interpolated_valence = norm_start_valence + (local_proportion * norm_valence_diff);

        this.arousal_progress_timeline[ts] = interpolated_arousal;
        this.valence_progress_timeline[ts] = interpolated_valence;

        this.norm_arousal_progress_timeline[ts] = norm_interpolated_arousal;
        this.norm_valence_progress_timeline[ts] = norm_interpolated_valence;

        local_ts++;
        }
    }

    //console.log(this);
    console.log("Generated interpolated AV progress timeline");
    }

    loadFrequenciesData(url) {
    //var that = this; 

        const request = this.wavesurfer.util.fetchFile({ url: url });
    
        request.on('success', data => {
        console.log("loadFrequenceisData: Retrieved AV URL data");
        console.log(data);
        //console.log("*** this = ");
        //console.log(this);
        //console.log("*** that = ");
        //console.log(that);
        //this.arousal_vals = data.arousal.slice(); // **** slice() does array copy
        //this.valence_vals = data.valence.slice(); // **** slice() does array copy

        // The following two lines use map() to both:
        //   convert the JSON string vals to numbers
        //   generate a fresh array of values (rather than a shared ref) which is what we want      
        this.arousal_vals = data.arousal.map((v) => Number(v)); 
        this.valence_vals = data.valence.map((v) => Number(v));     
        
        //this.createAVProgressTimelineData(arousal_vals, valence_vals, this); // **** need to pass in 'this' ??
    });
    
        request.on('error', e => this.fireEvent('error', e));

        return request;
    }

    /**
     * Update cursor style
     */
    
    updateCursor() {
    if (this.params.renderWave == 1) {
        super.updateCursor();
    }
    else {
            this.style(this.progressWave, {
        //borderRightWidth: this.params.cursorSpectrumWidth + 'px',
        //borderRightColor: this.params.cursorSpectrumColor
        borderRightWidth: '4px',
        borderRightColor: 'rgba(255,255,255,0.3)'
            });
    }
    }
    
    

    drawPeaks(peaks, length, start, end) {
    if (this.params.renderWave == 1) {
        super.drawPeaks(peaks,length,start,end);
        if ($( "#av-display" ).length) {
        $( "#av-display" ).show();
        }
        //this.createAVProgressTimelineData(this.arousal_vals, this.valence_vals, this); // **** need to pass in 'this' ??
    }
    else {   
            if (!this.setWidth(length)) {
        this.clearWave();
            }
        
        this.getFrequencies(this.drawSpectrogram);
    }
    }

    resample(oldMatrix) {
        const columnsNumber = this.width;
        const newMatrix = [];

        const oldPiece = 1 / oldMatrix.length;
        const newPiece = 1 / columnsNumber;
        let i;

        for (i = 0; i < columnsNumber; i++) {
            const column = new Array(oldMatrix[0].length);
            let j;

            for (j = 0; j < oldMatrix.length; j++) {
                const oldStart = j * oldPiece;
                const oldEnd = oldStart + oldPiece;
                const newStart = i * newPiece;
                const newEnd = newStart + newPiece;

                const overlap =
                    oldEnd <= newStart || newEnd <= oldStart
                        ? 0
                        : Math.min(
                            Math.max(oldEnd, newStart),
                            Math.max(newEnd, oldStart)
                        ) -
                        Math.max(
                            Math.min(oldEnd, newStart),
                            Math.min(newEnd, oldStart)
                        );
                let k;
                /* eslint-disable max-depth */
                if (overlap > 0) {
                    for (k = 0; k < oldMatrix[0].length; k++) {
                        if (column[k] == null) {
                            column[k] = 0;
                        }
                        column[k] += (overlap / newPiece) * oldMatrix[j][k];
                    }
                }
                /* eslint-enable max-depth */
            }

            const intColumn = new Uint8Array(oldMatrix[0].length);
            let m;

            for (m = 0; m < oldMatrix[0].length; m++) {
                intColumn[m] = column[m];
            }

            newMatrix.push(intColumn);
        }

        return newMatrix;
    }

    drawSpectrogram(frequenciesData, my) {
    console.log("*** spectrummultican as::drawSpectrum() spec ....spec.length = " + frequenciesData.length)
    console.log(frequenciesData);
        //const spectrCc = my.spectrCc;
        //const length = my.wavesurfer.backend.getDuration();
        //const height = my.height;
        //const pixels = my.resample(frequenciesData);
        //const heightFactor = my.buffer ? 2 / my.buffer.numberOfChannels : 1;

    const canvas = my.canvases[0].wave;
    const spectrCc = canvas.getContext('2d');
        const length = my.wavesurfer.backend.getDuration();
        const height = canvas.height;
        const pixels = my.resample(frequenciesData);
        const heightFactor = my.buffer ? 2 / my.buffer.numberOfChannels : 1;

    // now double it!
        const scaledHeightFactor = heightFactor * 2;
    

    let i;
        let j;

        for (i = 0; i < pixels.length; i++) {
            for (j = 0; j < pixels[i].length; j++) {
                const colorMap = my.colorMap[pixels[i][j]]; // ****
        if (colorMap.length == 4) {
            //my.spectrCc.fillStyle =
            spectrCc.fillStyle =
            'rgba(' +
            colorMap[0] * 256 +
            ', ' +
            colorMap[1] * 256 +
            ', ' +
            colorMap[2] * 256 +
            ',' +
            colorMap[3] +
            ')';
        }
        else {
            //my.spectrCc.fillStyle =
            spectrCc.fillStyle =
            'rgb(' +
            colorMap[0] * 256 +
            ', ' +
            colorMap[1] * 256 +
            ', ' +
            colorMap[2] * 256 +
            ')';
        }

                //my.spectrCc.fillRect(
                spectrCc.fillRect(
                    i,
                    height - j * scaledHeightFactor,
                    1,
                    scaledHeightFactor
                );
            }
        }

    my.createAVProgressTimelineData(my.arousal_vals, my.valence_vals, my); // **** need to pass in 'this' ??
    }

    getFrequencies(callback) {
        const fftSamples = this.fftSamples || 512;
        const buffer = (this.buffer = this.wavesurfer.backend.buffer);
    if (buffer == null) return; // **** GS3 edit
        const channelOne = buffer.getChannelData(0);
        const bufferLength = buffer.length;
        const sampleRate = buffer.sampleRate;
        const frequencies = [];

        if (!buffer) {
            this.fireEvent('error', 'Web Audio buffer is not available');
            return;
        }

        let noverlap = this.noverlap;
        if (!noverlap) {
            const uniqueSamplesPerPx = buffer.length / this.canvases[0].wave.width; // **** GS3 edit
            noverlap = Math.max(0, Math.round(fftSamples - uniqueSamplesPerPx));
        }

        const fft = new FFT(
            fftSamples,
            sampleRate,
            this.windowFunc,
            this.alpha
        );
        const maxSlicesCount = Math.floor(
            bufferLength / (fftSamples - noverlap)
        );
        let currentOffset = 0;

        while (currentOffset + fftSamples < channelOne.length) {
            const segment = channelOne.slice(
                currentOffset,
                currentOffset + fftSamples
            );
            const spectrum = fft.calculateSpectrum(segment);
            const array = new Uint8Array(fftSamples / 2);
            let j;
            for (j = 0; j < fftSamples / 2; j++) {
                array[j] = Math.max(-255, Math.log10(spectrum[j]) * 45);
            }
            frequencies.push(array);
            currentOffset += fftSamples - noverlap;
        }
        callback(frequencies, this);
    }

    
    /**
     * Draw a rectangle on the multi-canvas
     *
     * @param {number} x X-position of the rectangle
     * @param {number} y Y-position of the rectangle
     * @param {number} width Width of the rectangle
     * @param {number} height Height of the rectangle
     * @param {number} radius Radius of the rectangle
     */
    /*
    fillRect(x, y, width, height, radius) {
        const startCanvas = Math.floor(x / this.maxCanvasWidth);
        const endCanvas = Math.min(
            Math.ceil((x + width) / this.maxCanvasWidth) + 1,
            this.canvases.length
        );
        let i = startCanvas;
        for (i; i < endCanvas; i++) {
            const entry = this.canvases[i];
            const leftOffset = i * this.maxCanvasWidth;

            const intersection = {
                x1: Math.max(x, i * this.maxCanvasWidth),
                y1: y,
                x2: Math.min(
                    x + width,
                    i * this.maxCanvasWidth + entry.wave.width
                ),
                y2: y + height
            };

            if (intersection.x1 < intersection.x2) {
                this.setFillStyles(entry);

                entry.fillRects(
                    intersection.x1 - leftOffset,
                    intersection.y1,
                    intersection.x2 - intersection.x1,
                    intersection.y2 - intersection.y1,
                    radius
                );
            }
        }
    }
    */
    
    
    /**
     * Render the new progress
     *
     * @param {number} position X-offset of progress position in pixels
     */
    /*
    updateProgress(position) {
        this.style(this.progressWave, { width: position + 'px' });
    }
    */

    /**
     * Render the new progress
     *
     * @param {number} position X-offset of progress position in pixels
     */
    updateProgress(position) {

    if (!this.arousal_progress_timeline) {
        this.createAVProgressTimelineData(this.arousal_vals, this.valence_vals, this); // **** need to pass in 'this' ??
    }
    
    if (this.params.renderWave == 1) {
        super.updateProgress(position);
    }
    else {
        
        var canvas_width = this.canvases[0].wave.width;
        // ****
        //console.log("position = " + position + "/" + canvas_width);
        //console.log(this);

        var norm_arousal_val = this.norm_arousal_progress_timeline[position];
        var norm_valence_val = this.norm_valence_progress_timeline[position];

        // ****
        //console.log("position = " + position + ", arousal = " + arousal_val + ", valence = " + valence_val);
        
        // shift [-1,1] scale
        /*
        var css_norm_valence_alpha = 0.5 + (norm_arousal_val + 1.0)/4.0;
        var css_norm_arousal_width = (norm_valence_val + 1.0) * 20;
        
            this.style(this.progressWave, {
        borderRightWidth: css_norm_arousal_width+'px',
        borderRightColor: 'rgba(255,255,255,'+css_norm_valence_alpha+')'
            });
*/

        
        var css_norm_arousal_alpha = 0.5 + (norm_arousal_val + 1.0)/4.0;
        var css_norm_valence_width = (norm_valence_val + 1.0) * 20;
        
            this.style(this.progressWave, {
        borderRightWidth: css_norm_valence_width+'px',
        borderRightColor: 'rgba(255,255,255,'+css_norm_arousal_alpha+')'
            });
        
        super.updateProgress(position);
    }

    var arousal_val = this.arousal_progress_timeline[position];
    var valence_val = this.valence_progress_timeline[position];

    var arousal_val_3dp = Math.round(arousal_val*1000)/1000;
    var valence_val_3dp = Math.round(valence_val*1000)/1000;

    if (arousal_val_3dp >= 0) {
        arousal_val_3dp = "&nbsp;" + arousal_val_3dp;
    }

    if (valence_val_3dp >= 0) {
        valence_val_3dp = "&nbsp;" + valence_val_3dp;
    }

    if ($('#arousal-val').length) {
        $('#arousal-val').html(arousal_val_3dp);
    }
    if ($('#valence-val').length) {
        $('#valence-val').html(valence_val_3dp);
    }
    
    }

}