AudioViz

Vue for everything except the part that matters

The README is unusually direct about the split, so here it is in the author's own words:

Most of the functionality has been written in vanilla javascript using audio context andcanvas APIs. VueJS is used for better bundling, easy routing, PWA functionality and quickdeployment.

That is a real architectural decision stated plainly. A visualiser redraws every frame from a frequency analysis of the audio, sixty times a second. Routing that through a reactive framework means asking a change-detection system to keep up with data that changes completely on every tick, which is work the framework was never meant to do and cannot do for free. So the audio graph and the canvas loop are plain JavaScript, and Vue is left holding the things it is genuinely good at: bundling, three routes, PWA install, deployment.

Notably there is no Three.js and no Tone.js here, unlike its siblings. It draws to a 2D canvas, which is what the README's "canvas APIs" means, and it reaches for the Web Audio API directly rather than a synthesis library, because it is analysing sound rather than producing it.

Two tools in one app

The nav carries three entries: Vizualizer, Waveform Generator, and About. The visualiser reacts to audio you give it. The generator goes the other way and produces a waveform. They share the same canvas and audio plumbing from opposite ends.

Honest about the screenshots

The featured image for this project is close to black, and that is not a capture bug. AudioViz is audio-reactive: with no sound playing there is nothing to draw, so an automated screenshot of a silent page is a correct picture of an empty visualiser. It photographs badly and works fine, which is true of most things that respond to input.

The live page title also contains a typo, "generetor", carried since 2022.

Links

Live: audioviz.abchaudary.me. Source: github.com/abdullahchaudary/audioviz.