Allwebco Design Corporation - Add-On |
Home |
Sound Links: [ Open Sound Frame ] [ Close Sound Frame ] [ Samples Page ] ![]() 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; } .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:
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:
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. 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:
|
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. |