lain-e / minimal-audio-visualizer Goto Github PK

This audio visualizer makes a real-time frequency and time-domain analysis information. Have you ever watched NCS videos? Do you like watching Waves dancing on your screen while listening to music? Well, now you can do it.

Enjoy your own music with Minimal Audio Visualizer. Simply play music and open https://amanraj1608.github.io/Minimal-Audio-Visualizer/

Code have explanations and easy to understand. Feel free to add a feature and make a PR.

Caution: Don't increase the fftSize greater than 2^12 unless you have Mac Cheese Grater 😆

• Add Button to add control number of bars.
• Add more Designs

I invested some time reading MDN docs and found this AudioContext API having lots of methods that musicians will love to try.

Using AnalyserNode we take the generated data, process it, and create audio visualizations.

The AnalyserNode.fftSize property is an unsigned long value and represents the window size in samples that is used when performing a Fast Fourier Transform (FFT) to get frequency domain data.

There are also much more things AudioContext which can be used used like :

• GainNode - Changing the volume of a sound
• createBiquadFilter - Applying a simple filter effect to a sound and many more.

I found these MDN links useful

• https://developer.mozilla.org/en-US/docs/Web/API/AudioContext
• https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode
• https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/fftSize
• https://stackoverflow.com/questions/14789283/what-does-the-fft-data-in-the-web-audio-api-correspond-to

Made with ❤️ by Aman Raj