I stumbled upon the buzz around NodeJS and cool projects and libraries being discussed by developers around the globe.
So, as a newbie developer, I was curious to learn and try out the JavaScript-based server-side platform. I don’t have a web app in mind however I wanted to build a desktop program.
So the idea of an audio player came to my mind, yes I know there are at least hundreds of audio player out there which does the job far better than mine, however, that’s not my objective in the first place I just want to learn a new platform and build something useful, maybe optimize the performance later on.
So, the basic idea was to build something which will have play/pause, forward and backward buttons. An album art would have been cool however I had no idea how to read the ID3 tags from an mp3 file in JavaScript. Next, a playlist would be a cool feature too, and that’s it if I could make this much possible it would have been great.
As this was a desktop application in JavaScript so NW.js or Electron were my two choices, I went with electron as people are discussing how cool the library is, so I went with the flow.
I wanted an audio visualizer in my player as my initial computer music experience was in Winamp and really liked the software. So I wanted something similar to that.
The Web Audio API has the AudioAnalyser node which is required for the visualizer as it provides the frequency or time domain response in an array of provided fft size. For my app, I choose 128 as a bigger number resulting in higher floating point operations on the CPU and might cause lag during playback.
Howler.js is a great library that provides a wrapper around the audio api either in Web Audio API or Html5 for fallback purposes.
The ID3 tag I mentioned earlier can be read using jsmediatags library available in npm which let me extract the album art, artist name, and track details.
The intermediate result looks like as following:
The source code is available on GitHub at:
Feel free to fork and add features and improve the project.
If you find this article helpful please feel free to clap or follow me this will inspire me a lot!
If you want to support my efforts, please buy me a coffee!
