Wednesday, September 6, 2017

Mixtape!


I'm very excited to show you my latest creation - Mixtape!

Mixtape is an idea I've had on my mind for quite a while, it's a web app that allows you to create and share a playlist in real-time. Perfect for house parties or the office, the idea is that anyone who joins your station can add songs to the playlist, so you won't ever need to beg the DJ to play your song, it's a new form of music democracy!

It works like this: you open a station and then share it with your friends. You can do this by either giving them the 4 digit code, a link and even by a QR code :) Once they join they can add songs and take part in the DJing experience.

So no more nervously asking for your fav 80s song, or pestering the DJ until they listen to you - now you just add your song to the playlist, sit back and chill.

Mixtape works everywhere - at home, on your roof terrace, in a bar, in a club/ Just grab the station code and start adding/ Oh, and you can view the earlier songs on the playlist too, so no more need for Shazaam :)

Techincal stuff:
Mixtape was created using Vuejs, Node, Express and a mix of Javascript libraries, it was very important for me to make the user experience rapid, no login (which is annoying for the user) and no user database (which is a lot of work to maintain), all the data is cached on the server in a Javascript object, users are identified using FingerprintJS, the only reason i have any identification at all is to prevent users from spamming the station with songs, each user have to wait 90 seconds before adding another song to the list.

Currently i'm using Heroku's free tier server so the server will reset after some time when unused, clearing all the old stations.

Client / Server communication is implemented using Socket.IO which makes everything work super fast, when adding a song to the playlist all clients will have their list updated immediately which is really cool.

Mixtape also has a very cool fader, i made it using 2 youtube players imposed one over the other, fading in the volume and the opacity of the players.

You can even fork the source code here :) Enjoy!