Anchors and Clickable Links

Playing Audio (Sound) Files

Browsers do not play audio files, but they do send them to whatever software program normally plays music files on the computer. Thus the results are not completely predictable. The quality of the sound will vary with the client's software, sound card and speakers. So will the presentation of the music player.

Audio files can be midi files, mp3 files or wav files. Midi files are instructions to play certain sounds on a digital keyboard. Mp3 and wav files are representations of actual sounds played by an instrument. Consequently, midi files lack the subtlety which can be achieved with mp3 and wav files. On the other hand, midi files are usually several hundred times smaller than mp3 or wav files.

There are two ways to place audio files in a web page.

with an <a> (anchor) tag,
with an <embed> tag.

Opening an Audio File with an Anchor Tag

Audio files, like any other file, can be opened with an anchor tag. The file begins to play when the link is clicked.

<a href="/mus/ariosova.mid"
   target="musicWindow"
   onclick="setTimeout('window.focus()',100)">
J.S. Bach, Ariosova
</a>

The href attribute is set equal to the name and address of the audio file.
If you do not want the music file to open in the current window, you can set the target to another window. This will bring up the music window on top of the current window, since browsers assume that we like to look at what we click on.
If you want to continue looking at the current window, a statement such as onclick="window.focus()" might keep the current window at the top.

J.S. Bach, Ariosova

Opening an Audio File with an Embed Tag

Use of the <embed> tag embeds a music player in the page. This method of opening a music file gives more options than the <a> tag.

The volume can be preset.
The autostart attribute allows play to start when the page is loaded, or at the user's option.
The loop attribute allows for continuous play of the piece.

A file opened with an embedded player will only play so long as the particular page it is embedded in is open. This can be taken into consideration, in deciding where to embed music players.

<embed src="/mus/brahmsLullaby.mid" id="tune" 
  autostart="false" loop="false" 
  width=240 height=48 
  volume=50>

Brahms, Cradle Song

Play Lists

Play lists permit you to play more than one audio file at a time. The simplest format for play lists is the m3u file.

An m3u file is just a list of the audio files to be played, together with their addresses, if different from that of the m3u file. The file name is given the extension '.m3u'. Here is an example:

abcd.mid
loveIsAMany.mid
gettingToKnowYou.mid
cockadoo.mid

M3u files can be played using either an anchor or embed tag. When using an <embed> tag, if autostart="false", the play button may need to be clicked for each new song to begin playing. Here are two playlists, one embedded, and one in an anchor link.

Playlist

Problems

The largest problem that has arisen for me, is with the music players on my computer. Different ones seem to arise at random. Thus embed tags on this page have called up a Windows Media Player, and a Quick Time Player. Quick Time does not work well with midi files. Sometimes an m3u file will call up iTunes, when it is not needed.

Sometimes a play list won't work because my Windows operating system blocks it from downloading files.

A very much rarer problem would occur if the server didn't send the mime type of the particular audio file being used. Without a mime type, the browser would not know that the file was a music file. A listing of different kinds of audio files and their mime types is available at Mick Wood's website.

Resources

Javascript Program for Interactive Playlists

z-index