source: gs3-extensions/web-audio/trunk/diy-audio-player/script/audioDB-play.js@ 28388

var SVG_NS ="http://www.w3.org/2000/svg";
var XLINK_NS = "http://www.w3.org/1999/xlink";

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

function svgAudioDBInit() 
{
    var segsElem = document.getElementById("svgAudioDBSegments");
    var mysong = document.getElementById("mysong");

    var barWidth = mysong.getElementWidth();

    if ((typeof frameOffsetStr === "undefined") || (frameOffsetStr == null)) { return; }

    var frameOffsetList = frameOffsetStr.split(",");
    frameOffsetList.sort(function(a,b){return a-b});

    prevOffsetInSecs = 0.0;
    
    for (i=0; i < frameOffsetList.length; i++) {
        var frameOffset = frameOffsetList[i];
        var offsetInSecs=(250*frameOffset)/1000.0;

    var frameLengthInSecs = frameLength * 250 / 1000;
        if (i > 0) { 
      if ((offsetInSecs - prevOffsetInSecs) < frameLengthInSecs)   {
          continue;
      }
    }

    var x = barWidth * offsetInSecs / duration;
    var y = 0;

    var gElem = document.createElementNS(SVG_NS,'g');
    gElem.setAttribute('transform','translate('+x+','+y+')');

    var rectElem = document.createElementNS(SVG_NS,'rect');
    rectElem.setAttribute('width',150);
    rectElem.setAttribute('height','24');
    rectElem.setAttribute('x','0');
    rectElem.setAttribute('y','0');
    rectElem.setAttribute('fill', 'rgb(100%,100%,70%)');

    var playImgElem = document.createElementNS(SVG_NS,"image");
    playImgElem.setAttributeNS(XLINK_NS, "xlink:href", 
                   _diyImages + "/play20.png");
    playImgElem.setAttribute("x","2");
    playImgElem.setAttribute("y","2");
    playImgElem.setAttribute("width","20");
    playImgElem.setAttribute("height","20");

    var onclick ="playFromOffset('mysong'," + frameOffset + ")";
    playImgElem.setAttribute("onclick",onclick);

    playImgElem.setAttribute("onmouseover","playHighlightOnSVG(evt.target,20)");
    playImgElem.setAttribute("onmouseout", "playHighlightOffSVG(evt.target,20)");

    var textElem = document.createElementNS(SVG_NS,'text');
    textElem.setAttribute('x','24');
    textElem.setAttribute('y','16');
    textElem.setAttribute("style","color: black; font-size: 75%;");

    var textNode = document.createTextNode("match @ "+ offsetInSecs + " secs");
    textElem.appendChild(textNode);

    var rectLenElem = document.createElementNS(SVG_NS,'rect');
    var frameLengthWidth = barWidth * frameLengthInSecs / duration;
    rectLenElem.setAttribute('width',frameLengthWidth);
    rectLenElem.setAttribute('height','4');
    rectLenElem.setAttribute('x','0');
    rectLenElem.setAttribute('y','20');
    rectLenElem.setAttribute('fill', 'rgb(100%,0%,0%)');


    gElem.appendChild(rectElem);
    gElem.appendChild(rectLenElem);
    gElem.appendChild(playImgElem);
    gElem.appendChild(textElem);
    segsElem.appendChild(gElem);

    prevOffsetInSecs = offsetInSecs;
    }
}