music video renderer web app
deftoku.digi.rip
audio
visualizer
webapp
visualizers/bars: added new visualizer
- currently non-functional, uses randomly generated arrays from
preview/randomFreqs
- still need to wire up real audio
+73
+43
src/controller.ts
+43
src/controller.ts
···
1
+
// visualizers
2
+
import { draw as bars } from "./visualizers/bars.ts";
3
+
const visualizers = { bars };
4
+
5
+
// preview
6
+
import { randomFreqs } from "./preview.ts";
7
+
8
+
function fitCanvas(canvas: HTMLCanvasElement) {
9
+
const container = canvas.parentElement!;
10
+
const scale = Math.min(
11
+
container.clientWidth / canvas.width,
12
+
container.clientHeight / canvas.height,
13
+
);
14
+
canvas.style.width = `${canvas.width * scale}px`;
15
+
canvas.style.height = `${canvas.height * scale}px`;
16
+
}
17
+
18
+
const load = () => {
19
+
console.log("controller booted");
20
+
const canvas = document.querySelector("canvas");
21
+
if (!canvas) return;
22
+
globalThis.window.addEventListener("resize", () => fitCanvas(canvas));
23
+
fitCanvas(canvas);
24
+
const select = document.querySelector<HTMLSelectElement>("#vis-select");
25
+
26
+
if (!select) return;
27
+
28
+
const run = (name: string) => {
29
+
return visualizers[name as keyof typeof visualizers](
30
+
canvas,
31
+
randomFreqs(67),
32
+
);
33
+
};
34
+
35
+
select?.addEventListener("change", () => run(select.value));
36
+
run(select.value);
37
+
};
38
+
39
+
if (document.readyState === "loading") {
40
+
document.addEventListener("DOMContentLoaded", load);
41
+
} else {
42
+
load();
43
+
}
+1
src/mod.ts
+1
src/mod.ts
···
1
+
import "./controller.ts";
+8
src/preview.ts
+8
src/preview.ts
+21
src/visualizers/bars.ts
+21
src/visualizers/bars.ts
···
1
+
export function draw(canvas: HTMLCanvasElement, freq: Uint8Array) {
2
+
const ctx = canvas.getContext("2d");
3
+
if (!ctx) return;
4
+
5
+
const barCount = 16;
6
+
const barWidth = canvas.width / barCount;
7
+
const maxBarHeight = canvas.height;
8
+
9
+
ctx.fillStyle = "black";
10
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
11
+
12
+
for (let i = 0; i < barCount; i++) {
13
+
const freqIndex = Math.floor((i / barCount) * freq.length);
14
+
const freqAmpl = freq[freqIndex] / 255;
15
+
const barHeight = freqAmpl * maxBarHeight;
16
+
17
+
const hue = (i / barCount) * 360;
18
+
ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
19
+
ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth, barHeight);
20
+
}
21
+
}