Audio Sample Formatting
I've been spending quite a bit of time deciding how to format the audio samples on this site, and it's not as easy as it looks. There are a number of circumstances to consider, and my links went through a few different generations before I landed on the present format.
Which Media Format to Choose
Quicktime: Optimized for the web (smaller file size), but not all visitors have the quicktime plug-in. Don't want to exclude those who do not.
Windows Media: Also optimized for the web, but again not all visitors will have this plug-in.
Real Media: Personally I don't care for all the extra junk that is installed with the real player.
AAIF or Wav: These allow the visitor to hear the music on his/her computer's default music player, but the visitor must wait for the large file to load before she hears any music.
mp3: This was my choice because an mp3 is a smaller file, and is a universal format.
To Link Or Not To Link
The goal is to make it as easy and as pleasent for the listener as possible. The visitor should be able to click on the title of the song and hear music without having to bother with the mechanics of links or redirects. When done with one audio sample, the visitor should be able to just click another title to hear the next sample, then another, then another, etc. Therefore the nature of the link to the music file should not forward to another page.
You might try the old "target=blank" parameter in your html link, which will force the browser to open a new page, but in my opinion, closing those resulting pages is just more bother than I care to subject my guest to. Furthermore, It might actually discourage the visitor from clicking on more titles. Also, remember, there are many types of browsers, including explorer, safari, netscape, opera, AOL, and firefox, to name a few. The "target=blank" tag could have unexpected results depending on the user's browser and other personal settings.
I decided to use java to open the file as if it were a pop-up window when the title is clicked. This allows the visitor's default player to open and execute the music file. The listener should already be familiar with his computer's default player, so we're not forcing our guest to download any player that he/she may not want to download. Here's the code:
And it looks like this:
"Into The Gallery"
Go ahead, put your cursor over the text and click on it.
Text Formatting
You might notice a couple of things about the "link" text. First, it doesn't look any different that any other text on the page. There is nothing to inform the visitor that it is actually a link. Secondly, the cursor doesn't change when it hovers over the text. Again, there is nothing prompting the listener to click on it to hear the sample. A little bit of html code will fix that.
First let's format the text. My style sheet instructs the other links to appear maroon, or more specifically "font color="#990000". A simple font tag around the text changes that. Also, I wrap the text in underline tags. So now the code looks like this:
And the link looks like this:
"Into The Gallery"
That looks more like a link. Yet, notice how the cursor behaves over the "link". A hand pointer would be another indication that it is clickable. A simple p class in the style sheet fixes that:
Then, wrap your java in the p tags like this:
And now the cursor behaves the way we want it to:
"Into The Gallery"
Why not just create a new class in the style sheet?
Good question, and the answer is simple. Specific blog entries will have specific needs. For example, if I want to have regular text adjacent to an audio sample link (which I do in the "Charlotte's Web" entry in the audio samples category), I'm going to have to put tags around individual words anyway. It's faster to just copy the code from another link and change the two or three parameters to customize the link to the specific audio file. I use the entire code on each link to keep it modular.
In Conclusion
So now you have the incantation I use to put the spell on the audio sample links. Use it if you want to. If you can see a more efficient way to do the same thing, put that in a comment and share it with the world, ok?
One final note. I considered embedding the files in the html page itself, and had no luck. It was too clunky, and with all that imbedded data, the page took a long time to load. If you have a better way of doing it, share with the group.