source: gs3-extensions/web-audio/trunk/js-dsp/frequency-player.js@ 28548

var _dspdebug = 0;

var chromaTransform;
var frequencyPlotter;

var concatLimit;
var concatCount;
var concatSignal;

var jsMadProcessing = null;

function freqPlayerLoadedAudioMetadata() {
    console.log("started freqPlayerLoadedAudioMetadata()");

    var audio = document.getElementById('rta-audio-element');
    var channels;
    var samplerate;
    var frameBufferLength;
    var duration;
    
    if (webAudioContext != null) {

    var webAudioSource = webAudioContext.createMediaElementSource(audio);

    var webAudioJSProcessor = webAudioContext.createJavaScriptNode(1024,2,2);
    webAudioJSProcessor.onaudioprocess = freqPlayerAudioAvailable;  
    
    // Connect the processing graph: source -> jsProcessor -> analyser -> destination
    webAudioSource.connect(webAudioJSProcessor);
    webAudioJSProcessor.connect(webAudioContext.destination);

    // For now, fake audio values for browsers such as Chrome, so later code works
    channels = 2;
    samplerate = 44100;
    frameBufferLength = 2048; 
    duration          = audio.duration;    
    } else if (typeof audio.mozChannels !== "undefined") {
    // Firefox audio API
    channels          = audio.mozChannels;
    samplerate        = audio.mozSampleRate;
    frameBufferLength = audio.mozFrameBufferLength;
    duration          = audio.duration;    

    } else {
    throw new Error('AudioContext not supported.');
    }

    var numSamples = frameBufferLength/channels;
    
    var info_mess = "frequency-player: { ";
    info_mess += "num channels: " + channels;
    info_mess += ", sample rate: " + samplerate;
    info_mess += ", frame buffer length: " + frameBufferLength;
    info_mess += ", num samples per frame: " + numSamples;
    info_mess += ", duration: " + duration + "(secs)";
    info_mess += " }";
    console.info(info_mess);

    concatLimit = 8;
    concatCount = 0;
    concatSignal = new Float32Array(concatLimit * numSamples); // mono

    var totalNumSamples = duration * samplerate;
    var totalNumFrames = Math.floor(totalNumSamples / (numSamples*concatLimit));

    var frame_mess = "processed frames: { ";
    frame_mess += "concatLimit: " + concatLimit;
    frame_mess += ", total num frames = " + totalNumFrames;
    frame_mess += " }";
    console.info(frame_mess);

    var canvas = document.getElementById('freq-plot');
    var label_canvas = document.getElementById('freq-plot-labels');

    var transformMode = $('input:radio[name=visualization]:checked').val();
    var colorMappingMode = $('input:radio[name=colorMapping]:checked').val();

    // ****
    //chromaTransform = new ChromaTransform(transformMode, frameBufferLength*concatLimit, channels,samplerate,totalNumFrames);
    activeWorkflow = new ActiveWorkflow(transformMode, frameBufferLength, concatLimit, 
                    channels,samplerate,totalNumFrames);

    jsMadProcessing = new JsMadProcessing("mysong",activeWorkflow);

    chromaTransform = activeWorkflow.chromaCpt;

    frequencyPlotter = new FrequencyPlotter(audio,canvas,label_canvas,activeWorkflow,colorMappingMode,totalNumFrames);

    //console.log("finished loadedMetadata()");
}

var audioMode = "stopped";
var needsRefresh = true;

function setTransformMode(elem) 
{
    var transformMode = $(elem).val();

    frequencyPlotter.setTransformMode(transformMode); // set mode + display labels for plot
}

function setColorMappingMode(elem) 
{
    var mappingMode = $(elem).val();

    frequencyPlotter.setColorMappingMode(mappingMode); 
}

function completedSelfSimilarityMatrixComputation(fracAvailable) 
{

    var $progressElem = $('#processing');
    var displayProgress = ($progressElem.length>0) ? true : false;

    if (displayProgress) {
    $progressElem.css('display','none');
    }

    var audio = document.getElementById('rta-audio-element');
    var duration = audio.duration;
    var currentTime = audio.currentTime;

    //frequencyPlotter.plotSelfSimilarityMatrix(chromaTransform.csm,currentTime/duration);

    frequencyPlotter.plotSelfSimilarityMatrix(chromaTransform.csm,fracAvailable);
}

function monitorSelfSimilarityMatrixComputation(fracAvailable)
{
    
    var $progressElem = $('#processing');
    var $progressTextElem = $('#processingText');

    var displayProgress = ($progressElem.length>0) ? true : false;

    var progress = chromaTransform.progress;

    if (progress < 100) {
    if (displayProgress) {
        $progressTextElem.html("Processing: " + progress + "%");
    }
    setTimeout(function(){monitorSelfSimilarityMatrixComputation(fracAvailable)},200);
    }
    else {
    completedSelfSimilarityMatrixComputation(fracAvailable);
    }
    
}

function plotSimilarityMatrix()
{

    if (frequencyPlotter.hasStoredSelfSimilarityMatrix()) {
    console.log("Using stored self-similarity matrix image");
    frequencyPlotter.plotStoredSelfSimilarityMatrix();
    return;
    }

    var $progressElem = $('#processing');
    var displayProgress = ($progressElem.length>0) ? true : false;
    if (displayProgress) {
    $progressElem.css('display','block');
    var $progressTitleElem = $('#processingTitle');
    $progressTitleElem.html("Computing Chromagram Self-similarity Matrix");
    }
    
    var jsMadProcessedLen = jsMadProcessing.playBufferStore.length/concatLimit;
    var totalNumFrames = frequencyPlotter.totalNumFrames;

    //console.log("*** playBufferStore len = " + jsMadProcessedLen);
    //console.log("*** total num frames = " + frequencyPlotter.totalNumFrames);

    var fracAvailable = Math.min(jsMadProcessedLen/totalNumFrames,1.0);

    var cfs = chromaTransform.getChromaFeaturesSequence();
    chromaTransform.computeSelfSimilarityMatrix(cfs); // starts the progress calculation, but need to be monitored until finished

    monitorSelfSimilarityMatrixComputation(fracAvailable);

}

function plotSimilarityMatrixWhenPaused(elem)
{
    // toglePlayMode reflects what graphic the button is showing => displaying "play" means it is paused (or hasn't been played yet)
    //if (togglePlayMode.match("play")) {
    
    // the following could be done by more directly studying 'elem'
    var showSimilarityMatrix = $('input:checkbox[name=similarityMatrix]').prop("checked");
    if (showSimilarityMatrix) {
        plotSimilarityMatrix();
    }
    else {
        frequencyPlotter.replotVisual();
    }
    //}
}


function acceleratedProcessingCheckbox(elem)
{
    // the following could be done by more directly studying 'elem'
    var speedup = $('input:checkbox[name=acceleratedProcessingInput]').prop("checked");
    if (speedup) {
    console.log("frequency-player: set JsMad Processing to be faster than realtime");
    jsMadProcessing.setSpeedupParams(100,0); // e.g. if Firefox
    }
    else {
    console.log("frequency-player: set JsMad Processing process in batches of 10, with a 1 sec delay");
    jsMadProcessing.setSpeedupParams(10,1000); 
    }
}


function plotFrequencySpectrum(fbSpectrum) 
{
    var fft = chromaTransform.fft;

    var canvas = document.getElementById('freq-plot');
    var ctx = canvas.getContext('2d');

    // Clear the canvas before drawing spectrum
    ctx.clearRect(0,0, canvas.width, canvas.height);
    
    for (var i = 0; i < fft.spectrum.length; i++ ) {
        // multiply spectrum by a zoom value
        magnitude = fft.spectrum[i] * 4000;
    
        // Draw rectangle bars for each frequency bin
        ctx.fillRect(i * 4, canvas.height, 3, -magnitude);
    }
}


var _fp_first_aa = true;


function freqPlayerAudioAvailable(event) {
    //console.log("audioAvailable");

    if (togglePlayMode.match("pause")) { // (counter-intuitively) means it is playing
    if (playTrackerMode.match("playing")) {
        // means it is in dualPlay() mode
        return; // don't want the RTA audio playing while dual-playing is doing its panning thing
    }
    }


    if (typeof selectedMeandreWorkflow !== "undefined") {
    // Have a meandre workflow embedded in the page
    if (selectedMeandreWorkflow.meandreDataOutput.length>0) {
        // play some processed data

        //var rta_audio = document.getElementById('rta-audio-element');
        
        console.log("*** freqPlayerAudioAvailable, Meandre workflow setting 'mysong' volume to 0");

        soundManager.setVolume("mysong",0);
        pannedPlayback.volume = 1.0;
        
        var frame = selectedMeandreWorkflow.meandreDataOutput[0];
        //console.log("*** meanderDataOutput len = " + selectedMeandreWorkflow.meandreDataOutput.length
        //      + ", frame size of head = " + frame.length);
        

        if (webAudioContext!=null) {
        // Working with Web audio
        console.log("*** processing meandre output as Web audio");
        
        var inputLen = frame.length;

        var outputArrayL = event.outputBuffer.getChannelData(0);
        var outputArrayR = event.outputBuffer.getChannelData(1);

        if (audio.paused) {
            // not processing/playing any new audio 
            
            for (var i=0; i<stereo_frame.length; i+=2) {            
            outputArrayL[i] = stereo_frame;
            }
            for (var i=0; i<outputArrayR.length; i++) {
            outputArrayR[i] = 0;
            }
            return;
        }

        // And again the fake values to keep the rest of the code happy
        // **** Are these actually used in this block??
        channels = 2;
        frameBufferLength = channels * inputLen;
        samplerate = 44100;

        // play the result
        for (var i=0; i<outputArrayL.length; i++) {
            outputArrayL[i] = frame[i];
        }
        for (var i=0; i<outputArrayR.length; i++) {
            outputArrayR[i] = frame[i];
        }

        //written = frame.length;

        if (togglePlayMode == "play") {
            // displaying play button (which counter-intuatively means it must be paused)
            return;
        }
        
        //console.log("***### popping head of meandreDataOutput queue");
        selectedMeandreWorkflow.meandreDataOutput.shift();
        }

        else {
        
        var stereo_frame = new Float32Array(frame.length*2);
        for (var i=0; i<frame.length; i++) {
            stereo_frame[2*i] = frame[i];
            stereo_frame[2*i+1] = frame[i];
        }


        // Start playing the audio data returned from the Meandre workflow
        var written = pannedPlayback.mozWriteAudio(stereo_frame);
        
        if (written == 0) {
            // audio has backed up => give it a chance to clear
            return;
        }

        if (togglePlayMode == "play") {
            // displaying play button (which counter-intuatively means it must be paused)
            return;
        }
        
        if (written != stereo_frame.length) {
            //console.log("*** frame size was " + frame.length + " but only wrote out " + written);
            //selectedMeandreWorkflow.meandreDataOutput[0] = frame.subarray(written);
            
            selectedMeandreWorkflow.meandreDataOutput[0] = frame.subarray(written/2);
        }
        else {
            //console.log("***### popping head of meandreDataOutput queue");
            selectedMeandreWorkflow.meandreDataOutput.shift();
        }

        }
        
        return; // Data output from Meandre workflow has been player => Prevent any subsequent audio from being played
    }

    }



    var audio = document.getElementById('rta-audio-element');

    var channels;         
    var samplerate;       
    var frameBufferLength;

    var fb = null;

    if (webAudioContext!=null) {
    // Working with Web audio

    var inputArrayL = event.inputBuffer.getChannelData(0);
    var inputArrayR = event.inputBuffer.getChannelData(1);
    
    var inputLen = inputArrayL.length;

    var outputArrayL = event.outputBuffer.getChannelData(0);
    var outputArrayR = event.outputBuffer.getChannelData(1);


    //soundManager.setVolume("mysong",0);
    //pannedPlayback.volume = 1.0;

    //outputArrayL.set(inputArrayL);
    //outputArrayR.set(inputArrayR);

    if (audio.paused) {
        // not processing/playing any new audio 

        for (var i=0; i<outputArrayL.length; i++) {
        outputArrayL[i] = 0;
        }
        for (var i=0; i<outputArrayR.length; i++) {
        outputArrayR[i] = 0;
        }
        return;
    }

    fb = new Float32Array(2*inputLen);

    for (var i=0; i<inputLen; i++) {
        fb[2*i] = inputArrayL[i];
        fb[(2*i)+1] = inputArrayR[i];

        //outputArrayL[i] = inputArrayL[i];
        //outputArrayR[i] = inputArrayR[i];
    }

    // And again the fake values to keep the rest of the code happy
    channels = 2;
    frameBufferLength = channels * inputLen;
    samplerate = 44100;

    if (_fp_first_aa) {
        console.log("*** !!!!! freqPlayerAudioAvailable, web audio context setting 'mysong' volume to 0");
        soundManager.setVolume("mysong",0.0);
        _fp_first_aa = false;
    }

    // Apply Graphics Equalizer, and then play the result

    if ((typeof grapheqL !== "undefined") && (typeof grapheqR !== "undefined")) {
        outputArrayL.set(grapheqL.process(inputArrayL));
        outputArrayR.set(grapheqR.process(inputArrayR));
    }
    else {
        outputArrayL.set(inputArrayL);
        outputArrayR.set(inputArrayR);
    }

    }
    else {
    // Working with Firefox Audio API
    channels          = audio.mozChannels;    
    samplerate        = audio.mozSampleRate;
    frameBufferLength = audio.mozFrameBufferLength;
    
    fb = event.frameBuffer;

    // Apply Graphics Equalizer, and then play the result


    if (channels==2) {
        var mono_len = fb.length/2;
        var leftSignal = new Float32Array(mono_len);
        var rightSignal = new Float32Array(mono_len);

        for (var i=0; i<mono_len; i++) {
        leftSignal[i] = fb[2*i];
        rightSignal[i] = fb[(2*i)+1];
        }

        if ((typeof grapheqL !== "undefined") && (typeof grapheqR !== "undefined")) {
        leftSignal = grapheqL.process(leftSignal);
        rightSignal = grapheqR.process(rightSignal);
        }

        for (var i=0; i<mono_len; i++) {
        fb[2*i] = leftSignal[i];
        fb[(2*i)+1] = rightSignal[i];
        }
    }
    else {
        // mono input, but presumable stero out

        // untested code // *****

        var fbLeft;
        var fbRight;        

        if ((typeof grapheqL !== "undefined") && (typeof grapheqR !== "undefined")) {
        fbLeft  = grapheqL.process(fb);     
        fbRight = grapheqR.process(fb);
        }
        else {
        fbLeft  = new Float32Array(mono_len);
        fbRight = new Float32Array(mono_len);
        for (var i=0; i<mono_len; i++) {
            fbLeft[i]  = fb[i];
            fbRight[i] = fb[i];
        }
        }

        var mono_len = fb.length;
        fb = new Float32Array(mono_len * 2);

        for (var i=0; i<mono_len; i++) {
        fb[2*i] = fbLeft[i];
        fb[(2*i)+1] = fbRight[i];
        }
    }


    if (_fp_first_aa) {
        console.log("*** freqPlayerAudioAvailable, Firefox audio API setting 'mysong' volume to 0");
        soundManager.setVolume("mysong",0.0);
        _fp_first_aa = false;
    }


    var written = pannedPlayback.mozWriteAudio(fb); // could equally make it baseSong ??
    if (written != fb.length) {
        console.warn("Did not write out as many samples for output as were in the input");
        console.warn("input size = " + fb.length + ", output size = " + written);
    }


    }

    var numSamples = fb.length/channels;

    if (fb.length != frameBufferLength) {
    console.error("fb length = " + fb.length);
    console.error("frame buffer length = " + frameBufferLength);
    console.error("Expected these values to be the same");
    }


    concatCount++;

    if (concatCount==concatLimit) {

    frequencyPlotter.plotVisualLine(needsRefresh,audio.currentTime);

    needsRefresh = false;

    concatCount=0;
    }

    // Uncomment the following line to have the audio data being decoded by
    // the 'rta-audio-element' audio element pushed in to the Javascript DSP workflow
    //
    // *** Note: The following has been superceeded by the combination of
    // JsMad and embeeded Meandre as a way of processing audio, which can operate
    // at faster then realtime
    // The related Meandre block of code is at the start of this method
    
    //activeWorkflow.pumpDataHead("rawInput",fb);
    
}