The Vision Team: Music Tools

[ Go Home | General Tips | MIDI Links ]

Load And Play On Demand
Autoload, Play On Demand, Same Page
Autoload, Play On Demand, Separate Page
Autostarted Background
Autostarted Background, With Control

This page demos the use of various MIDI controls and points out some common design problems. Feel free to use any of the code on this page -- just use the [ View | Source ] command on your browser, then cut and paste the HTML fragment that meets your design need.

General Tips

Don't forget that not everyone has multimedia computers, so many visitors will never hear your precious creation.
If you autoload a music file, try to place it low on the page so visible content will appear first. Otherwise people won't wait around for the show if it takes forever to load.
Files don't need to be large to be effective. We've included several small (under 20K) files here just to show what you can do with them. Remember that total bandwidth is the sum of the text, graphics, music, and other embedded items on your page -- don't waste bandwidth!
Always give them a way to turn the damn thing off, and don't loop unless you are trying to produce an unusual special effect.
To promote browser independence, don't specify a player.

Load And Play On Demand

Click the music icon for a demo of this style of link, which gives maximum control to your visitor. They only load the music file if they want to hear it (and have the technology to hear it). Once it's playing, they have complete control of volume and duration. When you click the icon your default sound player will start in a floating window and a download of the tune will begin. Notice that you don't leave the primary page. The music will continue even if you do leave the primary page because it's being controlled from a separate window. The MIDI file used in this demo ("Rockety Top", 16K) shows how a small file can be bright and effective. The simplicity of the arrangement keeps the file size small.

Autoload, Play On Demand, Same Page
Here's the classic embedded control, which autoloads the file but let's the visitor control it's use. This style is often seen on home pages that offer a single tune.

The Haunted Mansion (1K). This style of link uses an EMBED tag with a LOOP=TRUE spec to loop a very short file. It will drive the listener insane unless you give them a way to turn it off. Note that when you leave the page, the EMBEDDED music stops. Width and height of this control are sufficient to accommodate Crescendo. If you use a different player, part of the control area will be blank (probably a gray area). The worst case control size you may encounter requires HEIGHT=180 and WIDTH=280.

Autoloaded, Play On Demand, Separate Page
Anything Goes (26K). This style of link will take you to a separate demo page, which preloads the music file but does not play it unless the user activates the visible control. Notice that if you leave that demo page the music stops because the control is embedded, not in a floating window. This style is most useful if you want to give details about the music and you are very sure that the user will want to play it -- that justifies the autoloading of the file. This style is useful for long inventories of music where the user has many pieces they may want to listen to, with details given on each.

Autostarted Background
One of the most common (and most annoying) methods used on the web, this style forces a download of a music file and plays it automatically, giving the user no way to control it. This is done by specifying HIDDEN=TRUE as an attribute of the EMBED tag. In this case, no control console will be displayed. For a demonstration of this approach, click here to transfer to a demo page. Notice that there is no way to regulate volume or turn it off, which will make some visitors want to put their fists through the screen. The music stops if you leave the page because the control mechanism is part of the page itself. Looping is one way to get sustained effects from very small files. This example uses a tiny version of Disney's Haunted Mansion (1K, looped) to play continuously.

Autostarted Background, With Control
Click here to go to a page that demos the use of a META REFRESH tag to autostart music in a floating control. Notice that occasionally this does not work due to timing problems with page loading that are explained in more detail on the demo page. If it works for you, the page will play the Disney Pirates Theme (6K). There's a control panel visible in a floating window so you can regulate volume and duration. Because of the timing issues associated with META REFRESH, it's a less reliable method than some of the other choices, so test your timing carefully in relation to the loading time for the main page. However, it has the advantage that you can load a good text page first, and relegate the music to a secondary part of the design.

MIDI Links

Zap's Music On The Net Tutorial Secrets of EMBED tag coding.

Netscape's LiveAudio Syntax EMBED tag specs.

MIDI Tips for Webmeisters Technical tips.

MIDI Options for Web Authors tutorial at Live Update's Crescendo Home Site.

Yahoo's MIDI links

The Best MIDI Concentrates on identifying quality MIDI, organized by sound properties. All the selections are lively and well done.

Scott's Mini-MIDI FTP site Over 900 MIDI files.

The MIDI Farm Over 4,000 MIDI and Karaoke files.

Primeline's Midi Collection is probably the most extensive ragtime collection on the Internet.

The midi files of John Roach include many specialty and ragtime numbers.

Midi Pal A collection of unusual original compositions.