O'Reilly Hacks
oreilly.comO'Reilly NetworkSafari BookshelfConferences Sign In/My Account | View Cart   
Book List Learning Lab PDFs O'Reilly Gear Newsletters Press Room Jobs  

Buy the book!
Yahoo! Hacks
By Paul Bausch
October 2005
More Info

Visualize Your Music Collection
Use the Yahoo! Music Engine API to find out which artists appear most often in your collection
The Code
[Discuss (0) | Link to this hack]

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 .


You can see the most popular photo tags on Flickr in this format at http://www.flickr.com/photos/tags.

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.

If you're familiar with writing JavaScript for web pages, you'll find writing YME plug-ins fairly painless. In fact, Yahoo! has a page specifically for web developers, explaining how to use HTML and JavaScript to write plug-ins for YME (http://mep.music.yahoo.com/plugins/docs/webquickstart_page.html).

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:

	Windows Registry Editor Version 5.00

	"URL"="file://C:\\path to YME\\Plugins\\artistCloud.html"
	"Description"="Display a list of artists as a tag cloud."
	"BitmapFile"="C:\\path to YME\\Plugins\\artistCloud.bmp"

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.


As you might expect, a number of people are creating plug-ins and sharing them with the world. Yahoo! has an official unofficial site for sharing plug-ins at http://plugins.yme.music.yahoo.com. One of the plug-ins available at the site, TraxStats by Larry Wang (http://plugins.yme.music.yahoo.com/archives/2005/03/traxstats.html), can help you gather statistics about your collection.

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:

	body {
		font-family:Tahoma, Verdana, Arial;
	.tag {
		margin-bottom: 10px;
		padding: 5px;


	// 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 
	var artistFieldName = mediaDB.Description.GetPredefinedName(METADATA_

	// 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 
	// (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>" );

O'Reilly Home | Privacy Policy

© 2007 O'Reilly Media, Inc.
Website: | Customer Service: | Book issues:

All trademarks and registered trademarks appearing on oreilly.com are the property of their respective owners.