A word on WebTunes — a web-based music storage, coded in 3 days.

July 26, 2013 1:32 pm Published by Leave your thoughts

First I saw this awesome design by Chris Valleskey on Dribble. Then I stumbled upon Audiocogs Aurora.js. And realized this, when combined, can make an awesome thing. Since I had a decent break of about 3 days in my primary work, I decided to try my hand on a webapp that works completely via Ajax and uses a lot of JavaScript, JQuery and PHP (which seem a lot more fun than Objective-C, at least after over 4 years of just the said language), that would be useful for me since I started learning all the web stuff just a bit less than 4 months ago while trying to create Dakimaker. (Sadly, I learned that I can link MySQL tables as master->detail right after I finished these two.)

I must say it turned out quite good, at least I am writing this while listening to it. Not the best, but can save from carrying around a USB hard drive with FLAC rips of your CDs and some occasionally downloaded mp3s.

Get under the break for an in-depth review, a video, and even a demo playlist.

Part 1. The idea

Since, as you may know by now, it’s hard for me to live without music, I need to have access to it everywhere I go. And ‘everywhere’ is, in that case, any place with a decent internet connection.

For a long time what has been serving the music to me was just an Apache file listing.

An Apache file listing of Exit Trance Anime Trance CD 13

An Apache file listing of Exit Trance Anime Trance CD 13

This was quite unusable since not many public PCs have a decent audio player that can handle FLAC or even M4A (most have just Windooze Media). Not to mention I’d rather not leave my music on the random computers I get to work on.

Carrying around a 16GB USB stick was the first step, but it got filled up too quickly. A 30GB Video iPod on Rockbox didn’t last longer, either.

And when summer, the best time for high school students, at least here in Russia, came, I decided that I better get myself productive and write a solution to this problem.

Part 2. The design

A quite common problem for newbie web-devs trying to extend someone's design

A quite common problem for newbie web-devs trying to extend someone’s design

Despite the fact I got to use Chris’ design, downloading a design is just one part of the story. You can’t listen to music with a mockup of iTunes in your browser.

When I was about to start the project, I thought writing a player would be easy since I’m gonna base it off an almost-complete design and complete codec set. It turned out that this statement is only true if what you are gonna write is something like an oldschool tape player — a file selector with three buttons for Prev, Next and Play. Writing a usable player, however, is not quite easy, especially if you do it without any planning. For example, a chicken walks into a bar a user drags a track into a playlist. What do you need to do? Of course, write it to the database. But what if this playlist was playing at the time? Then you need to update the playback queue the right way as well. Not to mention I wanted to make something more usable than a multiple upload field with an album form. It actually turned out it would be better to upload albums as ZIPs while uploading ‘Unsorted’ tracks as single audio files (or it’s at least something that fits me best — not sure of this part actually). So you have to extract a zip into a temporary folder until its contents get assigned an album entry in the database. Then again, what if a registered user throws a php file in his zip and nukes your whole system? Well, shit that is.

Despite the fact that while using a music manager (I don’t think the word “player” suits these beasts), you may think it’s something very simple. However after you use them for quite a long time, you expect same features from all same-looking players, and this is what actually helps when coding a thing like that. You try moving a song into a playlist by drag-and-drop instead of using your hardcore PHP script that takes file paths and spits out an entry in a MySQL table — and you realize you can’t. Then there comes a couple of minutes of googling about making drag-and-drop in javascript, a couple more of making the script less hardcore, and it does work now. You go to sleep, feeling well, but not even noticing you accidentally committed your database password into the git repository of the project, due to the fact it’s roundabouts 4 AM now.

Basically what I saw in my post-3AM dreams during these days

Basically what I saw in my post-3AM dreams during these days

But then you want something different. For example you may give your users some upload space, but since you’re the admin of the server, you may have some music laying around in other folders, and you don’t want to duplicate it into your library folder. Symilnks, of course, do help, but is using PHPMyAdmin and SSH even an option? Obviously it’s not!

And there comes a dialog for importing albums and tracks by symlinks, along with a user editor and a disk space display.

Symlink import dialog in admin mode

Symlink import dialog in admin mode

And finally, after countless hours of coding, it works. Not the best library manager, but for a web version it is quite decent. Enjoy your music and be proud of yourself since there’s not much left to do except debugging before opensourcing your new webapp.

Part 3. The things to come

MOD/XM decoder. Album art viewer. Tag editor. Multiple track selection. Time travelling system. Pretty much anything that will come to my mind. Or whatever you suggest by email since the comments are disabled.

Part 4. Demo!

As I promised, here is the demo video.

And here is the demo playlist, featuring the new awesome track demo by Mels Yang called “A New Beginning”, so check it out!

The source code will be published on my Bitbucket or Github once it’s good enough.

Of course I could just pay for iTunes Match, but installing iTunes on a computer with no admin rights when you’re so tired you just want to browse the web and check out your music seems like a quite non-trivial task.

Tags: , , ,

Categorised in: ,


Leave a Reply

Your email address will not be published. Required fields are marked *