Angular & Node Spotify App Tutorial:

Creating the “Spotify Music Manager” Example Application using CleverStack, AngularJS & NodeJS.

This is the first post in a series that will set out to show you how to build Node & Angular modules for CleverStack; in the spirit of keeping things interesting rather than just building another ToDo App, Blog or Shopping Cart — i’ve decided to instead base this on making what i think is a really cool way to learn Angular, Node, CleverStack, Spotify, API’s, micro-services, background tasks, (and a whole lot more) all while learning how to build modular, robust and scalable applications using Node and Angular.


Here’s a quick rundown on what we need to build, what’s already built and what we want to accomplish “functionality” wise in the modules we are building.

We want our module to allow us to see a list of all of our playlists (any albums, custom playlists, and even your starred music), and provide an easily clickable button to automatically “cache” (download) any track from any album, artist or album/playlist.

The current backend module i have built for CleverStack (to be released very soon with it’s own dedicated blog post) also does calls to get the metadata for every track “cached”, this includes the Clip Art, Artist, Album and Track metadata. FFMPEG is then used to encode the song’s metadata into the files that have been downloaded and streamed into the designated output directory (for instance your iTunes Server’s Music directory) configured,streamed songs into folders that are named based on the artist and then album, with the song’s correctly renamed to what it would be named if you had the original CD.

Each song takes roughly 2 seconds to download and encode, meaning this is a very fast method of getting all the music you ever wanted. If you use a Spotify free account, you can only stream one song at a time — and if you have a Spotify Premium account then you can stream multiple at a time (and of course our NodeJS backend code is fully async so it will download as many as your account allows concurrently, we have all the cpu & network intensive code for streaming songs or making api calls to Spotify in Background Tasks that are being run via the clever-background-tasks module)

An Example file name:
“/Eminem/[2000] The Marshall Mathers LP/19 The Kids.mp3”

What this means is, you are able to “cache” your music locally, extremely fast, in a completely & fully automated manner. Imagine this application periodically running checks of your Spotify playlists, and automatically downloading/syncing any new music you recently starred, or added to one of your Spotify playlists — regardless of what device you were on at the time!

Add in a tiny bit more effort and you could have this whole thing automatically synced to your iTunes Server (running on your NAS for instance) and have that automatically sync all of your music automatically to all of your iDevices including your iPhone and iPad — you would never have to worry about doing anything ever again! well.. other than listening to music of course!


Example use case:
Imagine you liked a new song… with this application you could simply star it on Spotify on whatever device you prefer, and seconds later it is automatically downloaded/cached to your music collection on your computers, phones and tablets.

How cool is that!?

Stay tuned over the next week or two while i prepare the codebase, videos and tutorial blog posts


Oh and before we get started:
Spotify has local caching for Premium Members, and for the most part there are commercial applications/products that already exist in the marketplace, the only reason this is being built is because of:
1) There was and possibly still is no readily and easily available OpenSource solution to “syncing” your music to your iTunes server.
2) Building this correctly, requires the use of things like the Background Tasks from the clever-background-tasks module; which is perfect because:
3) I keep getting asked about things like Background Tasks, module structure, etc etc

UPDATE:

You can get a preview of the NodeJS Backend Module over at Github (https://github.com/CleverStack/clever-spotify-backend)