Those damn Muses. First, they got me to create a site for my music, which was scattered all over the Web.
This time, they got it into their pretty little heads that I should create an iPhone-optimized version (because my particular muse, wanted « Vincent in my Pocket » she said, and she happens to own an iPhone).
Muses tend to be pretty insistent and convincing creatures, so I thought « what the hell », there’s no harm in looking into the matter, right?
WRONG!
I quickly found out that there are several JavaScript/CSS bundles that simplify the gruntwork and handle basic features.
iWebKit for instance will let you get an iPhone-optimized website off the ground pretty quickly. I tried it, and it worked as advertised.
But I’m a perfectionist (or an idiot if you prefer), and I knew that one could code iPhone Web Apps (as opposed web-sites), that behave a lot like native iPhone apps.
jQTouch is a prime contender in this space. And that’s what I went with.
I’m only a Sunday programmer, but again, I had something basic working fairly quickly. Yet as any programmer knows, the devil is in the details.
Initially, I thought I’d let the user click on a song, which would launch the standard iPhone media-player (this worked in iWebKit). I quickly discovered that for whatever reason, jQTouch didn’t allow that.
I therefore delved into the new HTML5 audio spec, and again, had something basic working in no time. But when I started organizing songs into albums, the behavior of the audio was erratic and buggy. It would sometimes cut off when I changed screens, sometimes not. I spent hours and days on this bug, in total OCD mode. I tried several GitHub forks of jQTouch, to no avail, and in utter frustration and despair, just gave up on the whole thing.
The muses were disappointed, but they were also relieved, after hearing me bitch the whole time.
Unfortunately, the damn thing was still simmering in the back of my mind, and one night, I actually dreamt of a solution to my bug. It turned out it didn’t work, but as I was fucking with the code trying to do something totally unrelated, the audio bug VANISHED. I quickly understood why, and recognized that I had actually been close to fixing it dozens of times.
Victory was at hand.
I had a nice beta, except for one, last, pesky detail.
When you click on an item in jQTouch, you get a nice, smooth, sliding animation into the next screen, just like in native apps. But after entering more songs into the beta, I soon became obsessed with an annoying jump to the top of the current screen before sliding into the next one.
Here again, I spent a crazy amount of time trying to fix it, which I finally did, by borrowing bits of code from different development versions of jQTouch. (It is ironic that while the sliding animation is a big jQTouch selling point, none of the versions actually get it quite right. For more details, look here).
The end-result is something that feels solid when you save a Web Clip to your iPhone home screen, and a little flakier but pretty damn stable if you just run it in Safari.
You can try it here.
If you don’t have an iPhone handy, it works well in Safari for Mac. For some reason, the jQTouch sliding behavior doesn’t work in Chrome (Mac), even though it uses the same browser engine as Safari. It won’t work in Firefox, because it only supports the .ogg audio format in its implementation of HTML5 audio. I don’t know and don’t care if it works with any version of Internet Explorer. It might even work on some Android phones. No promises, but feel free to let me know.