Visualizing an entire music collection has never been easy. Whether the music is in stacks of vinyl records or in racks full of CDs, it's tough to get a picture of all of the artists, albums, and genres that are so unique to each of us. Moving music from the physical world to the digital world of computers has helped, because digital formats can store information about albums and artists that can be extracted and analyzed.

Figure 1. Yahoo! Shopping wish list email

This hack helps you visualize your virtual music collection by showing you a list of artists in different font sizes: the larger the font, the more tracks you have by that artist. With this approach, you can see at a glance whether you have more tracks by Kraftwerk or The Propellerheads, and which artists you have the most tracks from.

Using different-sized fonts to represent popularity is sometimes called a tag map and was pioneered by the photo-sharing site Flickr .

TIP

This hack creates a tag map–like interface for the artists in your music collection by tapping into the Yahoo! Music Engine.

Yahoo! Music Engine

The Yahoo! Music Engine (YME) is a free music player for Windows. It's available for download at http://music.yahoo.com/musicengine. If you already use WinAmp or iTunes, you'll find the YME very familiar, and the controls should be intuitive. You can use it alongside your current player or use YME exclusively. If you already have a collection of music files on your computer, you can import them to YME by choosing File → "Add a Folder to My Music." Once your music has been imported, you can click My Music on the left side and see all of the tracks in your collection.

One feature that separates YME from the pack is its plug-in architecture operating behind the scenes. A plug-in is a bit of code that adds a feature to an application that wasn't originally built into the system. Yahoo! has made plug-ins fairly easy to write by making their API available through Java-Script. And because YME contains a web browser, it's possible to write a web page that can control and interact with YME through scripting.

The following code is a sample plug-in that you can build and install for YME that helps you visualize the artists in your music collection by popularity.

Running the Hack

Browse to the directory where you installed YME (usually C:\Program Files\Yahoo!\Yahoo! Music Engine) and save artistCloud.html to the Plugins directory.

All YME plug-ins are added via the Windows Registry, so you'll need to add a Registry key that defines your plug-in. The following Registry file code will add the necessary information to your Registry. Create a file called YME_artistCloud.reg with the following code and be sure to add the correct path to your YME installation:

Note that there's a setting for BitmapFile that points to artistCloud.bmp, but the file won't exist unless you create it. BitmapFile specifies a 16 x 16 pixel icon for a plug-in, and you'll need to create your own icon and throw it into the Plugins directory if you want a visual ID for your plug-in.

Save the Registry file and double-click the file to add the Registry settings. You'll need to completely restart YME, so click its icon in the system tray and choose Exit. Once it's restarted, you should see the option ArtistCloud in the right column. Click it, and you'll see a list of your artists like the one shown in .

The ArtistCloud plug-in gives you a new way to visualize your music collection, and you can see at a glance which artists created the most tracks in your collection.

Hacking the Hack

By slightly tweaking the script, you can create a similar tag cloud for the various genres in your collection. Create a copy of artistCloud.html called genreCloud.html. Edit it to change the value of METADATA_ARTIST to 9, like so:

var METADATA_ARTIST = 9;

In reality, the number 9 refers to the API variable METADATA_GENRE, and this little tweak is fast, but it doesn't make for readable code. Copy the new file to the YME Plugins directory.

TIP

Figure 2. A cloud of artists in Yahoo! Music Engine

Likewise, copy YME_artistCloud.reg and edit the file so that every reference to ArtistCloud becomes GenreCloud. Name the file YME_genreCloud.reg and run the file. Restart YME, and you should see the GenreCloud plug-in, which you can click to see if Rock beats out Country in your collection, and if Electronic music is more prevalent than Punk.

Once you download and install the plug-in, you can get some quick reports about your collection. shows the number of songs for each artist in a list.

YME is making plug-in development easier for developers and designers, and this might bring about entirely new ways for us to visualize our personal music collections.

Figure 3. Viewing the number of songs per artist with TraxStats

The Code

The code for this plug-in was written by Dave Brown at Yahoo! and is a standard HTML page with JavaScript. The script queries the YME database, gathering a list of the artists in your library. From there, the script counts how many tracks you have from each artist and displays the artist names in the appropriate font size.

To get started, save the following code to a file called artistCloud.html:

<html>
<head>
<style>
body {
background-color:#fff;
font-family:Tahoma, Verdana, Arial;
color:#354251;
}
.tag {
margin-bottom: 10px;
padding: 5px;
}
</style>
</head>
<body>
<script>
// This YME plug-in looks through a music library and prints the names
// of the artists in a font which is proportional to the number of songs
// which are by that artist in the library.
//
// by Dave Brown at Yahoo!
var minFontSize = 8; // minimum font size in pixels
var maxFontSize = 24; // max font size in pixels
var METADATA_ARTIST = 0; // you should really get this constant from yme.js
// available from the Developer SDK.
// Obtain YME's media database which holds the library of tracks:
var mediaDB = window.external.MediaDatabase;
// Get the string name of the artist field, which is used in our database
queries:
var artistFieldName = mediaDB.Description.GetPredefinedName(METADATA_
ARTIST);
// Get a listing of all unique artist names:
var artistNames = mediaDB.GetUniqueIndexValues(artistFieldName);
var numArtistNames = artistNames.Count;
// For each artist, get a count of how many tracks are by that artist,
// and store it in our array…like a histogram.
// Also store the maximum value we encounter, so we can normalize
everything.
// (We do normalization because some people may have a large variance of
// tracks per artist, and others a small variance.)
var tracksPerArtist = new Array(numArtistNames);
var maxTracksPerArtist = 0;
for ( i = 0; i < numArtistNames; ++i )
{
// Get the # of objects in the database for each artist:
var objectsForArtist = mediaDB.IndexQuery( artistFieldName,
artistNames(i) );
// Remember this…
tracksPerArtist[i] = objectsForArtist.Count;
// Do we have a new max?
if ( tracksPerArtist[i] > maxTracksPerArtist )
maxTracksPerArtist = tracksPerArtist[i];
}
// Print the artists…
for ( i = 0; i < numArtistNames; ++i )
{
// Set the font size
var fontSize = minFontSize + Math.floor( maxFontSize *
(tracksPerArtist[i] / maxTracksPerArtist) );
// Print the artist:
document.writeln( "<span class='tag' style='font-size:" + fontSize +
"px'>" + artistNames(i) + "</span>" );
}
}
</script>
</body>
</html>