There’s nothing quite as exciting as an album premiere. As a fan, it will be the first time you’re able to listen to your favorite band’s new record. And as a band, you’ll finally be able to hear what your fans think of all those late nights in the studio. But what makes a good album premiere online?

Fans are looking for a very simple, aesthetically pleasing, premiere player that they can listen to from anywhere. Bands need a structure that maximizes both the viral reach and sale of the record. We think we’ve created a nice mix of both. It’s called Premiere, and Queens of the Stone Age (+ their killer new reissue) were rock enough to be our test subject in this demo:

Simple, Intuitive, ROCK… Here’s what’s going on:

Overview

Design

The design and controls of the app are kept very simple to maximize accessibility, and nothing says simple like a big blinking play button smack dab in the middle. Once clicked, the artwork will slide to the left while the tracklist becomes revealed to the right. Sexy? You know it. Fans can click each of the track titles to play/pause specific tracks and click anywhere on the waveform to seek.

Social

In addition to the nicely placed Tweet & Like buttons, Premiere also includes a SoundCloud powered comment bar which will display all timestamped comments as your album plays. Clicking any empty space on the bar will send the fan over to SoundCloud so they can voice their own opinion. A combination of these three will greatly increase viral activity around the record.

Accessibility

Premiere is smart enough to understand your browser/os environment and will serve up Flash or HTML5 powered audio accordingly. What…? That means it works on iPhones, iPads, and on your Google TV!

Function

The footer area contains sections both on the left and right that can be used to include a link to Purchase the record, Enter your website, or Visit your Sound profile. It’s up to you!

Installation

Basic

Grab this zip and follow the 5 steps within the index.html source code. That’s it!

Just make sure to host the file on your server and include/link to the provided swf files where stated in index.html.

Expert

Clone the project on github and push a new version using Heroku.

Customization

Basic

The default version of this app is styled like the QOTSA version demo’d above. The change the appearance simply grab a copy of the theme.css file and get creative. You can also overwrite styles directly in the index.html where marked.

Expert

For rapid theme deployment, we’ve created a Sassy CSS sheet on github. Adjusting the variables at the top of this file will quickly style your app.

Thanks!

Premiere is already being used by some great artists like QOTSA and Saliva. If you have have one to add to the list, a suggestion, or a bug, please send me an email or contact me on Twitter @leemartin

March 15th, 2011 API, premiere app