0

I am creating a spectrogram that on click of a button displays but keeps giving me this error and i do not understand what the problem is if anyone can help i would be very thankful!

// used for color distribution
    var myColor = new chroma.ColorScale({
        colors:['#000000', '#ff0000', '#ffff00', '#ffffff'],
        positions:[0, .25, .75, 1],
        mode:'rgb',
        limits:[0, 300]
    });

This is the defined variable ^^^

function Spectrogram() {
        // Start visualizer.
  requestAnimFrame(drawSpectrogram)
}

This is the on button activation ^^^^

//draw the spectrogram
    function drawSpectrogramVisualisation() {
    var canvas = document.getElementById("canvas2");
    var context = canvas.getContext("2d");

    //store a temp copy of the canvas
    //create a temp canvas we use for copying
    var tempCanvas = document.createElement("canvas");
    tempCanvas.width = spectrogramCanvasWIDTH;
    tempCanvas.height = spectrogramCanvasHEIGHT
    var tempCtx = tempCanvas.getContext("2d");

    tempCtx.drawImage(canvas,0,0, spectrogramCanvasWIDTH, spectrogramCanvasHEIGHT);

    var freqDomain = new Uint8Array(analyser.frequencyBinCount);

    analyser.getByteFrequencyData(freqDomain);

    if(spectrogramLeftPos == spectrogramCanvasWIDTH){
        for (var i = 0; i< analyser.frequencyBinCount; i++) { 

        var value = freqDomain[i]
        tempCtx.fillStyle = myColor.getColor(value).hex();
        tempCtx.fillRect(spectrogramCanvasWIDTH - 1, (spectrogramCanvasHEIGHT - i), 1, 1);
        }
        context.translate(-1, 0);
        context.drawImage(tempCanvas,0,0, spectrogramCanvasWIDTH, spectrogramCanvasHEIGHT);
        context.setTransform(1,0,0,1,0,0);
    } else {

            for (var i = 0; i < analyser.frequencyBinCount; i++) {
                var value = freqDomain [i];
                tempCtx.fillStyle = myColor.getColor(value).hex();
                tempCtx.fillRect(spectrogramLeftPos, (spectrogramCanvasHEIGHT - i), 1, 1);
            }

            context.drawImage(tempCanvas,0,0, spectrogramCanvasWIDTH, spectrogramCanvasHeight);
            spectrogramLeftPos++;
    }
}

This is the spectrogram function ^^^^

<script type="text/javascript" src="chroma.js"></script>

This is in the html section inside the Head tag. ^^

0 Answers0