Posted on

MIDI Drums for use on Web sites

MIDI Drums
MIDI Drums

By now you have probably had some fun creating music on your MIDI instruments and editing or recording with or from your PC. MIDI makes the mixing and editing of music very easy, the files are basically universal and do not require much space. These benefits lead us into another possibility for MIDI pieces that you have created, playing them on your web site.

Why MIDI is great for web use.

As mentioned, there are several reasons that MIDI files are very useful for the web. The first reason is its compatibility.

Regular sound files are made by sampling the music being recorded at a very high speed. This means that all the details of the recorded piece are stored within the sound file. The clearer the music the larger the file size is.

In contrast, MIDI files do not store any music. A MIDI file only contains the details for what note should be played how long it should be played and how loud it should be played, as well as a few other note characteristics. This means the MIDI file being played is actually playing sounds that the sound card itself produces. This makes MIDI files much smaller in size.

The other important thing to consider is web page file size. The speed at which a web page is loaded depends upon your connection speed and the size of the web page. The smaller the web page the faster it will load, meaning MIDI is a great choice for embedded music.

How do I use my MIDI file on my web page?

Using your MIDI files on the web takes a little work and a little understanding of HTML programming. I will assume that you have already created both a MIDI file and a web page and wish to bring them together.

First you need to find the page you want to play the MIDI file from and open it for editing ao that you can see the source code. The nice thing about HTML is that it is a high level language meaning that it is very simple and not all that powerful. This also means that it is very easy for anyone to understand it and edit it. If you do not have an HTML editing program you can use Word or Notepad which comes automatically with the Windows OS. You must ensure that you save the file with the same extension it originally had, usually html or htm.

 Now for the programming part. To have your page play a MIDI file you first need to add a MIDI file to the same directory as the page source file. For example, let’s say the MIDI file is named web_music.mid. To use it, you must now add the following command to the code in your page.


Upload the MIDI file and your edited page to the web and then visit the page location using your web browser. Your web browser will use its default plug-in to play the file and you should hear music right away

Here’s what’s Happening:

  • EMBED tells the browser an embed sound is here — go get the plug-in. Remember, embed commands are associated with plug-ins.
    Note: If no plug-in is available, the browser will do one of three things:

    • 1. Do nothing. This is true of very early level browsers or browsers other than Netscape.
    • 2. Put up a dialogue box asking you how you want to handle the file.
    • 3. Tell you a plug-in is needed and ask you if you’d like to go get it.
  • HEIGHT/WIDTH deals with the plug-ins control panel size on the page.  If you do not want a panel, add the command HIDDEN=”yes” or set the height and width to zero.
  • SRC stands for “source.” It tells the browser where to go to get the audio file.
  • AUTOSTART deals with whether you want the sound to play by itself or by the viewer starting the file after the plug-in box pops up. “True” starts the file straight away; “false” prompts the viewer. Note I used “false” above. “True” would have started the file straightaway upon load.
  • LOOP works the same way. “True” loops the sound so it plays forever. Make the loop “false” if you only want it played once.

Now that you have added the commands and uploaded the page, you’re ready to go. This really makes for a nice personal touch and a great way to show off your musical talents. Have fun.

Leave a Reply

Your email address will not be published. Required fields are marked *