"I want my sites to look Safari in Safari, and Safari in every other major browser out there."

It’s clear that I’m pretty excited about iTunes LP. The “deluxe album” format from the iTunes Store is an attempt to revitalize music sales by providing an immersive digital experience complete with detailed art reminiscent of when people used to buy records. Feature-wise, an iTunes LP is a DRM-free album in high-quality 256kbps AAC format, along with digital extras (visualizer(s), photos, videos and interviews) wrapped in a custom WebKit-powered site.

This morning I bought Jay-Z’s Blueprint 3, as well as The Doors iTunes LP, and am very impressed. Below I’ve included some screenshots as well as my thoughts on the experience.

General Use

When you purchase an iTunes LP, the music files begin downloading followed by an additional (hefty) file with an “ITLP” extension. The ITLP file itself can be over 500MB.

Once you double-click an iTunes LP in iTunes, it takes over your entire window with a WebKit view. A photo fades in and an audio snippet representative of the album will start to play (about 30 seconds). A list of links leads you to the most obvious feature of the iTunes LP: photos, videos and lyric views.

The LP frame seems to have a width and height of 1280×720. This is nice, but means I get ugly scrollbars all over my 13″ MacBook screen. I switched to a larger monitor for the screenshots, so here are some shots of the main features:

Click for full-size.

Click for full-size.

Hover for alternate image. Click for full-size.

Click for full-size.

Hover for alternate image. Click for full-size.

Visualizer

A wonderful thing happens when you click “Play All” on an iTunes LP — you are treated to a feature I dub iTunes LP visualizer. The visualizer is the “surprise and delight” feature of iTunes LP; a creative display of digital art.

Jay-Z’s iTunes LP album comes with three different visualizers that cycle through at measured intervals. The initial visualizer shows audio waveforms. I mistakenly thought the waveforms were dynamically generated by the music until I watched for a while. Here are the screenshots of the three visualizers, respectively called “Waves”, “Songlist”, and “Puzzle”.

Hover for alternate image. Click to see full-size.

Hover for alternate image. Click to see full-size.

Hover for alternate image. Click to see full-size.

I’ve also included the only visualizer from The Doors album.

Hover for alternate image. Click to see full-size.

However, listening to music in the iTunes LP introduces some unfortunate user interface problems. Similar to Genius Mixes (also new in iTunes 9) there is no way to ask iTunes to send you to the currently playing song. This means that unless you leave the LP view you cannot rate the song or view any other metadata.

This also causes a problem if you leave the iTunes LP interface to browse your library, then want to return to the LP. The only way is to select the iTunes LP from your file listing and double-click. This results in the iTunes LP site loading from the start and you losing your place through the album.

Fortunately, the usability issue does not cause conflicts with the Play Count, which functions as expected.

WebKit and iTunes LP Internal Structure

I was very curious about iTunes LP and its use of WebKit so I decided to go rooting around in the Finder files. Just like iPhone app files (IPA files in the Finder), I suspected that changing the ITLP extension to ZIP would reveal an archived folder. I was right; once you change the extension you can browse all the files inside. In fact, you can simply right-click and “inspect package contents”, however, it remains to be seen if Apple will take away this functionality in the future. Plus, adding the ZIP extension allows you to browse the folder without a right-click. Here is what the files inside the The Blueprint 3 iTunes LP look like:

The iTunes LP experience is accomplished with HTML 4.01, CSS and JS. The interface feels very Flash-like, but there is no trace of it. The CSS animations are elaborate and smooth. Font files are referenced with an @font-face declaration in the CSS but there seems to be little to no use. Most text, even long passages of lyrics, is represented visually with a PNG file. I wonder if they originally intended to use font replacement for all text, but changed their mind.

Here is an example the lead me to the above conclusion which I found in The Doors package. The original file was named “song13BackgroundClean.jpg”, but the one used is “song13Background.jpg”.

Hover for alternate image. Click to see full-size.

Perhaps unsurprisingly, most everything in an iTunes LP works in the latest version of Safari (4.0.3 at time of this writing) except when something tries to call iTunes (like a movie file). Here is what the index.html file looks like when you open it with Safari:

Click for full-size.

The Doors package was littered with leftovers obviously intended for internal use, such as reference images for a completed page and style guides for layout. Here is one such image:

Click for full-size.

DRM

I didn’t find much in the way of DRM on the iTunes LP. Though your iTunes Store Account is recorded inside the PLIST file, everything worked even when de-authorizing my computer in the middle of play, as well as removing the reference all together. I would like to see if it would be possible to roll your own iTunes LP by modifying the included PLIST to point to different sound files.

Conclusion

As a music fan, and as a web developer, I couldn’t be more pleased with the new iTunes LP offering. If your audience is significantly Apple-oriented (e.g. a site about Mac rumors or a popular iPhone app) this proves that you can provide an incredible experience using only JavaScript and some proposed CSS3 properties.

The visualizer is a fun way to watch your music. And impressive; a friend of mine asked, “Is that Flash?” I may learn a thing or two about CSS animation by diving into the code and I encourage you to as well.

Here’s hoping that square blue badge shows up in the iTunes Store a lot more in the future. iTunes LPs are a really fun way to enjoy your favorite albums.

###

P.s. To make a Smart Playlist of all your iTunes LPs, configure so “Kind” contains “iTunes LP”. I’ve included this because it took me a while to discover what criteria worked, and I thought I’d save you some time.

Short URL: http://jwr.cc/x/3

At a Special Media Event on Wednesday morning, Apple unveiled the latest iPods along with a new version of iTunes, version 9.

Apple revitalizes their iPods every year, so this was not unexpected. However, what surprised me was what I first attributed to idle commentary: the redesigned iTunes Store and new iTunes LPs render in WebKit.

Some may overlook this detail, but keep in mind Apple has always used iPods+iTunes to push their digital agenda. And the push for WebKit will be no different.

The first iPod and iTunes combination on Windows opened up QuickTime for millions of users. Now it is a healthy competitor for web media, right up there with Flash. (Remember when music and videos on the Web would occasionally pop up in Windows Media format? Yuck.)

Today, MobileSafari on iPhone provides users with a WebKit-powered “killer app” that makes people actually want to browse the web with their smartphones. Apple’s iPhone OS accounts for an astounding two-thirds of mobile web traffic. And the competition has taken notice: in August RIM acquired Torch Mobile, hoping to bring the WebKit experience to BlackBerries.

The possibilities with iTunes LP are really terrific. The announcement led Engadget frontman Joshua Topolsky to proclaim “Apple has officially reinvented the 12-inch.” Apple is constantly setting design trends and iTunes LPs will be no different. I can already imagine a swarm of imitations from devoted music fans flooding the net with intricate tributes to their favorite artists that render best in WebKit browsers. Not to mention what iTunes LPs may look like on your 50″ (Apple) HDTV.

While most PC users may have never heard of Safari for Windows, iTunes will soon establish a record amount of computers on which WebKit is the conveyor of premium web experience.

It won’t be long until WebKit rules the PC world too.

###

Short URL: http://jwr.cc/x/2

WebKitBits:

Wishing Line has released an open-source TextMate bundle which assists in writing WebKit specific CSS3 properties:

The bundle, which currently contains nearly every new -webkit-prefixed property currently listed in Apple’s Safari/Webkit documentation along with a few snippets of code related to creating and using offline SQLite databases in Webkit is available via the project’s Google Code repository…

Anybody know how to make this for Coda?