BirdNET-stream/www/assets/utils/spectro.js

64 lines
1.7 KiB
JavaScript

/**
* Credits to:
* https://codepen.io/jakealbaugh/pen/jvQweW
*/
// UPDATE: there is a problem in chrome with starting audio context
// before a user gesture. This fixes it.
var started = false;
var spectro_button = document.getElementById('spectro-button');
spectro_button.addEventListener('click', () => {
if (started) return;
started = true;
console.log("starting spectro");
initialize();
})
function initialize() {
const CVS = document.getElementById('spectro-canvas');
const CTX = CVS.getContext('2d');
const W = CVS.width = window.innerWidth;
const H = CVS.height = window.innerHeight;
const ACTX = new AudioContext();
const ANALYSER = ACTX.createAnalyser();
ANALYSER.fftSize = 4096;
navigator.mediaDevices
.getUserMedia({ audio: true })
.then(process);
function process(stream) {
const SOURCE = ACTX.createMediaStreamSource(stream);
SOURCE.connect(ANALYSER);
const DATA = new Uint8Array(ANALYSER.frequencyBinCount);
const LEN = DATA.length;
const h = H / LEN;
const x = W - 1;
CTX.fillStyle = 'hsl(280, 100%, 10%)';
CTX.fillRect(0, 0, W, H);
loop();
function loop() {
window.requestAnimationFrame(loop);
let imgData = CTX.getImageData(1, 0, W - 1, H);
CTX.fillRect(0, 0, W, H);
CTX.putImageData(imgData, 0, 0);
ANALYSER.getByteFrequencyData(DATA);
for (let i = 0; i < LEN; i++) {
let rat = DATA[i] / 255;
let hue = Math.round((rat * 120) + 280 % 360);
let sat = '100%';
let lit = 10 + (70 * rat) + '%';
CTX.beginPath();
CTX.strokeStyle = `hsl(${hue}, ${sat}, ${lit})`;
CTX.moveTo(x, H - (i * h));
CTX.lineTo(x, H - (i * h + h));
CTX.stroke();
}
}
}
}