Feb 5, 1999
Putting Music on Web Pages
When designing web pages one may want to include music. Music can enhance the mood or tone and it can be a lot of fun. These instuctions show how to install music on a web page. One can use a page that already exists or create a new blank page. 

The following things are assumed:

• You have access to a Window 95/98/NT computer.

• You have a disk to save your work on. (e.g., 3.5 inch or Zip)

• You know how to save something on a disk.

• You have Internet access on your computer.

• You have Netscape 4.5 or higher on your computer. (Other versions have slightly different menus.)

• You have Netscape Composer on your computer. (Instructions are given on how to find out.)

If you are in the BYUH GCB computer lab they have Netscape Composer, but you may want to use Internet Explorer instead while downloading the midi files. I think it is easier when on an NT. 

You will also need a set of headphones if you are in the BYUH computer lab.

Time to Accomplish

Of course the first time you install music on a page it will take you longer. With practice the time will be reduced greatly.

• beginner - 32 minutes (timing a 12 year old who has never done a web page)

15 minutes of this time was trying to find out why it didn't start. She had put "scr" instead of "src" in the code. 

• expert - 5 minutes (timing myself)


Figure 1: Netscape Web Page
Getting Started

• Log onto your computer.

• Start Netscape. To do this, click on the Netscape Icon or Symbol. (If you can not find it click on "Start" and go up to Programs then Netscape.)

If you are in the BYUH computer lab the top part of the screen will look like Figure 1.

Finding Midi Files

In this example we will use a type of music file called Midi. We will find and download a midi file.

In the "location" line (Figure 1) it says "http://www.byuh.edu". Click once there with the left mouse button.

•Select one of the three sites below and type the address into the location.

• http://laurasmidiheaven.simplenet.com/

• http://www.midi-jukebox.com

• http://ursamajor.cs.byuh.edu/lois/1999/midi.htm

In each place you will find a selection of midi files from which to choose.

• Click on a song.

A music box should appear and music should start playing. If music doesn't start playing and you see a music box then you know that the sound is either off, too low to hear, disabled, or you need headphones.


Figure 2: Netscape Composer - Blank Page
• When it starts playing "right click" (click with the right mouse button) on the music box.

You will see a line that says "Save As."

• Click on this line.

You will be asked where you want the file saved.

• Save it on your disk.

• Give the file a name like "kokomo.mid" or "2001.mid"

• Press "Save"

Making a New Page

Find the word "Communicator" on the second line. (Figure 1)

• Click the left mouse button over the word "Communicator." 

A drop-down menu will appear. 

• Click on the word "Composer."

A blank page should appear (see Figure 2).

Locate the word "Tools" on the second line.

• Left click on the word "Tools" once and a drop-down menu will appear.

• Left click on the word "HTML Tools."

"Edit HTML" option should appear.

• Left click on it.

A new screen should appear with characters on it that might not make much sense. This is the HTML programming language in which all web pages are written.


Adding HTML Code

Next you will type in the commands for putting music on your page.

• Go above the <\body> command near the bottom of the "Edit HTML" page.

• Place your cursor at the left edge and push the "Enter" button to get a blank line.

• At the beginning of the blank line type the words and symbols in Table 3, substituting the word "name" for the file name you have chosen. (e.g. kokomo.mid)

\<embed src="name.mid" autostart=true loop=true width=145 height=55>\

<noembed bgsound src="name.mid">

Table 3: HTML Code

The first line of the text can be seen by others using Netscape. The second line can be seen by others using Internet Explorer.

• Press Apply

• Press Ok

Netscape will now return to your Composer page (Figure 2).

You should see a rectangular box with some house-shaped boxes or arrows in and next to the rectangle.

• Name the page and call it something like name.htm

• Save the page, making sure that it is in the SAME drive, file, and folder as the midi file that you saved ealier. (If they are not in the same folder on your disk the music will not start.)

If you need to move one of the files, do so now.

Testing the Page

• Go to "File" at the top left corner of the screen and click on the left mouse button.

• Click on "Open Page".

A window will pop up.

• Click on "Choose File."


If you do not see the file you just created then you have to find the drive, directory, or folder where it was stored.

• Click on the file when you find it.

Make sure that the circle "Navigator" is filled in, not composer, this time.

• Click on "Open"

Navagator will show you the music box and in a few seconds the music should start playing.

Troubleshooting

These suggestions are based on fixes to actual errors seen by the author.

• Check to see if your speaker is turned up or on. You may need headphones plugged in or you may have to test it at a different location. (The sound may be disabled to prevent others from being disturbed.)

• Make sure that the files are stored together in the same directory. 

• Make sure the HTML code was typed in correctly. (src not scr for example)

• Make sure the midi name in the HTML code and the midi file name are both exactly the same. (e.g. kokomo.mid and kokomo.mid, not Kokomo.mid and kokomo.mid)

• Make sure that Netscape has JAVA enabled. (You may need to ask someone for help with this one.)

Each time you make a change be sure to Save the file.

Going Further

You can cause the music box to be hidden. 

• Go back to the HTML code in Composer, Tools, HTML, Edit.

Find where the width and height are written.

• Change width=145 to width=hidden. (You can also change the size of the box.)

• Press "Apply" 

• Press "Ok"