Midi Page Resources

Some resources for putting music on your web pages.
These resources are HTML or JavaScript codes.

Section 1 :
Just the basics.
Section 2 :
Beautifying the music control and preventing theft of your midi.

Section 1:   Just the basics

Before we start we can now do away with the bgsound code.
It is only needed for old Internet Explorer browsers not used anymore

<bgsound src="XXX.mid" loop=-1>

This code will play music in all current browsers
No Music control panel shows.
Setting the loop to -1 plays continueously.

Select All
<embed src="XXX.mid" width="0" height="0" loop="-1">

All other codes are based on the one above.

Leaving out the size attributes will result in a full control panel showing

Select All
<embed src="XXX.mid" loop=-1>

Note: The panel I show is the default and may look different
depending on which midi player is installed on the viewing computer.

You can control the size attributes for a different result

Select All
<embed src="XXX.mid" width="70" height="25" loop=-1>

If you want the music off until the start button on the control panel is clicked add autostart="false"

Select All
<embed src="XXX.mid" autostart="false" width="70" height="25" loop=-1>

To put an unobtrusive music control on the page use this code

Right Click on the Icon

To adjust sound.

Select All
<table border="0" cellspacing="0" cellpadding="0"><tr><td valign="bottom"><font size="-2"><font face="Arial,Helvetica"><b>Right Click on the Icon</b></font></font></td><td ><table border="1" cellspacing="0" cellpadding="0"><tr> <td ><embed src="XXX.mid" autostart="true" loop="-1" height="16" width="16" ></td> </tr> </table> </td> <td valign="bottom"> <b> <font face="Arial,Helvetica"> <font size=-2> To adjust sound. </font> </font> </b> </td> </tr> </table>

Finally the code with all parts included so that you can adjust them to your own needs.

Select All
<embed src="XXX.mid" autostart="true" width="300" height="45" loop=-1>

Section 2: Beautifying the music control and preventing theft of your midi.
I made this in JavaScript to simplify things for you.
Here is how it works.
You need 1 small file uploaded to the same directory as your page to make this work.
Download Zip File (1k) "sound_control.js"
It does everything for you.
Use your own background graphics or the ones I have used below are here.
Download Zip File

First enter this code in the < head> section of your page

It has 4 variables that you can fill in.

txt is the color of the text.
It can be a default name (black, white, beige, pink, etc.)
or a hexidecimal number #000000
Colors Explained
bkgrnd is the color of the background
It can be default name or hexidecimal.
This shows if you do not use a background image
backimage is the name of the background image
I have used "mscctrl-gold.gif"
mdnm is the name of the midi without the extension
i.e. baby-shower.mid would be "baby-shower" as shown here

Select All
<Script Language="JavaScript">  </Script>

Next simply insert this code where you would like the control to show

Select All
<Script Language="JavaScript" src="sound_control.js"> </Script>

This is the result of a few combinations.
It should allow you to match the music control to your page.

"black"
"pink"
" " (no background graphic)
"baby-shower" "white"
"blue"
" " (no background graphic)
"baby-shower" "black"
"beige"
"mscctrl-gold.jpg"
"baby-shower" "white"
"black"
"mscctrl-black-red.jpg "
"baby-shower"

"#000000"  ( hexidecimal for black )
"beige"
"mscctrl-country-beige.gif"
"baby-shower" "black"
"beige"
"mscctrl-country-green.gif"
"baby-shower" "black"
"mauve"
"mscctrl-country-mauve.gif"
"baby-shower" ""    ( default shows page
""    background and text )
""
"baby-shower"