(IMPORTANT NOTE: Albumist is what I would call an alpha release. I am still working through issues with it, but I wanted to open it up to the community so I could get some more perspective. It has bugs and quirks and isn’t anywhere near as pretty as I’d like when you open the album page…)

Albumist is a discography program which gets its contents dynamically using APIs provided by Freebase and LyricWiki. Users are one click away from adding cover art, editing the lyrics, or making corrections to information about the album and its tracks.

It was written for The Legendary Pink Dots music page, which is a good place to go see a demo and listen to some tunes while you use it. (Since the version which brings in tracks and music was only deployed on Sept 24, 2008… no one’s had a chance yet to go in and start adding the data yet. The Dots have always been experimental, and here’s just another experiment!):

http://legendarypinkdots.org/music

The point is for bands and their fans take control of the management of their discographies on their own website. That way they can control the advertising, and choose their own links for selling albums directly. Hopefully more bands will be interested in helping develop this, so we’ve released Albumist under the Creative Commons Attribution License 3.0. You can download it from GitHub:

http://github.com/hostilefork/albumist/tree/master

To comply with the license terms, please make sure there’s a prominent link to this page (http://hostilefork.com/albumist). That way, people who are interested can learn more about how Albumist works and help improve it. The script puts a link to here by default—but if what I did breaks the visual continuity of your site then please adapt it to a prettier way of linking.

It’s simple to use!

To use Albumist is easy, and it was designed to not have requirements that would make it hard to fit in systems like Joomla! or Wordpress. Its only dependency is the MooTools 1.11 JavaScript library. If you have that loaded in your page, then all you need to do is put the code into a directory where your page can find it. Then, place a div at the part in your file where you’d like the album grid to go. Finally, make a call to the Albumist Display API:

<div id="discography"></div>
<script type="text/javascript" src="albumist.js"> </script>
<script type="text/javascript">
Albumist.displayByBandName(
    "discography", 
    "The Legendary Pink Dots"
);
</script>

That’s the most basic usage, which gives you the default layout. To use the advanced features—like specifying prices, how many rows and columns, or the size of the cover art—is a little more complicated. Rather than try to explain all the options here, the best way to learn about it is to read the latest up-to-date HTML sample file that is in the Git repository, that makes it all clear:

albumist.html sample code

It is not intended to be an online store. Yet your web page can give Albumist prices for any of the music you want to sell directly, using your links. Even though it’s driven by a public database, the band has the say on the official channel of sale, with a “buy now” link that takes visitors to the method of purchase that you prefer.

Things To Consider

Freebase is a public database of information. It is possible that it might be vandalized, and this vandalism would be reflected on the official website for the band. However, just as with Wikipedia, reversing changes is not difficult. A vandal who erases all of a band’s albums would be quickly banned from the service, and the information can be restored from the history by anyone.

Since public databases like Freebase are important in their own right, it doesn’t necessarily make sense to worry about the vandalism. In fact, having the discography on your site reflect the data brings more attention to any vandalism which might have gone unnoticed. As Wikipedia has demonstrated, fans are quick to notice and fix inaccuracies on notable subjects.

Freebase may go down, and during this time the discography would not work on your site. But there are almost certainly weaker links in the chain to be more worried about! Freebase is well-funded and depended on by many other projects, and certainly more reliable than most of the technology that band websites use.

Unlike Wikipedia, Freebase does not require a band or a band’s albums to be “notable” to be included. There should be no worries about the administrators deleting a band due to lack of fame, or an album due to its obscurity. There are probably limits in terms of bad taste on what cover art they’d accept or what track names would push too far… yet this won’t be a concern for most.

Although it is possible that Freebase may go out of business someday and stop offering their services (or charge for them), the data is free. Thus someone else could step in and take their place.

Implementation Details

The code is the result of mooshing together several small JavaScript-based pieces by other authors:

• The Mootools Toolkit: [link]
• Douglas Crockford’s JSON Helper: [link]
• Freebase’s Album Query sample code: [link]
• MOOdalBox Modal Dialog Box: [link]
• Talk On Tech’s LyricsWiki sample: [link]
• Steven Chalmers ScrollFreeze: [link]
• prodigy.com’s Mootools Slide Effect: [link]
• …and other snippets from around the ‘net that I retained links to in the code itself.

Let’s improve Albumist!

Any ideas are welcome! Bugfixes or improvements would be great. Some ideas:

• Internet Explorer isn’t currently working, though it did at one point. I’m unsure what happened, and the debugging tools are very poor for IE.
• I really wanted the UI to do automatic currency conversion using the latest exchange rates, but didn’t get around to it. This XML data source looked promising for implementing it…
• There has to be more thought given to how to make the design work well with a non-white background.
• The current CSS is poorly done and could use a complete makeover, with proper semantics and layout for when an album window is opened.
• I’d like to have next/previous album buttons down next to the “Close” button, the way it is done in Milkbox.
• A strategy for dealing with different versions of mootools is needed. I’d like to use a compatible subset or have some way of detecting the version so it can still be kept as a single codebase.

Leave a comment or shoot me an email if you want to get involved…!