This page might use cookies to improve user experience. Until you accept the Cookie & Privacy Policy those features are disabled. Accept Policy

0xReki's Adventures

🏷 Tags

🛈 About Me

⁉️ Q & A


💡 🔍+ 🔍−

HTML5 Audio Visualizer

published on 2016-12-09 written by 0xReki
HTML5, Audio, FFT, Project, Eye Candy

So I was looking for some way to visualize my music for my YouTube channel without relying on Adobe Tools — or rather without relying on someone who has bought a license of Adobe Tools. I could capture the visualization by VLC. But that wouldn’t be customizable.

So I found a HTML5 Audio Visualizer. It can be customized, all right. But didn’t scale to the size of the canvas and the frequency scaling is linear. The linear frequency scaling very annoying when you have lossy audio and see upper third of the frequencies being empty. While fixing the former was simple to fix the latter was not so trivial.

After some researching it suddenly came to me: I only needed to fiddle around with extracting roots to get the step size and exponentiating it to get to the higher frequencies. Of course, the size of the underlying Fourier Transformation should be increased accordingly. After some bodging the result is quite presentable:

I’ll start using it in 2017.

You can find the code on GitHub.