A sound-in-your-site howto

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:
timeline

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.

del.icio.us Digg StumbleUpon Facebook Technorati Fav reddit Google Bookmarks
| Viewed 2856 times

No comments yet.

(will not be published)
Leave this field empty

predator