andyburke/autonomous.contact
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feature: improve audio vis a little more

Browse source 
fix: remove some debugging console stuff
This commit is contained in:
Andy Burke 2025-08-21 23:24:34 -07:00
parent 0ed013c968
commit b6b4fefa34
5 changed files with 102 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

65
public/js/audioplayer.js
View file

@ -4,8 +4,10 @@ function human_readable_time(duration) {
return new Date(duration * 1000).toISOString().slice(duration > 3600 ? 11 : 14, 19);
}
const FREQUENCY_SAMPLES = 512;
const BAR_WIDTH = 4;
const DISPLAY_WINDOW = 1;
const BAR_COUNT = 48;
const BAR_GAP = 2;
const BAR_CAP_HEIGHT = 8;
const PROGRESS_TICKS = 1000;
const MS_BETWEEN_PROGRESS_UPDATES = 200;
@ -54,12 +56,6 @@ new MutationObserver((mutations) => {
player.addEventListener("keydown", (event) => {
const key = event.which ?? event.keyCode;
console.dir({
key,
playing: player.dataset.playing,
});
switch (key) {
case 32: // space
event.preventDefault();
@ -145,6 +141,9 @@ new MutationObserver((mutations) => {
function init() {
CANVAS = CANVAS ?? player.querySelector("canvas");
CANVAS.height = 255;
CANVAS.width = BAR_COUNT * (16 + BAR_GAP);
VIZ_RGB = window
.getComputedStyle(CANVAS)
.color.slice(4, -1)
@ -155,8 +154,6 @@ new MutationObserver((mutations) => {
if (!ANALYSER) {
ANALYSER = ACTX.createAnalyser();
ANALYSER.fftSize = 4 * FREQUENCY_SAMPLES;
ANALYSER.smoothingTimeConstant = 0.8;
}
DATA = DATA ?? new Uint8Array(ANALYSER.frequencyBinCount);
@ -174,22 +171,54 @@ new MutationObserver((mutations) => {
}
}
let previous_max_values;
function draw() {
previous_max_values =
previous_max_values ?? new Array(ANALYSER.frequencyBinCount).fill(0);
if (!player.dataset.playing) {
return;
if (previous_max_values.all((v) => v === 0)) return;
}
ANALYSER.getByteFrequencyData(DATA);
// draw on the canvas element
const gradient = CTX.createLinearGradient(0, 0, 0, CANVAS.height);
gradient.addColorStop(
0.4,
`rgba( ${parseInt(VIZ_RGB[0] / 4)}, ${parseInt(VIZ_RGB[1] / 4)}, ${parseInt(VIZ_RGB[2] / 4)}, 0)`,
);
gradient.addColorStop(1, `rgba( ${VIZ_RGB[0]}, ${VIZ_RGB[1]}, ${VIZ_RGB[2]}, 0.25)`);
const bar_width = parseInt(CANVAS.width / BAR_COUNT);
const stride = parseInt((DATA.length * DISPLAY_WINDOW) / BAR_COUNT);
CTX.clearRect(0, 0, CANVAS.width, CANVAS.height);
for (let i = 0; i < DATA.length; i = i + BAR_WIDTH) {
// normalize the value
const value = DATA[i] / 255;
const y = CANVAS.height - CANVAS.height * value;
CTX.fillStyle = `rgb(${Math.min(255, parseInt(value * VIZ_RGB[0] + VIZ_RGB[0] * 0.25))}, ${Math.min(255, parseInt(value * VIZ_RGB[1] + VIZ_RGB[1] * 0.25))}, ${Math.min(255, parseInt(value * VIZ_RGB[2] + VIZ_RGB[2] * 0.25))})`;
CTX.fillRect(i, y, 2, 8);
for (let i = 0; i < BAR_COUNT; ++i) {
const value = DATA[i * stride];
const cap_value = value > previous_max_values[i] ? value : previous_max_values[i];
const cap_color_value = 0.33 + cap_value / 255;
CTX.fillStyle = `rgba(${VIZ_RGB[0]}, ${VIZ_RGB[1]}, ${VIZ_RGB[2]}, 0.8)`;
CTX.fillRect(
i * (bar_width + BAR_GAP),
CANVAS.height - cap_value,
bar_width,
BAR_CAP_HEIGHT,
);
previous_max_values[i] =
value > previous_max_values[i]
? value
: previous_max_values[i] - BAR_CAP_HEIGHT / 2;
CTX.fillStyle = gradient;
CTX.fillRect(
i * (bar_width + BAR_GAP),
CANVAS.height - value + BAR_CAP_HEIGHT + BAR_CAP_HEIGHT,
bar_width,
value,
);
}
requestAnimationFrame(draw);