Oow no! Don't put sounds on your web links! But too bad, my wife really wanted it for her site. And so I started thinking how to do this in a browser-compatible way.
The ingredients needed:
- Flash with actionscript 3
- Html (the web page)
- Javascript
The technologies:
- Flash's ExternalInterface, to communicate between Flash and Javascript
- Flash's sound embedding options
- Javascript (to add the sound effect unobtrusive)
I have first created a new Flash CS3 document.
Then I added 2 layers: the first with code in frame 1, and the second with a sound dragged into frame 2:
The code is as follows:
Now I saved the file, and exported as swf. But when I tested it, the sound sounded horrible! It turned out that Flash downsamples the sound by default (?!), so I had to tune it by going into the Flash Library, and choosing a better compression for the imported sound:
By now, we have our sound player.
To test it, you open the swf file, right-click on it, and then choose "play". The swf will then go to frame 2, and play the sound.
Now we can move on to the html file.
It contains 3 necessary things:
- flash movie
- a link
- javascript which ties it together, and creates the interactivity.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>sound player in html</title>
<script type="text/javascript">
// checks if flash movie exists, then if the function to call exists,
// then calls the function.
function playSound()
{
var flashElement_obj = document.getElementById("soundplayer");
// check if we have a flash document, and if the flash document has a 'startSound' attribute.
if (flashElement_obj && flashElement_obj.startSound)
{
flashElement_obj.startSound();
}
}
// loop through all links in the page, check if the link has a class name of 'lnk_sound',
// if so, add a mouse-over event to call the playSound function.
function addSoundToLinks()
{
var links_arr = document.getElementsByTagName("A");
for (var i=0; i<links_arr.length; i++)
{
if (links_arr[i].className.indexOf("lnk_sound") > -1)
{
addEvent(links_arr[i], "mouseover", playSound);
}
}
}
// this is used to attach events to objects.
// If you are unfamiliair with it, then just leave it here, and move on :)
function addEvent( obj, type, fn ) {
if (obj.addEventListener) {
obj.addEventListener( type, fn, false );
EventCache.add(obj, type, fn);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
EventCache.add(obj, type, fn);
}
else {
obj["on"+type] = obj["e"+type+fn];
}
}
var EventCache = function(){
var listEvents = [];
return {
listEvents : listEvents,
add : function(node, sEventName, fHandler){
listEvents.push(arguments);
},
flush : function(){
var i, item;
for(i = listEvents.length - 1; i >= 0; i = i - 1){
item = listEvents[i];
if(item[0].removeEventListener){
item[0].removeEventListener(item[1], item[2], item[3]);
};
if(item[1].substring(0, 2) != "on"){
item[1] = "on" + item[1];
};
if(item[0].detachEvent){
item[0].detachEvent(item[1], item[2]);
};
item[0][item[1]] = null;
};
}
};
}();
addEvent(window, 'unload', EventCache.flush);
// if page has loaded, call the addSoundToLinks function.
addEvent(window, 'load', addSoundToLinks);
</script>
</head>
<body>
<!--
The sound player swf.
It is not necessary to use a javascript function to write down this flash content, because the movie has no user interactivity.
-->
<object type="application/x-shockwave-flash" data="soundplayer.swf" id="soundplayer" name="soundplayer" width="1" height="1">
<param name="movie" value="soundplayer.swf"/>
<param name="menu" value="false"/>
<param name="wmode" value="transparent"/>
<param name="bgcolor" value="#ffffff"/>
</object>
<a href="#" class="lnk_sound">Hover over this link...</a>
</body>
</html>
You can also just download the code here.
Or check out the working example online.
Recent Comments