source: gs3-extensions/web-audio/trunk/diy-audio-player/script/similarity-matrix-play.js@ 28548

// Audio objects
var baseSong;
var leftSong;
var rightSong;

var pannedPlayback = new Audio();
//var pannedSink     = new Sink();

var leftBuffers = [];
var rightBuffers = [];

var leftStartTimeSecs  = 0.0;
var rightStartTimeSecs = 0.0;
var leftStartTimeOffset  = 0;
var rightStartTimeOffset = 0;

var playTrackerMode = "stopped";

var startPlayX;
var startPlayY;

var pannedPlayWidth;
var pannedPlayHeight;

var prevPlayedX = -1;
var prevPlayedY = -1;

//var prevPlayedOffset = -1;

var preparingDualAudio = 0;

var _diyImages = "ext/diy-audio-player/images";

function resetAudioBuffers()
{
    //console.log("Panned audio playback buffers initialized/reset");

    pannedPlayback = new Audio();
    if (webAudioContext != null) {
    console.log("*** Web Audio filler for resetAudioBuffers()");
    }
    else {
    pannedPlayback.mozSetup(2, baseSong.mozSampleRate);
    }

    //pannedSink = new Sink(baseSong.mozSampleRate,2);
    //pannedSink.writeMode = "sink";

    leftBuffers = [];
    rightBuffers = [];

    leftStartTimeSecs  = 0.0;
    rightStartTimeSecs = 0.0;
    leftStartTimeOffset  = 0;
    rightStartTimeOffset = 0;

    prevPlayedX = -1;
    prevPlayedY = -1;

    // prevPlayedOffset = -1;



}



function dualPlay(evt) 
{

    //if ($('#playtracker').css('visibility') == 'hidden') { return };

    var mouse_x = evt.pageX;
    var mouse_y = evt.pageY;

    // display busy/loading cursor
    var playTrackerBusy = document.getElementById("playtrackerBusy");
    playTrackerBusy.setAttribute("style","visibility: visible;");
    preparingDualAudio = 1;

    var selfSimImg = document.getElementById("selfSimImgId");
    var imgWidth   = selfSimImg.getAttribute("width");
    var imgHeight  = selfSimImg.getAttribute("height") * yScaleSimImg;
    
    // console.log("**** image w x h = " + imgWidth +"," + imgHeight);

    var img_x = $("#selfSimImgId").offset().left;
    var img_y = $("#selfSimImgId").offset().top;
   
    var x_org = mouse_x - img_x;
    var y_org = mouse_y - img_y;
    //var adjusted_y_org = imgHeight - y_org;
    var adjusted_x_org = x_org - FrequencyPlotter.fudgeOffset;
    var adjusted_y_org = y_org; // *****
    
    //console.log("img (x y) = (" + img_x + "," + img_y + ")");
    //console.log("mouse (x y) = (" + mouse_x + "," + mouse_y + ")");
    //console.log("(x y) = (" + x_org + "," + adjusted_y_org + ")");

    startPlayX = x_org;
    startPlayY = y_org;

    //pannedPlayWidth  = imgWidth - x_org;
    var fudgeWidth = imgWidth - (FrequencyPlotter.fudgeOffset + FrequencyPlotter.fudgeTrim);
    pannedPlayWidth  = fudgeWidth - adjusted_x_org;
    //pannedPlayHeight = y_org;
    pannedPlayHeight = imgHeight - y_org; // **** adjusted

    resetAudioBuffers();

    //var baseSongSrc="sites/localsite/collect/" + collect +"/import/"+source; // ****
    // improvement to ensure plugin generate .ogg file, and then use that
    var baseSongSrc=gs.collectionMetadata["httpPath"]+"/index/assoc/"+gs.documentMetadata["assocfilepath"] + "/doc.ogg";

    //console.log("duration = " + duration);

    //leftStartTimeSecs  = duration * (x_org / imgWidth);
    leftStartTimeSecs  = duration * (adjusted_x_org / fudgeWidth);
    rightStartTimeSecs = duration * (adjusted_y_org / imgHeight);

    var sampleMult = baseSong.mozSampleRate * baseSong.mozChannels;
    leftStartTimeOffset  = leftStartTimeSecs * sampleMult;
    rightStartTimeOffset = rightStartTimeSecs * sampleMult;

    //leftSong.src  = baseSongSrc + "#t=" + leftStartTimeSecs + ",";
    //rightSong.src = baseSongSrc + "#t=" + rightStartTimeSecs + ",";

    leftSong.currentTime = leftStartTimeSecs;
    leftSong.play();

    rightSong.currentTime = rightStartTimeSecs;
    rightSong.play();

    // Drives the visualization
    baseSong.currentTime = leftStartTimeSecs;
    baseSong.volume = 0.0;
    baseSong.play();


    // console.log("play tracker mode = " + playTrackerMode);
    if (togglePlayMode.match("pause")) {
    // i.e. currently displaying the pause button
    // stop
    if (playTrackerMode.match("stopped")) {
        // => playing through the main play bar
        soundManager.stopAll();
        togglePlayVisual(document.getElementById("mainPlayButton"));
    }
    }

    console.log("*** DualPlay:: muting  'mysong' volume to 0");
    soundManager.setVolume("mysong",0.0);
    var soundManagerFrameOffset = Math.round(1000.0*leftStartTimeSecs/250.0); // **** better to develop function for computation
    playFromOffset("mysong",soundManagerFrameOffset);

/*
    if (!playTrackerMode.match("playing")) {
    togglePlayVisual(document.getElementById("mainPlayButton"));
    }
*/

}


function playTrackerOn(evt) 
{
    if (togglePlayMode.match("play") && $('input:checkbox[name=similarityMatrix]').prop("checked")) {

    var playTracker = document.getElementById("playtracker");
    playTrackerMove(evt);
    playTracker.setAttribute("style","visibility: visible");
    }
}

function playTrackerOff(evt) 
{    
    var playTracker = document.getElementById("playtracker");
    playTracker.setAttribute("style","visibility: hidden");
}

function updateLeftAndRightTimes(cx,cy)
{
    var selfSimImg = document.getElementById("selfSimImgId");
    var imgWidth  = selfSimImg.getAttribute("width");
    var imgHeight = selfSimImg.getAttribute("height") * yScaleSimImg;

    //var mysong = document.getElementById("mysong");
    //var barWidth = mysong.getElementWidth();

    var fudgeWidth = imgWidth - (FrequencyPlotter.fudgeOffset + FrequencyPlotter.fudgeTrim);

    // update L & R times on tracker
    var currPlayedXInSecs = (cx/fudgeWidth) * duration; // **** adjusted
    var currPlayedYInSecs = (cy/imgHeight) * duration;

    // Deliberately crossed to fit visual playTracker circlea 

    var leftTime = document.getElementById("leftTime");
    var leftText = "R: " + currPlayedXInSecs.toFixed(0) + " secs"; 
    // (used to do 1 decimal place)

    leftTextNode = leftTime.childNodes[0];
    leftTextNode.nodeValue = leftText;

    var rightTime = document.getElementById("rightTime");
    var rightText = "L: " + currPlayedYInSecs.toFixed(0) + " secs";
        
    rightTextNode = rightTime.childNodes[0];
    rightTextNode.nodeValue = rightText;

    // console.log("left text = " + leftText);
    // console.log("right text = " + rightext);
}


function playTrackerMove(evt) 
{
    if (!playTrackerMode.match("playing")) {
    var mouse_x = evt.pageX;
    var mouse_y = evt.pageY;

    var img_x = $("#selfSimImgId").offset().left;
    var img_y = $("#selfSimImgId").offset().top;
   
    var x_org = mouse_x - img_x;
    var y_org = mouse_y - img_y;
    
    var adjusted_x_org = x_org - FrequencyPlotter.fudgeOffset;
    var adjusted_y_org = y_org;

    updateLeftAndRightTimes(adjusted_x_org,adjusted_y_org);

    var playTracker = document.getElementById("playtracker");
    var transform = "translate("+x_org+","+y_org+")";
    playTracker.setAttribute("transform",transform);
    }

}

function svgInitSimilarityPlay() 
{
    var mysong = document.getElementById("mysong");
    var barWidth = mysong.getElementWidth();

    //var baseSongSrc="sites/localsite/collect/" + collect +"/import/"+source;
    // improvement to ensure plugin generate .ogg file, and then use that
    var baseSongSrc=gs.collectionMetadata["httpPath"]+"/index/assoc/"+gs.documentMetadata["assocfilepath"] + "/doc.ogg";

    baseSong = document.getElementById("rta-audio-element");
    //baseSong = new Audio();
    //baseSong.src = baseSongSrc;
    //baseSong.control = "control";

    //baseSong.addEventListener('MozAudioAvailable', audioAvailable, false);
    //baseSong.addEventListener('loadedmetadata', loadedMetadata, false);

/*
    // match the pannedPlayback sample rate to 'baseSong' once it is set up
    baseSong.addEventListener('loadedmetadata', initPannedPlaybackSampleRate, false);

    //leftSong = new Audio();
    leftSong = document.getElementById("leftsong");
    leftSong.addEventListener('MozAudioAvailable', audioAvailableLeft, false);
    leftSong.addEventListener('loadedmetadata', loadedMetadataLeft, false);


    //rightSong = new Audio();
    rightSong = document.getElementById("rightsong")
    rightSong.addEventListener('MozAudioAvailable', audioAvailableRight, false);
    rightSong.addEventListener('loadedmetadata', loadedMetadataRight, false);
    
*/

    //graphicalEq = new GraphicalEq(sampleRate);
    //graphicalEq.recalculateFilters();

    // Set up self similarity image

    //var selfSimImgSrc="sites/localsite/collect/" + collect +"/bordered/line-interlaced/"+self_sim_png;
    var selfSimImgSrc="sites/" + site + "/collect/" + collect +"/images/blank-775x816.png";
    //console.log("self sim img = " + selfSimImgSrc);

    var simPlayLine = document.getElementById("simPlayLineGroup");

    simPlayLine.setAttributeNS(SVG_NS,"transform","scale(1.0,"+yScaleSimImg+")");

    var selfSimImg = document.createElementNS(SVG_NS,"image");
    selfSimImg.setAttributeNS(XLINK_NS, "xlink:href", selfSimImgSrc);

    var selfSimImgWidth  = barWidth;
    var selfSimImgHeight = barWidth * (815.0 / 776.0);

    selfSimImg.setAttribute("x",0);
    selfSimImg.setAttribute("y",0);
    selfSimImg.setAttribute("id","selfSimImgId");
    selfSimImg.setAttribute("width",barWidth);
    selfSimImg.setAttribute("height",selfSimImgHeight);
    selfSimImg.setAttribute("onclick","dualPlay(evt)");
    selfSimImg.setAttribute("onmousemove","playTrackerMove(evt)");
    selfSimImg.setAttribute("onmouseover","playTrackerOn(evt)");
    //selfSimImg.setAttribute("onmouseout","playTrackerOff(evt)");

    simPlayLine.appendChild(selfSimImg);

    var svgSimilarityPlay = document.getElementById("svgSimilarityPlay");

    //console.log("self sim height = " + selfSimImgHeight + " y scale = " + yScaleSimImg);
    svgSimilarityPlay.setAttribute("height",0 + selfSimImgHeight * yScaleSimImg); // used to be 30 +

    // Firefox doesn't seem to like this being initialized statically
    // in the HTML page generate, so add it dynamically here
    var playTrackerBusy = document.getElementById("playtrackerBusy");
    playTrackerBusy.setAttributeNS(XLINK_NS,"xlink:href",
                   _diyImages + "/wait30trans.gif");

}



// Not callled anymore // ****

function loadedMetadata() {
    // Mute baseSong audio.
    baseSong.volume = 0;

    console.error("This should not be called anymore");

}

function initPannedPlaybackSampleRate() {

    // Set up a pannedPlayback for the left and right song streams to be mixed and routed through

    if (webAudioContext != null) {    
    console.log("*** Web Audio filler for initPannedPlaybackSampleRate()");
    }
    else {
    console.info("similarity-matrix-play initPannedPlaybackSampleRate(): Setting up pannedPlayback with .mozSetup(2,"+baseSong.mozSampleRate+")");
    pannedPlayback.mozSetup(2, baseSong.mozSampleRate);
    }
}

function loadedMetadataLeft() {

    //console.log("*** similarity-matrix-play: loadedMetadataLeft()");

    // Mute leftSong audio.
    leftSong.volume = 0;

    if (webAudioContext != null) {

    var webAudioSource = webAudioContext.createMediaElementSource(leftSong);

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


    //leftSong.currentTime = leftStartTimeSecs;
    //leftSong.play();
    //console.log("left start time = " + leftStartTimeSecs);
}


function loadedMetadataRight() {

    //console.log("*** similarity-matrix-play: loadedMetadataRight()");

    // Mute rightSong audio.
    rightSong.volume = 0;

    if (webAudioContext != null) {

    var webAudioSource = webAudioContext.createMediaElementSource(rightSong);

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


    //rightSong.currentTime = rightStartTimeSecs;
    //rightSong.play();
    //console.log("right start time = " + rightStartTimeSecs);

}

function audioAvailable(event) {
    // Write the current framebuffer
    //alert("audioAvailable() should no longer be called");
    console.error("audioAvailable() should no longer be called");

    var frameBuffer = event.frameBuffer; // frameBuffer is Float32Array
    //writeAudio(frameBuffer);
}

var smf = true;

function audioAvailableLeft(event) 
{
    // Write the current framebuffer
    if (webAudioContext != null) {
    
    if (leftSong.paused) {
        // not processing/playing any new audio 
        return;
    }

    if (smf) {
        console.log("*** audioAvailableLeft() forcing mysong to 0 vol");
        soundManager.setVolume("mysong",0.0);
        leftSong.volume = 0.0;
        rightSong.volume = 0.0;
        smf = false;
    }

    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);

    for (var i=0; i<inputLen; i++) {
        outputArrayL[i] = (inputArrayL[i] + inputArrayR[i])/2.0;
        outputArrayR[i] = 0.0;
    }
    }
    else {

    if (smf) {
        console.log("*** audioAvailableLeft() forcing mysong to 0 vol");
        soundManager.setVolume("mysong",0.0);
        leftSong.volume = 0.0;
        rightSong.volume = 0.0;
        smf = false;
    }

    var frameBuffer = event.frameBuffer; 
    writeAudio(frameBuffer,"left");
    }

}

function audioAvailableRight(event) 
{
    // Write the current framebuffer

    if (webAudioContext != null) {
    
    if (rightSong.paused) {
        // not processing/playing any new audio 
        return;
    }

    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);

    for (var i=0; i<inputLen; i++) {
        outputArrayL[i] = 0.0;
        outputArrayR[i] = (inputArrayL[i] + inputArrayR[i])/2.0;
    }
    }

    else {
    var frameBuffer = event.frameBuffer; 
    writeAudio(frameBuffer,"right");
    }
}




function activeAudioBuffer(audioBuffer,currentFullBufferSize,startTime) 
{
    var buffer;
    if (currentFullBufferSize < startTime) {
    // active audio starts at offset within this segment of audioBuffer

    var position = startTime - currentFullBufferSize;
    buffer = audioBuffer.subarray(position);
    }
    else {
    buffer = audioBuffer;
    }
    return buffer;
}

function panLeftEffect(buffer,s,panned_buffer,d) 
{
    panned_buffer[d] = buffer[s];
    if ((d+1) < panned_buffer.length) {
    panned_buffer[d+1] = 0;
    }
}

function panRightEffect(buffer,s,panned_buffer,d) 
{
    panned_buffer[d] = 0;
    if ((d+1) < panned_buffer.length) {
    panned_buffer[d+1] = buffer[s];
    }
}

function panAudioBuffersHead(buffer,position,panEffect)
{
    var remaining_len = buffer.length - position;
    var panned_buffer;
    if (baseSong.mozChannels == 1) {
    panned_buffer = new Float32Array(remaining_len * 2);

    var d=0;
    for (var s=position; s < buffer.length; s++) {
        panEffect(buffer,s,panned_buffer,d);
        d += 2;
    }
    }
    else {
    // assume stereo
    panned_buffer = new Float32Array(remaining_len);
      
    var d=0;
    for (var s=position; s < buffer.length; s+=2) {
        panEffect(buffer,s,panned_buffer,d); 

        d += 2;
    }
    }

    return panned_buffer;
}

function mergeLeftAndRightPan(leftPannedBuffer,rightPannedBuffer)
{
    // left and right buffers guaranteed to be stereo samples
 
    // Deliberately crossed to fit visual playTracker circlea 

    var leftLen  = leftPannedBuffer.length;
    var rightLen = rightPannedBuffer.length;
    var maxLen = Math.max(leftLen,rightLen);

    var pannedBuffer = new Float32Array(maxLen);

    for (i=0; i < maxLen; i+=2) {

        if (i < leftLen-1) {
        // i+1 actually right pos
        pannedBuffer[i+1] = leftPannedBuffer[i];
    }
    else {
        pannedBuffer[i+1] = 0;
    }

        if (i < rightLen-1) {
        // actually left pos
        pannedBuffer[i] = rightPannedBuffer[i+1];
    }
    else {
        pannedBuffer[i] = 0;
    }
    }

    return pannedBuffer;

}

function writeAudio(audioBuffer,channel) 
{

    var mysong = document.getElementById("mysong");
    var barWidth = mysong.getElementWidth();

    var selfSimImg = document.getElementById("selfSimImgId");
    var imgWidth  = selfSimImg.getAttribute("width");
    var imgHeight = selfSimImg.getAttribute("height") * yScaleSimImg;

    var fudgeWidth = imgWidth - (FrequencyPlotter.fudgeOffset + FrequencyPlotter.fudgeTrim);

    // audioBuffer is Float32Array
    var audioBufferLen = audioBuffer.length; 

    if (channel.match("left")) {
        //var leftBuffer = activeAudioBuffer(audioBuffer,totalFullBufferSize,leftStartTimeOffset);
    leftBuffers.push({buffer: audioBuffer, position: 0});
    }

    if (channel.match("right")) {
        //var rightBuffer = activeAudioBuffer(audioBuffer,totalFullBufferSize,rightStartTimeOffset);
    rightBuffers.push({buffer: audioBuffer, position: 0});
    }


    // If there's buffered data in both left and right buffers,
    // then it's time to play something 

    var currPlayedX = null;
    var currPlayedY = null;

    while ((leftBuffers.length > 0) && (rightBuffers.length > 0)) {

    if (preparingDualAudio) {
        var playTrackerBusy= document.getElementById("playtrackerBusy");
        playTrackerBusy.setAttribute("style","visibility: hidden;");
        preparingDualAudio = 0;
    }


        var leftBuffer = leftBuffers[0].buffer;
    var leftBufferPos = leftBuffers[0].position;
        var leftPannedBuffer  = panAudioBuffersHead(leftBuffer,leftBufferPos,panLeftEffect);

        var rightBuffer = rightBuffers[0].buffer;
    var rightBufferPos = rightBuffers[0].position;
        var rightPannedBuffer = panAudioBuffersHead(rightBuffer,rightBufferPos,panRightEffect);

        var pannedBuffer = mergeLeftAndRightPan(leftPannedBuffer,rightPannedBuffer);

    // Send something to be played
    var written = pannedPlayback.mozWriteAudio(pannedBuffer);
    //pannedSink.writeBufferSync(pannedBuffer);


    //var written = pannedPlayback.mozWriteAudio(rightPannedBuffer);
    //var written = pannedPlayback.mozWriteAudio(leftPannedBuffer);

    // get current play pos, and plot on selfSimImg
    var currentPlayedOffset = pannedPlayback.mozCurrentSampleOffset();
    //var currentPlayedOffset = pannedSink.getSyncWriteOffset();

    var sampleRate = pannedPlayback.mozSampleRate;
    var numChannels = pannedPlayback.mozChannels;
    //var sampleRate = pannedSink.sampleRate;
    //var numChannels = pannedSink.channelCount;

    var pannedDurationLeft  = duration - leftStartTimeSecs;
    var pannedDurationRight = duration - rightStartTimeSecs;

    var totalNumSamplesLeft  = sampleRate * numChannels * pannedDurationLeft;
    var totalNumSamplesRight = sampleRate * numChannels * pannedDurationRight;

    var currentPlayedPercLeft  = currentPlayedOffset/totalNumSamplesLeft;
    var currentPlayedPercRight = currentPlayedOffset/totalNumSamplesRight;


    var currPlayedXPrecise = startPlayX + (currentPlayedPercLeft*pannedPlayWidth);
    //var currPlayedYPrecise = startPlayY - (currentPlayedPercRight*pannedPlayHeight);
    var currPlayedYPrecise = startPlayY + (currentPlayedPercRight*pannedPlayHeight); // **** adjusted

    currPlayedX = Math.round(currPlayedXPrecise);
    currPlayedY = Math.round(currPlayedYPrecise);


    if ((currPlayedX != prevPlayedX) || (currPlayedY != prevPlayedY)) {

        updateLeftAndRightTimes(currPlayedXPrecise,currPlayedYPrecise);

        var playTracker = document.getElementById("playtracker");
        var transform = "translate("+currPlayedX+","+currPlayedY+")";
        playTracker.setAttribute("transform",transform);
            
        if ((prevPlayedX == -1) && (prevPlayedY == -1)) {
        // notice the first time this happens
        playTracker.setAttribute("style","visibility: visible");
        playTrackerMode = "playing";
        }

        prevPlayedX = currPlayedX;
        prevPlayedY = currPlayedY;
    }

    // console.log("currently playing = " + currentPlayedSecs);


    // If all data wasn't written, keep it in the buffers:
    var doBreak = false;

    if (leftBufferPos + written < leftBuffer.length) {
        leftBuffers[0].position = leftBufferPos + written;
        doBreak = true;
    }
    else {
        leftBuffers.shift();
        }

    if (rightBufferPos + written < rightBuffer.length) {
        rightBuffers[0].position = rightBufferPos + written;
        doBreak = true;
    }
    else {
        rightBuffers.shift();
        }

    if (doBreak) {
        break;
    }
    }

    var currentPlayedOffset = pannedPlayback.mozCurrentSampleOffset();
    //var currentPlayedOffset = pannedSink.getSyncWriteOffset();

    //if (currentPlayedOffset == prevPlayedOffset) {
    // Nothing more is playing

    //var exceededX = ((currPlayedX != null) && (currPlayedX>barWidth));
    var exceededX = ((currPlayedX != null) && (currPlayedX>fudgeWidth));
    //var exceededY = ((currPlayedY != null) && (currPlayedY<0));
    var exceededY = ((currPlayedY != null) && (currPlayedY>imgHeight)); // **** adjusted

    if ((exceededX || exceededY) && (!playTrackerMode.match("stopped"))) {

    // console.log("detected stop condition");

    // readed edge of play area
    playTrackerMode = "stopped";
    togglePlayVisual(document.getElementById("mainPlayButton"));
    playTrackerOff(null);
        
    console.log("*** setting 'mysong' volume back to 100%");
    soundManager.setVolume("mysong",100);

    //prevPlayedOffset = -1;
    }
    else {
    //prevPlayedOffset = currentPlayedOffset;
    }

}