Continuous Music Sound Frame
Allwebco Design music addon applications
About the frame:
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.
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:
Switch the frame from the top or bottom:
- Make a copy of your homepage, usually the "index.html". Name it "index2.html".
- In your homepage (index.html) add this code to the "BODY" tag:
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:
<!-- start script
window.onload = function()
- 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.
- 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.
- 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.
- 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:
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:
Looping may not work in all web browsers.
Looping from song to song:
- If your addon includes a "player.js", open this file and set the "loopingM" from a "no" to "yes". Ignore the steps below.
- If you do not have a "player.js" follow these steps.
- Edit the "song-1.htm" in the black or white folder.
- Locate the "START SOUND CODE" area.
- Edit loop="1" in one place to loop="100".
- Edit loop="false" in one place to loop="true".
- Test the "song-1.htm" in both IE and also in another web browser like Firefox.
The soundframe addon does not include this feature. This can be done one of 2 ways.
Sound frame colors and fonts:
- 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.
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:
Adding a different mp3 player in the sound frame:
- In the "sound_frame" folder, make a copy of "song-4.htm". Name it "song-5.htm".
- 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.
- Edit your song title in the "song-5.htm".
- Edit 1 link for "previous" in the "song-5.htm". Edit the "song-3.htm" to "song-4.htm".
- Open the "song-4.htm". Edit 1 link for "next" in this page. Edit "song-1.htm" to "song-5.htm".
- 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.
- To add a 6th song, do the steps above using the next number page you are adding.
- Open the sound frame and test to be sure the links to the "next" and "previous" songs are working.
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.
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:
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.
FIXING POSSIBLE ERRORS:
If the sound frame is creating errors, here are some options to try:
If all else fails #1: Can not find page error final solution:
- 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 #2: With autostart:
- 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.
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>
- 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.
- 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.
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.
Square Peach royalty free music
Adding website sound
Music popup player
Audio on hover