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. ^^