Continuous Music Sound Frame

Allwebco Design music addon applications

Sticky Note Continuous Website Music
Support for the latest version, 2010 and later, continuous website music sound frame. This add-on is built into some templates. Your add-on will include a sound_frame folder. See the help.html included with your add-on or template for the correct support links and info.

See Also…

Continuous Website Music Sound Frame

About the frame:
HTML Frames are used in the continuous soundframe add-on, but will not make your website into a frame site, so this will not have any effect on search engine placement. The application adds the frame when a user clicks on a link for sound at your website. Even if you add the autostart option below, your site will still not be a frame website. If you are using the autostart option, your website will be using a Javascript redirect.

Sound frame drawbacks:
In some browsers once a user starts the sound they will no longer be able to set a bookmark or favorite for the individual page, however, the site will still be bookmarked as a framed page. You may want to edit the title tags in the HTML pages in the "sound_frame/(black/white)" folder for the bookmark titles. The second drawback is that once a user opens the sound frame, then goes to another page, if the user hits the refresh button the frame will re-open the page that was open when the sound first started. (The "safe" frame option below does not have this drawback.)

How the sound frame works:
When a use clicks on the "sound" link, or if you are using the autostart option, the browser opens the current HTML page and the sound HTML page inside a frame. The frameset pages are located in the "sound_frame/(black/white)" folder.

About the player.js:
The "player.js" is the file with the actual player code. This file detects if a browser supports HTML5 and will use the fallback code to play the mp3 if HTML5 is not supported.

The sound pages:
In the "sound_frame" folder you will find pages named "song-1.htm" through "song-4.htm". These pages include the code to play the sound. You can edit these pages like any other HTML pages. Flash players can be added to these pages instead of the HTML mp3 player code.

The frame pages:
The Sound Frame add-on uses the HTML pages in the "sound_frame/(black/white)" folder to create the frame that opens with an HTML page and a player page. These page include the sizes for each of the frames and the actual "frameset" code. The player height is set at "38" for the default.

The OGG files:
The default for the addon does not use OGG files. .ogg files are sound files that are used in browsers using HTML5 code that do not support mp3 files. See your addon help page for any info on using these files.

What else can I do with the sound frame?
The sound HTML pages in the "sound_frame" folder are standard HTML pages, you can add text, links, images, video, tours, Flash or anything else you want. You can make the frame as large as you want and change the frame colors. See options below.

Continuous Music Player Options

Replacing the mp3 sound files:
You can replace "song-1.mp3" through "song-4.mp3" in the "sound_frame" folder with your own mp3 files with the same names by overwriting these files.

Editing song titles:
In the "sound_frame" folder edit the "song-1.htm" through "song-4.htm" with your song titles. These can be edited like any HTML page.

Safe frame option:
If you are having problems with the sound frames, or would like to have less scripts running in the sound frame, you can use the "safe" frame option. This option will always load the "index.html", and not the current page, in the main frame when a user clicks on the "sound" link from any page. Edit the "var soundframe" in the "sound_frame.js" in the "sound_frame" folder to "safe" instead of "normal". The template will now open the frameset with the first sound page (song-1.htm) and your website "index.html" for the frameset. Also see the "If all else fails" section below on this page.

If your site is not using an index.html:
If you want to open another page instead of the "index.html", edit either the "FRAME_bottom_safe.htm" or "FRAME_top_safe.htm" in the "sound_frame/(black/white)" folder. In these pages search for "index.html" and replace it with your page name.

Sound frame autostart:
If you would like the music to start when your website homepage loads:
  1. Make a copy of your homepage, usually the "index.html". Name it "index2.html".

  2. In your homepage (index.html) add this code to the "BODY" tag:



    <body OnLoad="javascript:AutoSoundFrame();">

    Be sure NOT to add this to the "index2.html" or your page will loop load.

    Optionally, instead of using the "OnLoad" in the "body" tag you can add the following script code in the head section of your webpage:

    <script type="text/javascript">
    <!-- start script
    window.onload = function()

  3. Edit the "var soundframe" in the "sound_frame.js" in the "sound_frame" folder to "auto" instead of "normal". The template will now open the frameset with the first sound page (song-1.htm) and your website homepage when your site first loads.

  4. Option: Edit the "menu.js" and "flash.txt" to link to the "index2.html". Find and edit any links to your homepage and have them link to the "index2.html" instead.

  5. Option: If you want to open another page instead of the "index.html", edit either the "FRAME_bottom_auto.htm" or "FRAME_top_auto.htm" in the "sound_frame/(black/white)" folder. In these pages search for "index2.html" and replace it with your page name.

  6. Option: To have the frame delay before loading (in this example 4 seconds) use the following code instead of the code in step #2 above:


Switch the frame from the top or bottom:
Edit the "var soundloc" in the "sound_frame.js" in the "sound_frame" folder to "top" or "bottom".

Editing the music frame height:
Depending on the options you have set in the "sound_frame.js", you will edit the corresponding HTML page in the "sound_frame/(black/white)" folder. In this HTML page, find and edit "frameset rows="*,38". Edit the 38 to change the music frame height.

EXAMPLE: If you have "bottom" and "normal" set in the "sound_frame.js" edit the "38" in one place in the "sound_frame/(black/white)/FRAME_bottom_normal.htm".

Looping a single song:
You can setup the soundframe to loop a single song. To setup a single loop:

Note: Looping may not work in all web browsers.
  1. If your addon includes a "player.js", open this file and set the "loopingM" from a "no" to "yes". Ignore the steps below.
  2. If you do not have a "player.js" follow these steps.
  3. Edit the "song-1.htm" in the black or white folder.
  4. Locate the "START SOUND CODE" area.
  5. Edit loop="1" in one place to loop="100".
  6. Edit loop="false" in one place to loop="true".
  7. Test the "song-1.htm" in both IE and also in another web browser like Firefox.
Looping from song to song:
The soundframe addon does not include this feature. This can be done one of 2 ways.
  1. You can replace the current player code with a Flash player that includes a playlist. See the "Adding a different mp3 player in the sound frame" section below.
  2. Although not as good a solution as a Flash mp3 playlist player, you can set a Javascript timer in the "song-1.htm" to have it change to the "song-2.htm" URL after a specific amount of time. See Javascript timers at Google. Add the timer to the "song-1.htm" in the black or white folder.
Sound frame colors and fonts:
Edit the "sound_frame.css" in the "sound_frame" folder to change these fonts or background colors.

Images in the sound frame pages:
All images for the sound frame pages are in the "sound_frame" folder.

Adding another sound page:
The default for this add-on is to allow for 4 mp3 songs. To add a new song page:
  1. In the "sound_frame" folder, make a copy of "song-4.htm". Name it "song-5.htm".
  2. Open the "song-5.htm" Find and edit "sound-4.mp3" in 2 places (Two places!!) with your mp3 file name (song-5.mp3). Note: In newer versions of this addon you only need to edit in 1 place.
  3. Edit your song title in the "song-5.htm".
  4. Edit 1 link for "previous" in the "song-5.htm". Edit the "song-3.htm" to "song-4.htm".
  5. Open the "song-4.htm". Edit 1 link for "next" in this page. Edit "song-1.htm" to "song-5.htm".
  6. Place your mp3 file (song-5.mp3) in the "sound_frame" folder. Do not use spaces in your new mp3 file name and remember that hosting is case sensitive so be sure the code you edit in the "song-5.htm" and the new mp3 file name are exactly the same.
  7. To add a 6th song, do the steps above using the next number page you are adding.
  8. Open the sound frame and test to be sure the links to the "next" and "previous" songs are working.

Adding a different mp3 player in the sound frame:
You can use other players like Flash players in the soundframe. Edit "song-1.htm" through "song-4.htm" in the "sound_frame" folder, or in the "black" or "white" folder in the "sound_frame" folder depending on what color you have set in the "sound_frame.js".

The "song-1.htm" through "song-4.htm" are using HTML code to play the mp3 files. To add a different player, like a Flash player; Copy the code provided by the player software or vendor. Open "song-1.htm" through "song-4.htm" and paste your code between the "START SOUND CODE" AND "END SOUND CODE" notes, overwriting the code between these notes.

Note: You may have to place your player files, or .swf files and your mp3 files in the "sound_frame" folder, or in the "black" or "white" folder in the "sound_frame" folder.

Wimpy Website Audio and Video offers Flash mp3 players that include a playlist so the soundframe will play songs on a list continuously.

Closing the sound frame with a link:
You may need to have a link or order button or form close the frame. To do this add a target="_top" to the link or form. See the target links support page for more options.

Closing the sound frame with a script:
Another option to close the sound frame from another webpage is to include a frame breaking Javascript. Try searching at Google for "break frame javascript".

Be sure to TEST!
If you make any changes, rename any pages, add any pages then be sure to test bookmark one of your pages. Be sure to test all links in the soundframe and if possible test in Internet Explorer, Firefox, Safari, Google Chrome and Netscape browsers.


If the sound frame is creating errors, here are some options to try:
  • Can not find error: If your site does not have an "index.html", but rather some other homepage name, you must edit the frame page you are using. EXAMPLE; if you are using the "bottom" and "black" and "normal" options, edit the "FRAME_bottom_normal.htm" in the "sound_frame/black" folder. In this page search for "index.html" and replace it with your home page name. Optionally, you can search all other files in the "sound_frame" folder and replace "index.html" in all files with the name of your home page.

  • Close button error: The close link that was added to your pages includes a target="_parent". Try using target="_top" instead for this link.

  • Can not find error: The close link that was added to your pages uses a "#" for the link. Try using both the actual page name for this link and a target="_top" instead of "#" and target="_parent". Example; in the link try using "about.htm" if you have added this to your about page.

  • For other errors see the "TROUBLESHOOTING" section on your "SoundFrame-help.html" page.

If all else fails #1: Can not find page error final solution:
In some cases the sound frame may not work no matter what you try. This may be a hosting issue or a conflict with another script on your webpages. Below is a solution that will allow the sound frame to open without using any Javascript. Autostart can not be used with this solution.
  1. For this solution you do not need to set any variables in the "sound_frame.js" because the "sound_frame.js" will only be used to close the soundframe.
  2. Edit the link to open the soundframe. Instead of a Javascript link you will link to the frame page itself. Edit this soundframe opening link:

    <a href="javascript:OpenSoundFrame();">Start Music</a>

    Like the following to open the black frame:

    <a href="sound_frame/black/FRAME_bottom_safe.htm">Start Music</a>

    ...and for the white frame:

    <a href="sound_frame/white/FRAME_bottom_safe.htm">Start Music</a>

  3. Note: If one of the frame pages does not open check the "FRAME_bottom_safe.htm" in the "black" or "white" folder and check the page names used in the frameset to be sure they link to the homepage.
  4. Note: If this solution does not work then you many not have all soundframe files and folders uploaded or they may not be named correctly. Hosting is case sensitive.

If all else fails #2: With autostart:
The solution in the above section can be used to have a link open the soundframe but can not autostart the sound. To have autostart with no Javascripts you would need to make your homepage a frame page and load your current homepage into the top frame and the first song page (song-1.htm) from the "black" or "white" folder into the bottom frame. You would want to search at Google or Yahoo! for "HTML frames" for help with making your homepage a frame page.

Allwebco continuous sound frame code has been tested in and is compatible in Internet Explorer 7.0 and higher, Firefox, Safari, Google Chrome and Opera browsers.

Related Topics:
Square Peach royalty free music
Adding website sound
Music popup player
Audio on hover