let audio = document.getElementById('audio');
let file_path = audio.src;

fftsize = 2048;
color = true;

cnv = document.getElementById("spectrogram");
width = window.innerWidth;
height = window.innerHeight;

if (cnv.width != width) {
    cnv.width = width;
}

if (cnv.height != height) {
    cnv.height = height;
}

let now = new Date();

if (lastRenderTime) {
    instantaneousFPS = now - lastRenderTime;
}

function renderTimeDomain() {
    let times = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteTimeDomainData(times);

    for (var i = 0; i < times.length; i++) {
        var value = times[i];
        var percent = value / 256;
        var barHeight = height * percent;
        var offset = height - barHeight - 1;
        var barWidth = width / times.length;
        ctx.fillStyle = 'black';
        ctx.fillRect(i * barWidth, offset, 1, 1);

    }
}

function renderFreqDomain() {
    var freq = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(freq);
    cnv.width = width;
    cnv.height = height;
    var tempCtx = cnv.getContext('2d');
    tempCtx.drawImage(cnv, 0, 0, width, height);

    for (var i = 0; i < freq.length; i++) {
        var value;
        if (log) {
            logIndex = logScale(i, freq.length);
            value = freq[logIndex];
        } else {
            value = freq[i];
        }
        ctx.fillStyle = (color ? getFullColor(value): getGrayColor(value));
        var percent = i / freq.length;
        var y = Math.round(percent * height);

        ctx.fillRect(width - speed, height - y, speed, speed);
    }
    ctx.translate(-speed, 0);
    ctx.drawImage(cnv, 0, 0, width, height, 0, 0, width, height);

    ctx.setTransform(1, 0, 0, 1, 0, 0);
}

function logScale(index, total, opt_base) {
    var base = opt_base || 2;
    var logmax = logBase(total + 1, base);
    var exp = logmax * index / total;
    return Math.round(Math.pow(base, exp) - 1);
}

function renderAxesLabels() {
    
}