Music Tutorial

I've now talked about various methods for putting music on a page. There are two basic alternatives:

1. embed and/or bgsound (or object).
   • If you want music to autostart, you have to use this method.
   • The music belongs to the page, and stops when the user moves on to another page.
2. "a href" with or without target.
   • The user has to take action to make the music start.
   • The .mid file is not downloaded until the user asks for it, so he doesn't have to wait for it to download if he doesn't want to listen to it.
   • The music can be started in a separate browser window so that it doesn't stop when the user moves on.
   • Unfortunately, various differences between browsers and plugins make this method very unreliable.

My personal preference is to not use autostart. I don't want to subject the user to music that he might not like. I also want to offer the user a choice of songs to listen to. And I want the user to be able to start music that will continue playing as he moves around within the site. So the "a href" method is the method that appeals to me the most.

To get around the problems that occur when an a href refers directly to a .mid file, I create a separate HTML file that contains an embed or bgsound. My a href loads the HTML file rather than the .mid file.

I had to decide whether to use just an embed - leaving IE 2 and most IE 3 users with no music - or to use an embed and a bgsound. As I've shown on the last couple of pages, there's no perfect way to include both. If you put noembed ... /noembed around the bgsound, some IE 3 users won't hear the music. If you omit the noembed and /noembed, IE 4+ will play both.

To try to make things work with as many browsers as possible, I have created two HTML files for each .mid file: one that includes just an embed and another that includes just a bgsound. Then I use whichever one is appropriate for the user's browser.

There are two ways you can select which HTML file to load:

1. You can use JavaScript to detect what browser the user is using, and select the HTML file based on this.
2. You can have two links on the page and let the user choose the one to use.

To make things as easy on the user as possible, I use the JavaScript method on most of my pages. Unfortunately, this means that you cannot play the music on my pages if your browser doesn't support JavaScript or if you have JavaScript disabled. In fact, I generate the little table that contains the music selections by using JavaScript, so if you don't have a JavaScript-enabled browser you won't even see the music option.

On my music list page where I show all of the selections, I don't use JavaScript. I provide separate links for different browsers and let the users click on the appropriate link. This page is usable even if JavaScript is disabled.

I include a target attribute with the a href link so that the HTML file with the music doesn't overwrite the page currently displayed. I have placed my site in frames, and have an invisible frame named "music", and I use target="music" so that the HTML file is loaded into this invisible frame. The user can right-click on the link and choose "open in new window" to open a new window instead - allowing him to have access to the console (if he's using IE 2 or 3, there won't be a console since bgsound is used).

The user can choose to visit my site without using frames. In that case, the target="music" will cause a new window to open.