Changeset 28548


Ignore:
Timestamp:
10/29/13 13:27:04 (7 years ago)
Author:
davidb
Message:

Changes after developing the demo for the SMAM-2013 keynote talk

Location:
gs3-extensions/web-audio/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • gs3-extensions/web-audio/trunk/diy-audio-player/script/similarity-matrix-play.js

    r28388 r28548  
    279279
    280280    //var selfSimImgSrc="sites/localsite/collect/" + collect +"/bordered/line-interlaced/"+self_sim_png;
    281     var selfSimImgSrc="sites/localsite/collect/" + collect +"/images/blank-775x816.png";
     281    var selfSimImgSrc="sites/" + site + "/collect/" + collect +"/images/blank-775x816.png";
    282282    //console.log("self sim img = " + selfSimImgSrc);
    283283
  • gs3-extensions/web-audio/trunk/js-dsp/frequency-player.js

    r28401 r28548  
    151151function plotSimilarityMatrix()
    152152{
     153
     154    if (frequencyPlotter.hasStoredSelfSimilarityMatrix()) {
     155    console.log("Using stored self-similarity matrix image");
     156    frequencyPlotter.plotStoredSelfSimilarityMatrix();
     157    return;
     158    }
     159
    153160    var $progressElem = $('#processing');
    154161    var displayProgress = ($progressElem.length>0) ? true : false;
     
    190197}
    191198
     199
     200function acceleratedProcessingCheckbox(elem)
     201{
     202    // the following could be done by more directly studying 'elem'
     203    var speedup = $('input:checkbox[name=acceleratedProcessingInput]').prop("checked");
     204    if (speedup) {
     205    console.log("frequency-player: set JsMad Processing to be faster than realtime");
     206    jsMadProcessing.setSpeedupParams(100,0); // e.g. if Firefox
     207    }
     208    else {
     209    console.log("frequency-player: set JsMad Processing process in batches of 10, with a 1 sec delay");
     210    jsMadProcessing.setSpeedupParams(10,1000);
     211    }
     212}
     213
     214
    192215function plotFrequencySpectrum(fbSpectrum)
    193216{
     
    223246    }
    224247
     248
     249    if (typeof selectedMeandreWorkflow !== "undefined") {
     250    // Have a meandre workflow embedded in the page
     251    if (selectedMeandreWorkflow.meandreDataOutput.length>0) {
     252        // play some processed data
     253
     254        //var rta_audio = document.getElementById('rta-audio-element');
     255       
     256        console.log("*** freqPlayerAudioAvailable, Meandre workflow setting 'mysong' volume to 0");
     257
     258        soundManager.setVolume("mysong",0);
     259        pannedPlayback.volume = 1.0;
     260       
     261        var frame = selectedMeandreWorkflow.meandreDataOutput[0];
     262        //console.log("*** meanderDataOutput len = " + selectedMeandreWorkflow.meandreDataOutput.length
     263        //      + ", frame size of head = " + frame.length);
     264       
     265
     266        if (webAudioContext!=null) {
     267        // Working with Web audio
     268        console.log("*** processing meandre output as Web audio");
     269       
     270        var inputLen = frame.length;
     271
     272        var outputArrayL = event.outputBuffer.getChannelData(0);
     273        var outputArrayR = event.outputBuffer.getChannelData(1);
     274
     275        if (audio.paused) {
     276            // not processing/playing any new audio
     277           
     278            for (var i=0; i<stereo_frame.length; i+=2) {           
     279            outputArrayL[i] = stereo_frame;
     280            }
     281            for (var i=0; i<outputArrayR.length; i++) {
     282            outputArrayR[i] = 0;
     283            }
     284            return;
     285        }
     286
     287        // And again the fake values to keep the rest of the code happy
     288        // **** Are these actually used in this block??
     289        channels = 2;
     290        frameBufferLength = channels * inputLen;
     291        samplerate = 44100;
     292
     293        // play the result
     294        for (var i=0; i<outputArrayL.length; i++) {
     295            outputArrayL[i] = frame[i];
     296        }
     297        for (var i=0; i<outputArrayR.length; i++) {
     298            outputArrayR[i] = frame[i];
     299        }
     300
     301        //written = frame.length;
     302
     303        if (togglePlayMode == "play") {
     304            // displaying play button (which counter-intuatively means it must be paused)
     305            return;
     306        }
     307       
     308        //console.log("***### popping head of meandreDataOutput queue");
     309        selectedMeandreWorkflow.meandreDataOutput.shift();
     310        }
     311
     312        else {
     313       
     314        var stereo_frame = new Float32Array(frame.length*2);
     315        for (var i=0; i<frame.length; i++) {
     316            stereo_frame[2*i] = frame[i];
     317            stereo_frame[2*i+1] = frame[i];
     318        }
     319
     320
     321        // Start playing the audio data returned from the Meandre workflow
     322        var written = pannedPlayback.mozWriteAudio(stereo_frame);
     323       
     324        if (written == 0) {
     325            // audio has backed up => give it a chance to clear
     326            return;
     327        }
     328
     329        if (togglePlayMode == "play") {
     330            // displaying play button (which counter-intuatively means it must be paused)
     331            return;
     332        }
     333       
     334        if (written != stereo_frame.length) {
     335            //console.log("*** frame size was " + frame.length + " but only wrote out " + written);
     336            //selectedMeandreWorkflow.meandreDataOutput[0] = frame.subarray(written);
     337           
     338            selectedMeandreWorkflow.meandreDataOutput[0] = frame.subarray(written/2);
     339        }
     340        else {
     341            //console.log("***### popping head of meandreDataOutput queue");
     342            selectedMeandreWorkflow.meandreDataOutput.shift();
     343        }
     344
     345        }
     346       
     347        return; // Data output from Meandre workflow has been player => Prevent any subsequent audio from being played
     348    }
     349
     350    }
     351
     352
     353
    225354    var audio = document.getElementById('rta-audio-element');
    226355
     
    276405    samplerate = 44100;
    277406
    278     // Apply Graphics Equalizer, and then play the result
    279407    if (_fp_first_aa) {
    280408        console.log("*** !!!!! freqPlayerAudioAvailable, web audio context setting 'mysong' volume to 0");
     
    283411    }
    284412
    285     outputArrayL.set(grapheqL.process(inputArrayL));
    286     outputArrayR.set(grapheqR.process(inputArrayR));
     413    // Apply Graphics Equalizer, and then play the result
     414
     415    if ((typeof grapheqL !== "undefined") && (typeof grapheqR !== "undefined")) {
     416        outputArrayL.set(grapheqL.process(inputArrayL));
     417        outputArrayR.set(grapheqR.process(inputArrayR));
     418    }
     419    else {
     420        outputArrayL.set(inputArrayL);
     421        outputArrayR.set(inputArrayR);
     422    }
     423
    287424    }
    288425    else {
     
    294431    fb = event.frameBuffer;
    295432
     433    // Apply Graphics Equalizer, and then play the result
     434
     435
    296436    if (channels==2) {
    297437        var mono_len = fb.length/2;
     
    344484    }
    345485
    346     // Apply Graphics Equalizer, and then play the result
    347486
    348487    if (_fp_first_aa) {
     
    352491    }
    353492
     493
    354494    var written = pannedPlayback.mozWriteAudio(fb); // could equally make it baseSong ??
    355495    if (written != fb.length) {
     
    357497        console.warn("input size = " + fb.length + ", output size = " + written);
    358498    }
     499
     500
    359501    }
    360502
     
    381523    // Uncomment the following line to have the audio data being decoded by
    382524    // the 'rta-audio-element' audio element pushed in to the Javascript DSP workflow
     525    //
     526    // *** Note: The following has been superceeded by the combination of
     527    // JsMad and embeeded Meandre as a way of processing audio, which can operate
     528    // at faster then realtime
     529    // The related Meandre block of code is at the start of this method
     530   
    383531    //activeWorkflow.pumpDataHead("rawInput",fb);
    384 
    385     if (typeof selectedMeandreWorkflow !== "undefined") {
    386     // Have a meandre workflow embedded in the page
    387     if (selectedMeandreWorkflow.meandreDataOutput.length>0) {
    388         // play some processed data
    389 
    390         //var rta_audio = document.getElementById('rta-audio-element');
    391        
    392         console.log("*** freqPlayerAudioAvailable, Meandre workflow setting 'mysong' volume to 0");
    393 
    394         soundManager.setVolume("mysong",0);
    395         pannedPlayback.volume = 1.0;
    396        
    397         var frame = selectedMeandreWorkflow.meandreDataOutput[0];
    398         //console.log("*** meanderDataOutput len = " + selectedMeandreWorkflow.meandreDataOutput.length
    399         //      + ", frame size of head = " + frame.length);
    400 
    401         var stereo_frame = new Float32Array(frame.length*2);
    402         for (var i=0; i<frame.length; i++) {
    403         stereo_frame[2*i] = frame[i];
    404         stereo_frame[2*i+1] = frame[i];
    405         }
    406        
    407         // Start playing the audio data returned from the Meandre workflow
    408         var written = pannedPlayback.mozWriteAudio(stereo_frame);
    409        
    410         if (written == 0) {
    411         // audio has backed up => give it a chance to clear
    412         return;
    413         }
    414        
    415         if (togglePlayMode == "play") {
    416         // displaying play button (which counter-intuatively means it must be paused)
    417         return;
    418         }
    419        
    420         if (written != stereo_frame.length) {
    421         //console.log("*** frame size was " + frame.length + " but only wrote out " + written);
    422         //selectedMeandreWorkflow.meandreDataOutput[0] = frame.subarray(written);
    423        
    424         selectedMeandreWorkflow.meandreDataOutput[0] = frame.subarray(written/2);
    425         }
    426         else {
    427         //console.log("***### popping head of meandreDataOutput queue");
    428         selectedMeandreWorkflow.meandreDataOutput.shift();
    429         }
    430     }
    431 
    432     }
    433 }
    434 
     532   
     533}
     534
  • gs3-extensions/web-audio/trunk/js-dsp/frequency-plotter.js

    r28388 r28548  
    3535    this.ctx = canvas.getContext('2d');
    3636    this.label_ctx = label_canvas.getContext('2d');
     37    this.canvas_saved_img = null;
     38
     39    var image_server_url = "http://localhost:8181/greenstone3/cgi-bin/image-server.pl?a=load&c="+gs.cgiParams.c
     40    +"&d="+gs.cgiParams.d+"&site="+gs.xsltParams.site_name;
     41    var canvas_load_data = { a: "load",
     42                 d: gs.cgiParams.d,
     43                 c: gs.cgiParams.c,
     44                 site: gs.xsltParams.site_name };
     45
     46    var outerThis = this;
     47    var jqxhr = $.ajax(image_server_url)
     48    .done(function(imagedata) {
     49        var check_prefix = imagedata.toString().substring(0, 5);
     50        if (check_prefix == "data:") {
     51        console.log("Loaded in previously stored self-similarity map");
     52        outerThis.canvas_saved_img = document.createElement("img");
     53        outerThis.canvas_saved_img.src = imagedata;
     54        }
     55    })
     56    .fail(function() {
     57        console.log("No currently stored self-similarity map for this document");
     58    });
     59
    3760
    3861    this.plotMapping[activeWorkflow.chromaCpt.transformMode](this);
     
    4164    this.prevXLineMaxArray = null;
    4265    this.plottedDataBuffer = new Array();
     66
     67    this.printedOutOfDataWarning = false;
    4368
    4469};
     
    182207    }
    183208    else {
    184     console.error("FrequencyPlotter::plotVisualLine(): No data to play for event time: " + eventTime);
     209    if (!this.printedOutOfDataWarning) {
     210        console.error("FrequencyPlotter::plotVisualLine(): No data to play for event time: " + eventTime + "\n"
     211              + "(Supressing subsequent error messages of this type)");
     212        this.printedOutOfDataWarning = true;
     213    }
     214
    185215    }
    186216
     
    230260
    231261
     262FrequencyPlotter.prototype.hasStoredSelfSimilarityMatrix  = function() {
     263    return this.canvas_saved_img != null;
     264}
     265
     266FrequencyPlotter.prototype.plotStoredSelfSimilarityMatrix  = function() {
     267
     268    this.ctx.drawImage(this.canvas_saved_img,0,0);
     269    //var img_data    = canvas.toDataURL("image/png");
     270}
     271
    232272
    233273FrequencyPlotter.prototype.plotSelfSimilarityMatrix  = function(ssm,pausePerc) {
     
    236276    var num_frames = ssm.length;
    237277
     278    console.log("plotSelfSimilarityMatrex: num_frames = " + num_frames + ", pausePerc = " + pausePerc);
    238279    var activeWidth  = this.fudgeWidth * pausePerc;
    239280    var activeHeight = this.height * pausePerc;
     
    241282    var x_scale = activeWidth / num_frames;
    242283    var y_scale = activeHeight / num_frames;
    243 
    244284    var x_width  = Math.ceil(x_scale);
    245285    var y_height = Math.ceil(y_scale);
     
    282322    else {
    283323        outerThis.progress = 100;
     324
     325        if ((jsMadProcessing == null) ||
     326        ((jsMadProcessing != null) && jsMadProcessing.processingFinished())) {
     327
     328        var canvas = document.getElementById("freq-plot" );
     329        var img_data    = canvas.toDataURL("image/png");
     330
     331        outerThis.canvas_saved_img = document.createElement("img");
     332        outerThis.canvas_saved_img.src = img_data;
     333
     334
     335        var image_server_url = "http://localhost:8181/greenstone3/cgi-bin/image-server.pl";
     336
     337        var canvas_save_data = { a: "save",
     338                     d: gs.cgiParams.d,
     339                     c: gs.cgiParams.c,
     340                     site: gs.xsltParams.site_name,
     341                     imagedata: img_data };
     342
     343        $.post(image_server_url, canvas_save_data).done(function( data ) {
     344            console.log( "Image data saved " );
     345        });
     346/*
     347        $.ajax({
     348            type: "POST",
     349            url: url,
     350            data: { "a" : "save" }
     351            success: success,
     352            dataType: dataType
     353        });
     354*/
     355
     356        console.log("Done save");
     357
     358        }   
    284359    }
    285360    })(this);
  • gs3-extensions/web-audio/trunk/js-mad/script/main-jsmad.js

    r28388 r28548  
    2626    this.playBufferStore = new Array();
    2727
     28/*
     29    // default is to operate as fast as possible
     30    if (BrowserDetect.browser == "Firefox") {
     31    this.speedup_batch_limit = 100;
     32    this.speedup_pause = 0;
     33    }
     34    else {
     35    // e.g. Chrome
     36    // => the following values played more nicely with letting DSP playback operate straightaway
     37    //    i.e. when jsmad is still working its way through the frames
     38   
     39    this.speedup_batch_limit = 10;
     40    this.speedup_pause = 2;
     41
     42    //speedup_batch_limit = 100;
     43    //speedup_pause = 0;
     44
     45    //console.log("*** Running JsMadProcessing with: batch limit = " + speedup_batch_limit
     46    //      + ", pause = " + this.speedup_pause + " msecs");
     47    }
     48*/
     49
     50    // Assume slow, unless the user explicitly activates "speed up"
     51    this.speedup_batch_limit = 10;
     52    this.speedup_pause = 1000;
     53
     54    this.processing_finished = false;
     55
    2856    stream.requestAbsolute(1 * 1024, function() { that.streamCallback(stream) });
    2957
    3058}
    3159
    32 
    33 
     60JsMadProcessing.prototype.setSpeedupParams = function(new_batch_limit,new_pause) {
     61    this.speedup_batch_limit = new_batch_limit;
     62    this.speedup_pause       = new_pause;
     63}
     64
     65
     66JsMadProcessing.prototype.processingFinished = function() {
     67    return this.processing_finished;
     68}
    3469
    3570JsMadProcessing.prototype.streamCallback = function(stream) {
     
    66101    console.log("*** main-jsmad.js::stream_callback(): hardwiring workflow buffer size to 2048");
    67102
    68     var speedup_batch_limit;
    69     var speedup_pause;
    70    
    71     if (BrowserDetect.browser == "Firefox") {
    72     speedup_batch_limit = 100;
    73     speedup_pause = 0;
    74     }
    75     else {
    76     // e.g. Chrome
    77     // => the following values played more nicely with letting DSP playback operate straightaway
    78     //    i.e. when jsmad is still working its way through the frames
    79    
    80     speedup_batch_limit = 10;
    81     speedup_pause = 2;
    82 
    83     //speedup_batch_limit = 100;
    84     //speedup_pause = 0;
    85 
    86     console.log("*** Running JsMadProcessing with: batch limit = " + speedup_batch_limit
    87             + ", pause = " + speedup_pause + " msecs");
    88     }
     103    var $acc_proc_status = $('#accProcStatus') || null;
    89104
    90105
     
    96111        var speedup_i = 0;
    97112
    98         while (speedup_i < speedup_batch_limit) { // Decode 100 frames at a time, before setTimeout break
     113        while (speedup_i < that.speedup_batch_limit) { // Decode 100 frames at a time, before setTimeout break
    99114
    100115        frame = Mad.Frame.decode(frame, mpeg);
     
    169184        speedup_i++;
    170185        i++;
     186
     187
     188        if ((i%10)==0) {
     189            if ($acc_proc_status != null) {
     190            $acc_proc_status.text(" (decoded " + i + " frames)");
     191            }
     192        }
     193       
    171194        }
    172195       
     
    175198        if (err == "Header decoding failed") {
    176199        console.info("JsMadProcessing::streamCallack() decoded " + i + " frames");
     200        $acc_proc_status.text(" (done)");
     201        that.processing_finished = true;
    177202        }
    178203        else {
     
    183208
    184209    if (more_frames) {
    185         setTimeout(arguments.callee,speedup_pause); // even a delay of '0' gives the browser thread a break
     210        setTimeout(arguments.callee,that.speedup_pause); // even a delay of '0' gives the browser thread a break
    186211    }
    187212    else {
     
    194219        //console.log("Computed song duration: " + song_duration + " secs");
    195220        console.info("JsMad processing done in " + speedup_duration + " secs (a speed factor of " + speedup_factor + ")");
     221
     222        $acc_proc_status.text(" (done)");
     223        that.processing_finished = true;
     224
    196225    }
    197226       
Note: See TracChangeset for help on using the changeset viewer.