|
|
 |
ADDING AUDIO-ONLY FLASH FILES TO HTML BASED SITES
(HOW THIS SITE WORKS!)
NOTE: As of 10/4/03 we have totally revised the methodology used in our sites, and thus in this article. It now works with bookmarks and the back button, as it is no longer based on framesets, but uses a floating iFrame.
One very easy to implement way to add sound to a website is by using Flash audio-only files, and initiating playback from html files loaded into a hidden audio iFrame.
The Flash plugin is practically ubiquitous these days, so most people will hear the audio (if their speakers are turned on.)
Flash uses MP3 audio compression, which at bitrates as low as 16kbps yield reasonable sounding audio. At 64kbps, MP3 sounds fantastic, close to CD-Quality. We use 24kbps files in these sites, to allow for more reliable playback on 56k modems, as the bandwidth is also needed for visual elements.
This format does yield some audible phasing sounds on speech-only files, but all in all it is very bright and clear, allowing for subtle music and effects to still be heard.
First you would create .swf files with no visual element. These files can be embedded in webpages using javascript controls, if your application is Windows only and limited to newer browsers. If you need to be Macintosh compatible, these methods don't work
You can assure reliable playback on most systems by limiting the capabilities to "start" only. You cannot pause and continue a file. You do this by creating a hidden iFrame on each page. You then load an HTML document into this iFrame that contains the code to call and play the SWF file.
To play an audio file you load a new html document into the audio frame. To stop it you load an empty file into this frame.
Here is the iFrame tag you would place in your page. This references an HTML document that calls the SWF file.
< IFRAME SRC="audiofile1.html" NAME="soundFrame" ID="soundFrame" WIDTH="1" HEIGHT="1" SCROLLING="no" FRAMEBORDER="0"></IFRAME>
Following is the sample flash "start audio" html code - you would replace the text "audiofile" with the name of your file in three places, then create .swf files with these names. In our examples there is an audio folder on the server. This is the contents of audiofile1.html in the above iFrame tag.
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,0,0"
WIDTH="1" HEIGHT="1" id="audiofile1"><PARAM NAME=movie VALUE="audio/audiofile1.swf"><PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor VALUE=#000000> <EMBED src="audio/audiofile1.swf" quality=high bgcolor=#FFFFFF WIDTH="1" HEIGHT="1" NAME="audiofile1" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
CREATING A STOP AUDIO BUTTON AND INITIATING AUDIO FILE PLAYBACK WITHIN A PAGE
We use a shh button. The following javascript function needs to be inserted in the Head area of your page.
function shhh(url) {
var url = url || 'audioempty.html';
parent.soundFrame.location.replace(url);
}
To load the audioempty.html file you would use the following tag.
<A HREF="audioempty.html" TARGET="soundFrame" ONCLICK="shhh(); return false;">
audioempty.html is an HTML file with nothing but body and head open and close tags.
To load a new audiofile with this tag you would simply create a new audio file HTML document with the name of the desired SWF file replacing audiofile1 in the code above.
Finally, if you wish to load a page and have no audio play on page load, but want to be able to start audio playback within a page (by a click for example), the iFrame tag with audioempty.html must be a part of the initial page. This gives the javascript replace command an iFrame location to load the desired audio file into.
If you need help understanding this document, please post a message in the Forum and someone will be happy to explain. We ask you to do it this way, rather than to email us, so others can benefit from the explanation.
|
|
 |
|
