Site hosted by Build your free website today!

[ Main Music Page ]
[ Frame 1 ]
[ Frame 2 ]
[ Frame 3 ]

[ AllWebCo Design ]
[ AllWebCo Templates ]
[ AllWebCo Hosting ]

[ Open a Test Popup ]

Music Popup Add-on Setup:
This script is provided free to all our template users. We do not however provide support for adding the feature to your template.

Click here for help with this add-on

Search our support center for any help

STEP #1:
Create a new folder in your main template folder and name this folder "music" all lowercase.

STEP #2:
Copy all the files from this zip file into this new "music" folder.

STEP #3:
Select, copy and then paste the following code into one of your .js files at the very bottom. This is best to add to your "javascripts.js" or "blockerror.js" file. The second choice is to paste this into your "pop-closeup.js". Another option is to use the script code from the top of this help page and paste this into all your HTML pages. View the source of this page to see the code.

If you would like to add a link for this popup to one of the HTML pages, the sidebar or to the menu (this can be tricky on a drop menu template) use the following code.

Link on a page: Paste the following in the main body of your page:

<a href="javascript:popmusic('music/music.htm')">Play Music</a><br>

Link for a menu: Add only the following in place of the .htm part of your menu. For example, replace "about.htm" with the following code:


...or you may need to use this code on some menus:


...or this code:


Link for the sidebar: Add the following to your sidebar.js:
(You may need a new class for the link color.)

document.write('<a href="javascript:popmusic(\'music/music.htm\')">Play Music</a><br>');

For an automatic popup. Select, copy, and add the following code to the body tag on any HTML page that you want the music popup to open with automatically.


NOTE: Basically it will go in the "body" tag like the following:

<BODY BGCOLOR="#FFFFFF" leftmargin=0 rightmargin=0 topmargin=0 bottommargin=0 marginheight=0 marginwidth=0 onload="popmusic('music.htm')">

  1. Be sure if you added the step #3 script to the "javascripts.js" that each page has this code near the top <script language="JavaScript" type="text/javascript" src="javascripts.js"></script> The same applies to any .js file you added the script to. It must be near the top of each HTML page.
  2. If the popup is a missing page click here.
  3. If the music does not play after editing one of the "music_frame-?.htm" pages: Be sure you edited the sound file name in 2 places and check your filenames and HTML code.
  4. Download this add-on and try again from the start.


You can use any other music that you would like. You can use another mp3 file, .wav, .au or .mid file. Edit any one of the 3 "music_frame-?.htm" HTML pages that you placed in the music folder. Edit the "music-?.mid" code in 2 places in each page. Be sure to edit ".mid" file code in 2 places.

Edit the "music.css" in your music folder to change text or button colors or to set the width of the music popup buttons. Click for color choices.

The "music.htm" is the main music page. Each song has it's own HTML page that the "music.htm" is displaying inside of an IFrame. To add a new song to the player:
  1. Make a copy of the "music_frame-1.htm". Rename this to "music_frame-4.htm".
  2. Edit the new "music_frame-4.htm" and change the "music-1.mid" code in 2 places to "music-4.mid" or any file name you need like "mysong.mp3".
  3. Place this new music .mid, .mp3, .au or .wav file in the template "music" folder.
  4. Edit the "music.htm" and change the song title.
  5. Edit the "music.htm" and find the "START PLAY MENU". Copy the 2 lines that make a link and paste them under one of these links. Edit the HTML page name with your new "music_frame-4.htm" link.

Edit the "music.htm" to change the popup button names.

Edit each "music_frame-?.htm" to change the text song title names.

The actual player code will be found in the 3 "music_frame-?.htm" pages. You can edit some of the options such as the height and width of the player, border colors and other items in these 3 pages. Keep in mind that you will edit most of the options in 2 places in each of these pages.

You can use these players for video. This will involve editing the code in the "music_frame-?.htm" pages. We suggest searching at Google for "embed object video" for more info on the options available.

The size of the popup is controlled by the code you used in step #3 above. Currently this is set to 300 x 200 pixels.

Best of luck with your new add-on and your website!

Sound clips 2006 ErichV & Simply Media