my YouTube channel without relying on Adobe Tools — or rather without relying on someone…">my YouTube channel without relying on Adobe…">

0xReki's Adventures

💡 🔍+ 🔍−

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.



Load Facebook Comments (3rd Party Script)

0xReki's Adventures on other Platforms:

Facebook Twitter vk

This page might use cookies to improve user experience. Until you accept the Cookie & Privacy Policy those features are disabled. No cookies will be stored until the policy is accepted.

✘ Accept Minimal Cookies I Want the Best Experience and Accept All Cookies and scripts
Load Facebook Comments (3rd Party Script)