How to add MIDI Music to your Homepage.

Adding MIDI Music to your Home Page

WHAT'S NEW! Revised: October 31, 1998
(additional notes and changes January 22, 2003.

April 17, 2004: Since the demise of the LiveUpdate web site, "Crescendo" MIDI Player is no longer available.
Please refer to our newer method of embedding MIDI using Windows Media Player 9.

With the approval of HTML 4.0 early in 1998, several of the elements now commonly used have been "deprecated", that is, replaced by other elements which are to be used in new Browser versions.

Netscape no longer supports the <BGSOUND> element and Internet Explorer does not support the <NOEMBED> pair.

<BGSOUND> Origin: Microsoft Internet Explorer. This element has been obsolete since HTML 3.2, but is still supported by Internet Explorer up to versions 6.xx and by WebTV.

It is NOT supported by Netscape Navigator 4.xx, 6.xx or 7.xx.

<EMBED SRC> Origin: Netscape Navigator. This element has been deprecated but is still supported by Internet Explorer versions 3.x through 6.x; Netscape Navigator versions 2.xx through 7.x; AOL 3.0 (revisions above 130.18) through 7.0.

<NOEMBED> Origin: Netscape Navigator. Supported by Netscape version 3.0 through 7.x, and WebTV.

HTML 4.0 recommends a generic <OBJECT> tag for embedding MIDI or WAVE files. We have experimented with this for MIDI, however, the <OBJECT> element does not work with IE up to ver 4.xx. WebTV does NOT implement <OBJECT> at this time. It is implement in Netscape from ver. 4.5

WHAT TO AVOID!
The following LiveUpdate (Crescendo) Script..
<p><script LANGUAGE="JavaScript">
<!-- // Script for Crescendo MIDI playing.

if (navigator.appName == "Netscape") {
     document.write('<EMBED TYPE="music/crescendo" ')
     document.write('SONG="zhivago.mid" ')
     document.write('PLUGINSPAGE="http://www.liveupdate.com/dl.html" ')
     document.write('HEIGHT=55 WIDTH=200></EMBED>') }
else { if (navigator.appName == "Microsoft Internet Explorer")
     document.write('<OBJECT ID=Crescendo ')
     document.write('CLASSID="clsid:0FC6BF2B-E16A-11CF-AB2E-0080AD08A326" ')
     document.write('HEIGHT=55 WIDTH=200> ')
     document.write('<PARAM NAME="Song" VALUE="zhivago.mid"></OBJECT>')
     }
//--></script>

The "music/crescendo" type will ONLY WORK FOR THOSE VISITORS who have a Crescendo MIDI PlugIn. All other plugins, such as Netscape "LiveAudio" or Yamaha "MidPlug" will display only a broken object image, but will not play the MIDI file.

WHAT DOES NOT WORK WITH THE NEW BROWSERS!

<EMBED SRC="yoursong.mid" WIDTH=144 HEIGHT=60 AUTOSTART="true" LOOP="false">
<NOEMBED><BGSOUND SRC="yoursong.mid"></NOEMBED>

This commonly used combination of <EMBED> and <NOEMBED><BGSOUND> no longer works. IE will not find the BGSOUND element since it ignores <NOEMBED> tags.

If you eliminate the <NOEMBED></NOEMBED> container, then IE versions which do not support <embed> will load the BGSOUND element. If Embedding IS supported, the BGSOUND element will be ignored, as it is in Netscape.

Netscape does not support <BGSOUND>.

Caution! Using BOTH <EMBED> AND <BGSOUND> will cause some IE Versions to Crash, notably those used by AOL.

We recommend dropping the use of the obsolete <BGSOUND> tag altogether. Instead, urge visitors to upgrade to a current browser.

WHAT WORKS RIGHT NOW!

The following code will embed a midi file on your homepage which will play as soon as the page is loaded and repeat once. A console is included (for browsers supporting <EMBED SRC>) so the user can stop the music if it is found to be objectionable. This code can be placed anywhere on the page, INSIDE the <BODY></BODY> tags, that you wish to have the console appear.

<EMBED SRC="yoursong.mid" WIDTH=144 HEIGHT=60 AUTOSTART="true" LOOP="false">

The width and height suit the Crescendo plugin version 3.0 and also Netscape's LiveAudio.

If you feel you must still use the <BGSOUND> element it can be used in combination with the above. <BGSOUND> does not display a console. If you use both <embed> and <bgsound> elements, note that <bgsound> should be placed immediately following the <body> element and in any event, before any BLOCK elements such as <H1>,<P>, <PRE> etc.
<embed> can be placed anywhere on a page, but when you are using the combination of both, it is suggested that it immediately follow the <bgsound>element. To use <embed> without a console, simply add HIDDEN="true" before the closing ">" in the example above.

A word of caution: when specifying "true" or "false" in the above or following examples, you must use either all lower case or all upper case. If you were to type "True" this would evaluate to "false" since it is not in a recognized format, and thus ignored.

Other parameters for the <EMBED> element.
ALIGN, BORDER, FRAMEBORDER, HIDDEN, HSPACE, NAME, PALETTE, PLUGINSPAGE, TYPE, UNITS, VSPACE. Of these, the one most used is HIDDEN="true" which, when placed inside the tag, causes the console to be hidden. CAUTION: If you hide the console, you can not have a link to any other MIDI file on the same page when Crescendo plugin prior to version 3.0 are being used. The reason for this is that there is only one MIDI device in Windows and since it is being used by the hidden embedded file, clicking on any other file on the same page will cause Crescendo to display the message "waiting for midi device".
This was corrected in the final released version of 3.0.

About Width and Height for the <EMBED> element.
Prior to version 3.0 of Crescendo, the console was larger, 200 x 55, but when the Netscape LiveAudio plugin is displayed in this space, there is an ugly blank space left on the page. With ver 3.0 they introduced an additional console 144 x 60 which is the same size as LiveAudio. This is the recommended size to use in your code.

Any other sizes can be used but only a portion of the console will display.To hide the console you can also set the WIDTH to "0" and the HEIGHT TO "2". Do not attempt to set both width and height to 0 as this will generate an error message.

Setting the size to 16 x 16 will display a small note on a green background. (Crescendo plugin only)

Loop
Can be set to any integer to repeat the song a given number of times. An example of code above modified to repeat song 5 times with the console hidden. To repeat the song indefinitely, set LOOP="true". To repeat the song only once, simply omit the LOOP attribute.

<EMBED SRC="yoursong.mid" HIDDEN=true AUTOSTART=true LOOP=5>

CREATING A LINK TO PLAY A MIDI FILE WHEN CLICKED.
The coding for this is very simple:

<A HREF="yoursong.mid">Song Title</A>

TARGETING A MIDI PLAYER TO A FRAME.
BE AWARE that the Netscape LiveAudio plugin CAN NOT be targeted to a frame, as in the following code from a list of clickable links:

<A HREF="SongName.mid" TARGET="FrameName">SONG TITLE</A>

Although it will work with Crescendo and Yamaha MidPlug, bear in mind that at least half of our visitors utilize the Netscape default midi player, and would be unable to listen to the MIDI.

This is due to the conflict between "TARGET=" and the behaviour of LiveAudio using this call. The anchor pair causes LiveAudio to launch a new page sized to fit the midi console on top of the page you are browsing. This is an EXTERNAL page so it can not be targeted to a frame. The result of targeting LiveAudio to a frame is that the page opens, but the midi player does not load the file.

There is a work-around, but whether it is worth all the effort is up to you. That is, you can EMBED the midi file in a document (as per one of the above examples, and only one file per document) then target the HTML to the frame as follows:

<A HREF="SongName.html" TARGET="FrameName">SONG TITLE</A>

THE MOST FREQUENTLY ASKED QUESTIONS..
1.) I would like to have the background music on my Home Page continue to play while other pages are viewed.
2.) I have a submit button for a form on the home page and whenever the form is submitted the MIDI starts playing over at the beginning. How can I avoid this?

This topic is covered in a separate document..CLICK HERE for the answer!!

Back to the Lobby | Table of Contents

©1997-2003 MidiStudio.com. All Rights Reserved
Created December 30, 1997 - Last Updated: April 17, 2004
This site is owned, designed and produced by Les Gorven
dba Business Technologies & MIDI Studio Publishing