My friend Michael Ross is a musician and he sent me an email with a couple of the songs he recorded recently. I asked him if he would like me to put together a simple web page for his songs so that he didn’t have to send out emails with large attachments, and a week or so later we had a new site up and running for him – www.michaelrossmusic.net. He wanted a page that listed the albums, had links to download mp3 songs, and a way for people to listen to the songs without downloading them. I had used SoundManager 2 previously to have mp3s play on a page, so I knew that it would be a good fit.

I wanted to be able to build a simple page with regular links to the mp3 files and for JavaScript to do the magic of making the songs playable in the browser – this post explains how I made it happen. SoundManager 2 is a JavaScript library built on top of Flash – the music plays through Flash (which has much better audio support than browsers), but everything is controlled via JavaScript. I also used Prototype as a framework to build out the functionality.

Here’s what I did:

1. Created a simple page with links to mp3 files
2. Added a SoundManager handler so that as soon as it loads it instantiates PagePlayer, a JavaScript class I created
3. PagePlayer takes a CSS selector as input (and optionally an options object) and identifies all of the links that match the selector – ‘a.mp3Link’ in this case (all links with the class ‘mp3Link’).
4. For each of the identified links, PagePlayer creates a SoundManager sound object using the link to the mp3, adds a play button just prior to the song link, creates event handlers for the play button and sound object, and stores the song in a hash
5. The event handlers take care of all of the logic: playing songs, making sure that only a single song is playing, changing the state of the button from play to stop

Here’s a current snapshot of the script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

PagePlayer = Class.create({
	songCount: 0,
	songs: new Hash(),
	nowPlaying: null,
	options: null,
 
	initialize: function(selector, options) {
		this.options = {
			imgPath: 'images/',
			imgPlay: 'control_play.png',
			imgStop: 'control_stop.png',
			mp3LinkTitle: 'Download song'
		};
		Object.extend(this.options, options || {});
		$$(selector).each(this.addSong,this);
	},
 
	addSong: function(mp3Link) {
		mp3Link.title = this.options.mp3LinkTitle;
		var songId = mp3Link.identify();
		var soundObj = soundManager.createSound({
			id: songId,
			url: mp3Link.href,
			onfinish: this.finishHandler.bind(this,songId)
		});
		var controlBtn = new Element('img',{
			src: this.options.imgPath + this.options.imgPlay,
			className: 'audioControl'
		});
		mp3Link.insert({before: controlBtn});
		controlBtn.observe('click', this.toggleHandler.bind(this,songId));
 
		this.songs.set(songId, {
			controlBtn: controlBtn,
			soundObj: soundObj
		});
 
		this.songCount++;
	},
 
	toggleHandler: function(songId) {
		var oldSong = this.nowPlaying;
		var newSong = this.songs.get(songId);
 
		if(oldSong) {
			oldSong.soundObj.stop();
			oldSong.controlBtn.src = this.options.imgPath + this.options.imgPlay;
			if(oldSong === newSong) {
				this.nowPlaying = null;
				return;
			}
		}
 
		newSong.controlBtn.src = this.options.imgPath + this.options.imgStop;
		newSong.soundObj.play();
		this.nowPlaying = newSong;
	},
 
	finishHandler: function() {
		this.nowPlaying.controlBtn.src = this.options.imgPath + this.options.imgPlay;
		this.nowPlaying = null;
	}
});

And on the page it is started up as follows:

1
2
3
4
5
6
7
8

<script src="js/soundmanager2-nodebug-jsmin.js"></script>
<script src="js/pagePlayer.js"></script>
<script>
	soundManager.url = '';
	soundManager.onload = function() {
		new PagePlayer('a.mp3Link');
	};
</script>

It’s not the prettiest code, but it gets the job done in 1.58 KB of code and works at least in recent versions of Firefox, IE, Safari, and Chrome. So, if you need to add some mp3s to a page, check out SoundManager 2 – it’s easy to use, well documented, and super flexible…

My good friend Michael’s band Boys on Trial played a live set on Radio One in Chicago. Radio One has posted the entire set, and I’ve extracted the first song for your listening pleasure…so take a listen:

Boys on Trial – Coward or Hero

Or go ahead and download the entire set. They’re great.

I love music, and I love the tools that make it easier and more convenient for me to listen to music. One of the advances that has made music so much more accessible over the past few years has been the advent of mp3s, digital music, and digital music players. I bought a first generation iPod the day they were released for Windows based computers, I’ve since upgraded to a non-Apple mp3 player, and I’ve got a mp3 CD player in my car. While some new technologies can be a burden on their users, digital music technology lets me listen to more music with more choice, and keeps me from listening to the same album over and over in my car due to my own laziness. I’m not a super audiophile, and I tend not to notice the slight degradation of music quality I get from digital music, and what I do notice in inferior sound quality is greatly outweighed by the convenience of it’s portability, searchability, and ease of use. Despite the great conveniences of digital music, there are a couple things that really bother me – they bother more than they should because I think they’re things that wouldn’t be all that hard to fix.

Before I get going on my rant, I should note that my only credentials on this topic are being both a music enthusiast and a computer enthusiast – I don’t know all the details about every digital music file format or player, I just know what I’ve seen in popular applications such as mp3 players, iTunes, and other digital music players…

And then there was silence…

At least there was silence for a couple of seconds. The biggest gripe I have with digital music is that there seems to be no reliable way to control the ‘gap’ between tracks. For many albums or types of music, I don’t particularly care about the gap. For other music, the gap can really take away from the enjoyment. This is most evident is albums where songs blend together with no gaps – this includes albums from The Beatles’ ‘Abbey Road’ to The Red Hot Chili Pepper’s ‘ Blood Sugar Sex Magik’, just about all classical music, and live music recordings. Some applications and mp3 players have settings to let the user control the time between tracks or even the cross-fade between tracks. This really isn’t enough, as the time between tracks changes from track to track. Sometimes I need no space between tracks, sometimes I need the standard 2 seconds, and sometimes I need more. The key is that this is all dependent on the album and how it was meant to be heard. Another important element is that the gap between tracks should be context-sensitive to the album. If a song typically has no gap between it and the next song, should it also have no gap when it is played on a playlist outside of the album? The problem is that there really is no concept of the ‘album’ in popular digital music, but we’ll get to that later.

From Abbey Road to the White Album

My other problem with digital music is that in mp3 players and digital music players, when I look at a list of albums from a band, I see them alphabetically. An alphabetical list of albums makes it easy to find one you’re looking for, but to me, is not the best way to look at albums. I would rather look at albums chronologically – so that when I’m looking at a list of Led Zeppelin albums I see ‘Led Zeppelin I’ before I see ‘Houses of the Holy’, or The Beatles’ ‘The White Album’ before ‘Abbey Road’. This is an unusual problem because our digital music has metadata, and one of those fields is for the year of the music. So why can’t that be used to show a chronological list of albums? I suppose it could, but it would present problems. Let’s say an album has 10 tracks – in the perfect metadata world, all of these will have the same year, so the application or music player could just look at one of the songs and pick the year. In a more complicated world, the songs could have different years marked, or incomplete data – what should the player do in this case? What if we’re looking at a compilation of songs all recorded in different years – should the file’s metadata list the year the song was recorded and released or the year the compilation was released. I would argue that attached to the song should be the year in which it was recorded, while another entity – ‘the album’ – should keep track of it’s own release date.

The Album – The Metadata that Went Missing

So the common thread here is the album. Right now, popular music systems have no real concept of the album – they infer the existence of an album based on metadata attached to each song – an artist name, an album, year, genre, track number, and whole bunch of other fields. As mentioned earlier, this becomes increasingly complex when songs start belonging to multiple albums or playlists, because the songs can only have one value for each of the aforementioned metadata fields. What we really need is a wrapper around all the files in an album that can store some of this information.

Let’s think about this from the technical perspective. If I were to develop a database-based application to store information about my music collection, how would I do it? I would need to create tables for songs, albums, and song/album mappings. Basically, one table would have all the basic information about each song, another table would have the basic information about each album (artist, release date, record company, producer, credits, etc), and another would connect the two other tables – mapping which songs are on which albums and the order in which they are on those albums. If I wanted to go an extra step further, I could add another table to track information about the artist, but that isn’t really essential for most purposes.

Obviously the files that make up the digital music of today are not databases, so the table concept doesn’t directly translate to what can be done in the real world. So if this had to be done in a file-based manner, we could add one small file that has album information and the album/track mapping – similar to a playlist file but with more information. The album’s year would solve my second issue of chronological sorting of albums, and the tracklist within the album file could have information about the space between tracks, solving the gap between tracks issue.

Overall I think this could add to the experience of digital music and make it easier for people to switch over from the physical realm of music to the digital realm. I still love my liner notes and opening up a new album, so I don’t think I’ll go all digital anytime soon, but making the experience of listing to music closer to what I get with a CD, record, or tape player, will certainly make it easier for me to get rid of that CD player in my living room…

The Pixies are coming back to California (woooooo hoooo, wooooo hooooooo). They’re going to play 2 shows in on May 30th at the Warfield in SF…I just have to pray that I can get some general admission tickets because I really don’t want to be sitting up in the balcony for the Pixies.

I saw them last summer when they played the Greek Theatre in Berkeley and it was a great show. I wrote about it here.

Tickets don’t go on sale until the 17th of April, so…shhhhhhh, don’t tell anyone