PSP 10


Web Design


Mailing List

Terms of Use

Contact Me

Adding Music to your web page

To see the printer friendly version of this tutorial, click HERE

For this tutorial, you'll need a midi file. You can find free downloads at the following sites:

MIDI DataBase
Tis Carols Place

You can also do a search on Lukol, Google etc for midi files.

Download your chosen file to a folder in your root folder. I created a new sub folder called midi. This is where I'll keep all midi files for the web site.

There are a number of different ways you can add music to a page.

I'm going to show you 2 ways, the first shows you how to add music using the feature in FrontPage and the second shows you how to add a control button using html from Hypergurl.com so visitors to your site can choose whether to listen to the music.


Right click on the page you want to add the music too and click on the browse button under Background Sound.

Browse to the folder

Select the midi file and click Open

You can choose whether to have the music playing continuously or only a certain number of times.

Click OK


Go to Hypergurl.com and scroll down to where it says:

Embed music with console.

Copy the html code making sure you select all the code.

You place the html code in the place where you want the console to appear. An easy way to do this is to type a line of a letter, I tend to use the letter L for some reason!

Highlight the line of L's

Click on Split so you can see the page and it's code

Make sure just the line of L's are highlighted in the code and press Ctrl and v on your keyboard to paste the html code that you got from Hyper Gurl.

We now need to change a few things.

Go to the folder list and open the folder that contains your midi file. Click on it once to select it and right click and click on Copy.

In the html code of the page, highlight the words - yourmusic.mid

Press Ctrl and v to paste the file path of your midi file into the html code of the page.

Highlight the word false where it says autostart.

Change it to the word true.

Do the same where it says loop

Go back to the design view of your page and it will look like this

Save the page and then go to the folder list. Right click on your page and click on Preview In Browser.

This is how the console looks when previewed in browser.

Click on the buttons to make sure they work and if you're happy with it, publish your page.


Tutorial written by Shell 2005



Site Hosted & Designed by SLANTDigital 2005
All Rights Reserved

Counter reset 19 November 2005