Home

Sound Links:
 [ Open Sound Frame ]
[ Close Sound Frame ]

[ Samples Page ]



Allwebco Website Templates


Available Buttons:


red-play.gif
red-stop.gif
a-red-play.gif
a-red-stop.gif
green-play.gif
green-stop.gif
a-green-play.gif
a-green-stop.gif
yellow-play.gif
yellow-stop.gif
a-yellow-play.gif
a-yellow-stop.gif
blue-play.gif
blue-stop.gif
a-blue-play.gif
a-blue-stop.gif
black-play.gif
black-stop.gif
a-black-play.gif
a-black-stop.gif
t-white-play.gif
t-white-stop.gif
t-black-play.gif
t-black-stop.gif

 Continuous Web Page Sound Add-on:
For HTML5 and HTML 4.01 Websites
 This application is intended to be added to any website or any website template.

View continuous web page sound support page
View Allwebco add-ons


STEP #1: Copy Files | More Details
Unzip the "sound_frame_AddOn.zip" file and place the "sound_frame" folder and all files and subfolders in this zip file folder in your main template or website folder. Place the "SoundFrame-help.html" and "SoundFrame-samples.html" pages in your main template or website folder with your other HTML pages. Open the "SoundFrame-help.html" in your website folder to proceed.


STEP #2: Test Player
Click on the music note icon or the "Open Sound Frame" link on the left of this page. A frame should open on the bottom of this page and the mp3 should start playing. Click the "Stop Sound" link or icon to close the sound frame. You can also do this test using the soundframe samples page.

If the sound did not start, try copying the "sound_frame" folder from the .zip file again into your template or website folder.


STEP #3: Setup Your Webpages
In each of your website or template pages that will include the soundframe links, add the following code to each page. Place this code near the top just before the </head> in your pages.



NOTE: View the source of this help page or the soundframe samples page to see how this code is placed.


STEP #4: Add Links To Your Webpages
Copy the code below and add this to one of your template or website pages. Open the page and click the link to test the soundframe.

Option A: Text page links
This code is for links in the body of any page to open and close the soundframe:



Option B: Icon links
This code is to display icon links as seen at the top left on this page. This code is for white icons, edit the word "white" to "black" in 2 places in this code to use the black icons:




Option C: Floating Icon links
This code is to display floating DIV icon links as seen at the far left on the soundframe samples page. This code is for white icons, edit the word "white" to "black" in 2 places in this code to use the black icons. Edit the 10px in 2 places to change the location on your pages.




Option D: Code for links
You can also add the soundframe links to a menu file, any .js file or as image links. The following code is the link code to open the soundframe:

javascript:OpenSoundFrame();

To close the soundframe use:

javascript:CloseSoundFrame();

These are the links shown in "Option A" on this page. Also view the soundframe samples page.


STEP #5: Choose Button Color
The code above uses the red "music note" buttons style. The 2 files in the code are "red-play.gif" and "red-stop.gif". On the left on this page are all other button options and file names. Example: To use the black "play arrow" style, edit the code you added in step #4. Edit "red-play.gif" to "a-black-play.gif" and "red-stop.gif" to "a-black-stop.gif". The "a-" in the name stands for "arrow".

The button images are in the "buttons" folder. A .PSD file is included to create new buttons in Photoshop.


STEP #6: Replace The Mp3s
You can use the mp3s included in this add-on on your website. If you would like to use your own mp3 files, replace "song-1.mp3" through "song-4.mp3" with your mp3 files.


STEP #7: Edit Song Titles
Edit the HTML pages in the color folder that you are using. Example; If you are using the "white" player, edit "song-1.htm" through "song-4.htm" in the "sound_frame/white" folder with your song titles.


STEP #8: Test The Player
Be sure to test your page after each edit in Internet Explorer and also in a second browser like Firefox, Chrome or Safari. Make sure the frame is opening and playing the mp3. Click the "next" and "back" in each sound frame to be sure the next song plays.


STEP #9:
Move the "SoundFrame-help.html" and "SoundFrame-samples.html" pages out of your website folder to a backup or extras folder.


Search Engine Notes:
 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, your site will still not be a frame website. If you are using the autostart option, your website will be using a Javascript redirect. You may want to add the following line to your "robots.txt" to keep search engines from indexing the pages in your "sound_frame" folder.

Disallow: /sound_frame/


The Flash of Color Before the Frame Loads:
 You may notice a black or white flash of color in the browser as the soundframe is loading. This color can be edited by editing the "sound_frame.css" in the color folder you are using. Find and edit this code:

.blankpagecolor { background-color: #000000; }

 
OPTIONS:
 
What are the .ogg files? | More Details
.ogg files are sound files that are used in browsers using HTML5 code that do not support mp3 files. The default setup in the "player.js" is set to not use .ogg files. You do not need to upload or edit the .ogg files. The ogg option is included only for future browser versions. Click link above for more details.


Adding Soundframe links to .js files:
See "Option D: Code for links" above on this page. Also see the add to .js files support page.


Looping the mp3:
You can set the mp3 to loop in the "player.js" at the top of the file by editing the "var loopingM" to a "yes" or "no". Note: Looping may not be supported in all web browsers.


Changing the Soundframe Color:
In the "sound_frame" folder edit the "sound_frame.js" with any plain text editor. Edit the "framecolor" to "black" or "white". Use all lowercase letters.


Changing the Soundframe Location, top or bottom:
In the "sound_frame" folder edit the "sound_frame.js" with any plain text editor. Edit the "var soundloc" to "top" or "bottom". Use all lowercase letters.

If you are using the soundframe "top" option you may want to edit the ".playerborder" border code in the "sound_frame.css" in the color folder you are using.


Safe and Autostart Options: | More Details
You can have the frame automatically open and play an mp3 on one of your webpages. Or you can use the "safe" frame option if the soundframe is having any issues in any web browsers. See the soundframe support page for details.


Changing the Soundframe Height: | More Details
See the soundframe support page for details, however, you will edit the "FRAME_????_????.htm" pages in the color folder you will be using.


Adding a 5th Song: | More Details
The default for this add-on is to allow for 4 mp3 songs. To add a new song page:
  1. In the "sound_frame" color folder you are using (black or white), make a copy of "song-4.htm". Name it "song-5.htm".
  2. Open the "song-5.htm" Find and edit "../song-4.mp3" in 1 place with your mp3 file name "../song-5.mp3".
  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.
Editing Frame Colors: | More Details
To edit the colors in the soundframe, edit the "sound_frame.css" in the color folder you are using in the "sound_frame" folder. Edit the images in the color folder.


Adding a New Frame Color:
EXAMPLE; To make a new "red" color frame; make a copy of the "black" folder. Name it "red". Edit the "sound_frame.css" and the images in the "red" folder with your colors. Edit the "var framecolor" variable in the "sound_frame.js" with "red".


Using a Different Player in the Soundframe: | More Details
See the soundframe support page for details.


Adding a 2nd Soundframe (Advanced Users):
For a second soundframe you can follow these steps:
  1. Copy the "sound_frame" folder. Name it "sound_frame2".
  2. In the "sound_frame2" folder edit the "sound_frame.js". You must rename the functions. Find "function OpenSoundFrame" and edit it to "function OpenSoundFrame2". Edit "function AutoSoundFrame" to "function AutoSoundFrame2".
  3. In the "sound_frame2" folder edit the "sound_frame.js", edit "top.location.href = "sound_frame/" in 2 places with "top.location.href = "sound_frame2/"
  4. In the "sound_frame2" folder edit the "sound_frame.js", search and replace "framecolor" in 3 places with "framecolor2".
  5. In the "sound_frame2" folder edit the "sound_frame.js", search and replace "soundloc" in 5 places with "soundloc2".
  6. In the "sound_frame2" folder edit the "sound_frame.js", TURN ON MATCH CASE in the search and replace. Search and replace "soundframe" in ONLY 3 places with "soundframe". DO not replace in more than 3 places!! These are the 3 areas:

    var soundframe2="normal"
    FRAME_"+soundloc+"_"+soundframe2+".htm"
    FRAME_"+soundloc+"_"+soundframe2+".htm"
  7. Similar to step #3 on this page, you must now add the 2nd .js call for the soundframe2. Add this code before the </head> in your webpages below the line you added in step #3.

    <script type="text/javascript" src="sound_frame2/sound_frame.js"></script>

  8. For links to the 2nd soundframe, use the links in step #4, but change the function from "javascript:OpenSoundFrame();" to "javascript:OpenSoundFrame2();".
  9. Do steps #5, #6 and #7 above, while editing in the "sound_frame2" folder instead of the "sound_frame" folder.


Where is the actual mp3 player code?
The code that actually plays the mp3 files is included in the "player.js".


Mp3 File Length Limits:
There are no set limits on the length or file size for this application. You can use any .mp3 file in this player.


 
TROUBLESHOOTING:
 
Sound not working:
For mp3 sound files not playing see the sound not working support page.


Player not working:
If you do the steps above and the soundframe is not working:

  1. Try doing the above steps again from the start.
  2. Did you setup your HTML pages as outlined in step #3?
  3. Be sure you have put the "sound_frame" folder and all files and folders in this zip file in the same folder as the HTML page you are adding the soundframe to.
  4. Have you created a valid .mp3 file? You may need to resave any mp3 files you create at a sample rate of 44.1hz and 128kbps.
  5. Check the Pages or Files not Updating After an Edit support page.
  6. Check the Parts of the Template are Missing After Uploading support page.







COPYRIGHT © Allwebco Design Corporation | View Allwebco User Agreement
Unauthorized use or sale of this script, images or any files included in this download is strictly prohibited by law. By purchasing this script you are authorized to use this on a single Allwebco template, website or any template from another company. You are also authorized to modify all included files for this single site use. Click here for add-on re-use details and payments.

Purchaser is authorized to use any and all files included in the download on a single website.