Forum Moderators: open
[edited by: LifeinAsia at 4:33 pm (utc) on Mar. 1, 2007]
1.) ASK your visitors if they want sound enabled, assume they don't. If they do save their preference as a cookie (serve the cookie via serverside if possible as Safari is unable to create cookies via JavaScript). If they register have their preference imported from the cookie in to your database.
2.) This is where Flash actually comes in handy! The visitor will need to have JavaScript enabled which is usually the case unless they are visiting sites that they shouldn't say at work! :-D
You'll need four things...
- A.) (X)HTML object element code with an id.
- B.) JavaScript code that controls the audio if the event is long and needs to be paused and or resumed.
- C.) JavaScript attribute on an element (such as a menu) to trigger the event.
- D.) Macromedia Flash obviously so you have an audio object.
XHTML Object Code
This is the code I use for Flash objects. I intentionally do not use embed as there are no browsers I've ever encountered that would not work with the following code. If anyone can prove me wrong I'll give them a fresh baked cookie. :-D
<object data="mouseover.swf" id="audioevent" type="application/x-shockwave-flash">
<span>It appears you do not have the <a accesskey="8" class="icon external" href="http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" rel="external" tabindex="9" title="Flash Plugin">Flash</a> plugin installed is required for this presentation.</span>
<param name="loop" value="false" />
<param name="movie" value="mouseover.swf" />
</object>
JavaScript Flash Interaction
function getFlashMovieObject()
{
if (navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return window.audioevent;
}
else
{
return document.getElementById("audioevent");
}
}
function PauseFlashMovie()
{
var flashMovie=getFlashMovieObject();
flashMovie.StopPlay();
}
function PlayFlashMovie()
{
var flashMovie=getFlashMovieObject();
flashMovie.Play();
}
Triggering the event!
Trigger Audio
<element onEVENT="PlayFlashMovie();"
Pause Audio
<element onEVENT="PauseFlashMovie();"
Recommended Mouse Events
onmouseover
onmouseout
Recommended Keyboard Events
onkeydown
onblur
Flash Notes
I don't have Flash installed right now but there are a few key things to keep in mind.
1.) Make the sound a stream, not an event! If the sound is set to an event the WHOLE file has to load BEFORE it even begins to start playing and thus the first time it plays will have an ungraceful delay. This may not make much of a difference with very small audio clips such as a click type noise but it's a good habit I have when I stream 5 minute long MP3s.
2.) Encode as an MP3. For the best compression/quality combination for voices and music I use 48kbit a sec stereo if it's a very short clip. Go below 48 and the compression really becomes unbearable. You'll still notice it and some sounds just are not great with compression even at 96 so you'll have to experiment. If it's literally just a click type noise then you could probably get away with 20 bit stereo or even lower.
Conclusion
I only use this code for a music player on my site and you may need to expand the JavaScript to include multiple sounds with multiple Flash objects if you want more then just a single sound. The folks who hang out in the JavaScript forums here are really good but won't be of much help if you can't correctly reference what you want to do so let me know if you want to expand the JavaScript and we can start a new thread over there.
Remember that audio should be a choice and off by default. All my music is on my computer and I haven't owned anything else (except an MP3/CD player for the occasional plain ride) that produces any kind of audio (intentionally at least!) for years so I (like many people) listen to my own music while I work. Hope this helps and good luck!
- John
