78 lines
1.9 KiB
JavaScript
78 lines
1.9 KiB
JavaScript
|
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() {
|
||
|
|
|
||
|
|
}
|