The Making of Vincent Knobil | MUSIC version 3

This post is going to delve into the gory details. You can cut to the chase and just visit the new version of my music site.

Still here? Proceed at your own risk.

How do you make your music available on the Internet when you’re a geeky songwriter?

Over the years, I’ve made it available on different platforms (Opsound, GarageBand (dead), SoundClick, Viinyl, SoundCloud, BandCamp, Dogmazic, etc., etc.)

These sites all have their pros and cons, and by definition, are impersonal.

So since the beginning of the Web, I’ve tried to serve my music up on my own site.

It started with some Flash players on my first site (over 10 years ago!).

Then, a couple of years ago, I decided to centralize the music that was scattered all over the web on a dedicated music site.

Because I like to design and code websites, I used all sorts of amusing tricks, like a parallax-scrolling background, a fixed logo with different sections sliding into place, an image slider to present song thumbnails, song popups, etc, etc.

My websites are an emanation of my creative self. While I care about usability, I don’t see my sites as mere marketing platforms. They are creations, for better or for worse.

In this case, the result was a bit too much of a (joyful) mess.

Then about a year ago, I built an iPhone web app, Pocket Vince, which uses HTML5 audio (no Flash allowed on iOS). I’ve wanted to redo my “regular” site using the same tech ever since.

So over time, I researched my options, and about a month ago, I took the plunge.

I had to overcome a lot of hurdles :

  • New design (while keeping the best of the v2 site, i.e. the randomized background color and motifs, and the simplicity of Pocket Vince).
  • Easy updating (updating my v2 site and PocketVince is horribly labor-intensive).
  • Less blabla. Direct access to music+lyrics.
  • Permalinks (so users could share links to individual songs). My v2 site was sorely lacking in this respect.
  • Converting all my .mp3 files to the OGG Vorbis format, since Firefox refuses to speak .mp3 (Fucker! And you don’t know how hard it is to find an .mp3 to .ogg converter for Mac).

I knew I could reause the Audio Player code from Pocket Vince pretty much as-is.

The big question was how to store and retrieve the song information (title, lyrics, backstory, cover image, audio file, etc.).

The obvious answer was a CMS of some kind. I used WordPress in the v2 site. But that seemed like overkill. I wanted something simpler (baking sites is all the rage these days).

I decided I would put the lyrics and stories in external files of some kind, which I’d call via AJAX (jQuery load() to be precise).

Then it occurred to me that my little Flash players stored the song info in little XML files. So why not use XML? As I looked into it…


XSLT files are like templates, which are used to specify WHAT XML content to display, and HOW to display it, on the fly.

So this snippet of XML:

	<name>A Great Album</name>
	<description>It really is a great album.</description>
	<name>A Lovely Album</name>
	<description>It really is a lovely album.</description>

Combined with this snippet of XSLT:

<xsl:for-each select="album">
	<h3><xsl:value-of select="name"/></h3>
	<p><xsl:value-of select="description"/></p>

Automagically outputs:

A Great Album

It really is a great album.

A Lovely Album

It really is a lovely album.

Best of all, this combo requires NO DATABASE, and no server-side language (PHP, ASP etc.). Indeed, all modern web browsers speak XML+XSL. So in the same way that your browser displays a pretty page when you feed it an HTML file and a CSS style sheet, it can render XML content processed through an XSL template.

I soon realized that given an exhaustive XML file and the appropriate XSL files, I could :

  • Generate the album+song list on the site.
  • Call up the right lyrics+story when listening to a song.
  • And even generate the playlist of MP3 files for a given album (with a little help from Javascript).

On. The. Fly.

And that’s exactly what I eventually managed to accomplish. No CMS. No database. The site just automagically assembles itself in real time.

If I fix a typo in the XML file, or add a song, boom, the site is updated.

I love this for the same reason real coders probably hate it: NO CODING REQUIRED!

Just markup.

But all along the way, I was confronted with my ignorance, and the fact that nobody on the InterWebs was using this technology in the way I wanted to.

I also needed a javascript (jQuery) plugin to bind XSLs to my XML. I built an entire first working version of the site with a plugin, only to discover that it broke under Internet Explorer 9.

I could go on and on, because I sweat every little detail, but there you have it: the first version of the third version of my music site.

I say first version, because XML+XSL open up many possibilities for additional features.


  • CSS written with CSSEdit.
  • Graphics made and processed with Fireworks CS3.
  • HTML, javascript, XML and XSL written with BBEdit.
  • There are dedicated XML editors out there, but they are HIDEOUS. If and when I do this again, I will buy Xmplify.
  • froogaloop jQuery plugin to control the Vimeo videos.
  • XML/XSL Transform by DAER Systems, a jQuery plugin to handle the XML + XSL binding with JQuery. Many thanks to Jason Iles for his help !

31. December 2011 by sknob
Destination: Geekiness, Multimedia Authoring | Leave a comment

Leave a Reply

Required fields are marked *