You’re reading an article by Jay Robinson, a designer living in California.

Some Notes On iTunes LP

It’s clear that I’m pretty excited about iTunes LP. The “deluxe album” for­mat from the iTunes Store is an attempt to revi­tal­ize music sales by pro­vid­ing an immer­sive dig­i­tal expe­ri­ence com­plete with detailed art rem­i­nis­cent of when peo­ple used to buy records. Feature-wise, an iTunes LP is a DRM–free album in high-quality 256kbps AAC for­mat, along with dig­i­tal extras (visualizer(s), pho­tos, videos and inter­views) wrapped in a cus­tom WebKit-powered site.

This morn­ing I bought Jay-Z’s Blue­print 3, as well as The Doors iTunes LP, and am very impressed. Below I’ve included some screen­shots as well as my thoughts on the experience.

Gen­eral Use

When you pur­chase an iTunes LP, the music files begin down­load­ing fol­lowed by an addi­tional (hefty) file with an “.ITLP” exten­sion. The .ITLP file itself can be over 500MB.

Once you double-click an iTunes LP in iTunes, it takes over your entire win­dow with a WebKit view. A photo fades in and an audio snip­pet rep­re­sen­ta­tive of the album will start to play (about 30 sec­onds). A list of links leads you to the most obvi­ous fea­ture of the iTunes LP: pho­tos, 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 scroll­bars all over my 13″ Mac­Book screen. I switched to a larger mon­i­tor for the screen­shots, so here are some shots of the main features:

iTunes LP Jay-Z Intro Click for full-size.

iTunes LP Jay-Z Lyrics Click for full-size.

iTunes LP Jay-Z Photos Hover for alter­nate image. Click for full-size.

itunes-lp-jay-z-videos Click for full-size.

iTunes LP Jay-Z Videos Hover for alter­nate image. Click for full-size.

Visu­al­izer

A won­der­ful thing hap­pens when you click “Play All” on an iTunes LP — you are treated to a fea­ture I dub iTunes LP visu­al­izer. The visu­al­izer is the “sur­prise and delight” fea­ture of iTunes LP; a cre­ative dis­play of dig­i­tal art.

Jay-Z’s iTunes LP album comes with three dif­fer­ent visu­al­iz­ers that cycle through at mea­sured inter­vals. The ini­tial visu­al­izer shows audio wave­forms. I mis­tak­enly thought the wave­forms were dynam­i­cally gen­er­ated by the music until I watched for a while. Here are the screen­shots of the three visu­al­iz­ers, respec­tively called “Waves”, “Songlist”, and “Puzzle”.

iTunes LP Jay-Z Visualizer Waves Hover for alter­nate image. Click to see full-size.

iTunes LP Jay-Z Visualizer Songlist Hover for alter­nate image. Click to see full-size.

iTunes LP Jay-Z Visualizer Puzzle Hover for alter­nate image. Click to see full-size.

I’ve also included the only visu­al­izer from The Doors album.

itunes-lp-the-doors-visualizer Hover for alter­nate image. Click to see full-size.

How­ever, lis­ten­ing to music in the iTunes LP intro­duces some unfor­tu­nate user inter­face prob­lems. Sim­i­lar to Genius Mixes (also new in iTunes 9) there is no way to ask iTunes to send you to the cur­rently play­ing song. This means that unless you leave the LP view you can­not rate the song or view any other metadata.

This also causes a prob­lem if you leave the iTunes LP inter­face to browse your library, then want to return to the LP. The only way is to select the iTunes LP from your file list­ing and double-click. This results in the iTunes LP site load­ing from the start and you los­ing your place through the album.

For­tu­nately, the usabil­ity issue does not cause con­flicts with the Play Count, which func­tions as expected.

WebKit and iTunes LP Inter­nal Structure

I was very curi­ous about iTunes LP and its use of WebKit so I decided to go root­ing around in the Finder files. Just like iPhone app files (.IPA files in the Finder), I sus­pected that chang­ing the .ITLP exten­sion to .ZIP would reveal an archived folder. I was right; once you change the exten­sion you can browse all the files inside. In fact, you can sim­ply right-click and “inspect pack­age con­tents”, how­ever, it remains to be seen if Apple will take away this func­tion­al­ity in the future. Plus, adding the .ZIP exten­sion allows you to browse the folder with­out a right-click. Here is what the files inside the The Blue­print 3 iTunes LP look like:

Internal Structure of an iTunes LP, Jay-Z The Blueprint 3

The iTunes LP expe­ri­ence is accom­plished with HTML 4.01, CSS and JS. The inter­face feels very Flash-like, but there is no trace of it. The CSS ani­ma­tions are elab­o­rate and smooth. Font files are ref­er­enced with an @font-face dec­la­ra­tion in the CSS but there seems to be lit­tle to no use. Most text, even long pas­sages of lyrics, is rep­re­sented visu­ally with a PNG file. I won­der if they orig­i­nally intended to use font replace­ment for all text, but changed their mind.

Here is an exam­ple the lead me to the above con­clu­sion which I found in The Doors pack­age. The orig­i­nal file was named “song13BackgroundClean.jpg”, but the one used is “song13Background.jpg”.

iTunes LP The Doors font-face Hover for alter­nate image. Click to see full-size.

Per­haps unsur­pris­ingly, most every­thing in an iTunes LP works in the lat­est ver­sion of Safari (4.0.3 at time of this writ­ing) except when some­thing tries to call iTunes (like a movie file). Here is what the index.html file looks like when you open it with Safari:

iTunes LP Jay-Z The Blueprint 3 when viewed in Safari 4.0.3 Click for full-size.

The Doors pack­age was lit­tered with left­overs obvi­ously intended for inter­nal use, such as ref­er­ence images for a com­pleted page and style guides for lay­out. Here is one such image:

memGuide 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, every­thing worked even when de-authorizing my com­puter in the mid­dle of play, as well as remov­ing the ref­er­ence all together. I would like to see if it would be pos­si­ble to roll your own iTunes LP by mod­i­fy­ing the included .PLIST to point to dif­fer­ent sound files.

Con­clu­sion

As a music fan, and as a web devel­oper, I couldn’t be more pleased with the new iTunes LP offer­ing. If your audi­ence is sig­nif­i­cantly Apple-oriented (e.g. a site about Mac rumors or a pop­u­lar iPhone app) this proves that you can pro­vide an incred­i­ble expe­ri­ence using only JavaScript and some pro­posed CSS3 properties.

The visu­al­izer is a fun way to watch your music. And impres­sive; a friend of mine asked, “Is that Flash?” I may learn a thing or two about CSS ani­ma­tion by div­ing into the code and I encour­age you to as well.

Here’s hop­ing 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, con­fig­ure so that “Kind” con­tains “iTunes LP”. I’ve included this because it took me a while to dis­cover what cri­te­ria worked, and I thought I’d save you some time.

iTunes LP Smart Playlists

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