October 31, 2007 0

Playing a Wav File with a IE CSS Expression

By Levi Senft in Web

Earlier today at Humaniz we were making fun of evil web practices like background sounds and I got the idea of playing a sound in IE using CSS expressions, which are in general another evil practice, although sometimes necessary.

After I got this bad boy working in IE I thought I would make it cross browser. I decided I would test to see if my expressions are being evaluated and if they aren’t I could attach the events some other way. I got the idea to set a body color with an expression, then later down in the code test to see if the body color had been set.

Here’s the code, Marty this is dedicated to you:

    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2 <html>
    3     <head>
    4         <title>More Cowbell</title>
    5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6         <META HTTP-EQUIV="imagetoolbar" CONTENT="no" />
    7         <style type="text/css">
    8             body {
    9                 background-color: #e8e8e8;
   10                 /*
   11                  Any browser other than ie will ignore this color rule.
   12                  Later we will test the color value to make sure we are
   13                  using ie.
   14                 */
   15                 color: expression("#666666");
   16                 overflow: hidden;
   17             }
   18             body div {
   19                 height: 600px;
   20                 width: 800px;
   21                 margin: 60px auto;
   22                 background-color: white;
   23                 text-align: center;
   24             }
   25             body div img {
   26                 margin: 90px auto 0px auto;
   27                 border: none;
   28             }
   29
   30             body div a {
   31                 /* set our ie mouse off */
   32                 text-decoration: expression(offbell());
   33
   34             }
   35             body div a:hover {
   36                 /* set our ie mouse on */
   37                 text-decoration: expression(onbell());
   38             }
   39
   40         </style>
   41     </head>
   42     <body id="cbBody">
   43         <div>
   44             <a href="#"><img id="cbImage" src="cowbell_384x384.png" alt="Cowbell" align="center" /></a>
   45         </div>
   46         <span id="wrapper">
   47         <bgsound id="sound">
   48         </span>
   49         <!--<embed id="sound" width="0" height="0" autostart="false" loop="false" src="cowbell.wav"></embed>-->
   50         <script type="text/javascript">
   51             // Setup an array of our wav files
   52             var wavs = ["dontfearthereapertake1.wav", "greatbutmorecowbell.wav", "igottafever.wav", "igottahavemorecowbell.wav", "igottahavemorecowbellbaby.wav", "ilikewhatimhearing.wav", "tellinfellasthatcowbell.wav", "cowbell.wav"];
   53
   54             // set our hovering flag - this will keep our events from being executed a million times
   55             var hovering = false;
   56
   57             // Our mouse over event
   58             function onbell () {
   59                 // Are we already hovering?
   60                 if (!hovering) {
   61
   62                     // we are now hovering
   63                     hovering = true;
   64
   65                     // play a random wav in ie
   66                     if (document.all) {
   67                         document.all.sound.src = randomWav();
   68                     }
   69
   70                     else {
   71                         // This is a little evil, but it is more cross browser that the Play() function.
   72                         document.getElementById("wrapper").innerHTML = '<embed id="esound" width="0" height="0" autostart="true" loop="false" src="' + randomWav() + '"></embed>';
   73                     }
   74                 }
   75
   76                 // set our text decoration
   77                 return "none";
   78             }
   79
   80             // Our mouse off event
   81             function offbell () {
   82
   83                 // we are no longer hovering
   84                 hovering = false;
   85
   86                 // set our text decoration
   87                 return "none";
   88             }
   89
   90             // return a random wav from our array
   91             function randomWav() {
   92
   93                 var wav = wavs[Math.floor(Math.random()*wavs.length)]
   94
   95                 return wav;
   96             }
   97
   98             // Check to see if we are in ie by seeing if our expression was evaluated
   99             if (document.getElementById("cbBody").style.color != "#666666") {
  100
  101                 var el = document.getElementById("cbImage");
  102
  103                 // set our event handlers using which ever of these three methods is available
  104                 if (el.addEventListener) {
  105                     el.addEventListener ("mouseover",onbell,false);
  106                     el.addEventListener ("mouseout",offbell,false);
  107                 } else if (el.attachEvent) {
  108                     el.attachEvent ("onmouseover",onbell);
  109                     el.attachEvent ("onmouseout",offbell);
  110                 } else {
  111                     el.onmouseover = onbell;
  112                     el.onmouseout = offbell;
  113                 }
  114
  115             }
  116         </script>
  117     </body>
  118 </html>

I have a demo page here.

This is a little stupid, but I’m sure there are some techniques that can be lifted and used for something productive.

Wes you owe me a $1.

Tags: , ,

Leave a Reply