overLIB - Associating audio with overlibmws popups

Examples of Popups with Audio via the
overlibmws DHTML Popup Library

maintained by Foteos Macrides at Macrides Web Services
Discuss these examples, seek help, and offer suggestions
for audio support via the overlibmws Support Group.

These examples work best on broadband, but do work on dialup,
and not badly once the audio files are in cache.

I love my Harley. Chime in. Greek dances.

The first example plays an audio file with looping while the user hovers over the link, whereas the second example plays an audio file once (i.e., without looping) per hover (onmouseover). The third example uses a playlist, with looping through the list, and random shuffling of the choices from the list on successive hovers over the link. The first two examples use procedures suited for relatively small audio files in one of the "old-fashioned" formats, e.g., .wav files as in these two examples, or .mid files. The third uses a freeware flash-based player for .mp3 files. Although it is geared toward sets of large files that can be problematic without broadband, such as the dance files in the third example, it also can be used with single, relatively small .mp3 files which "speak" the content of displayed DHTML popups, to increase their accessibility beyond the means disussed in the support document on keyboard-invoked popups.
[Opera v9.5+ users see below]

Here is the relevant javascript code and HTML markup:

As a supplement to the overDiv positioned div for the visual display of popups, we declare an audioDiv positioned div for the concomittant audio presentations:

<div id="audioDiv" style="position:absolute; visibility:hidden;
   z-index:0;"></div>

It should be a direct child of the body (i.e., following the body start tag and not encased in any other container element).

We then include markup which helps to "pre-load" our two .wav audio files and the image for the popup of the third example:

<div id="harleyDiv" style="position:absolute; visibility:visible; z-index:0;

    top:0px; left:0px; width:1px; height:1px;">

    <embed

     name="myHarley" id="myHarley"

     width="1" height="1"

     type="audio/wav"

     src="HarleySound.wav"

     hidden="true"

     autostart="false"

     loop="true">

    </embed>

   </div>

<div id="chimesDiv" style="position:absolute; visibility:visible; z-index:0;

    top:0px; left:0px; width:1px; height:1px;">

    <embed

     name="myChimes" id="myChimes"

     width="1" height="1"

     type="audio/wav"

     src="chimes.wav"

     hidden="true"

     autostart="false"

     loop="false">

    </embed>

   </div>

<script type="text/javascript">

   //<!--

   dance = new Image();

   dance.src = "../image/dance.gif"

   //-->

   </script>

In the olden days of the original Netscape Navigator and the early Internet Explorer those embed elements would have been sufficient to play the audio files, and to stop them if the loop attritute is set to "true" such that the files do not stop themselves after single plays. For the first embed element we would use:

onmouseover="document.myHarley.play(); return overlib(. . .);"

   onmouseout="document.myHarley.stop(); nd();"

and for the second embed element we would use:

onmouseover="document.myChimes.play(); return overlib(. . .);"

   onmouseout="nd();"

Internet Explorer still supports that simple mechanism, but alas, it has languished in the other browsers, with no intended simple alternative made available. We thus will use a "back door" strategy of also defining (via an imported .js file) the embed elements as string variables, with new name and id strings so that they remain unique across elements in the document, and with the autostart attribute set to true:

var harley =

    '<embed'

   +' name="theHarley" id="theHarley"'

   +' width="1" height="1"'

   +' type="audio/wav"'

   +' src="http://www.macridesweb.com/audio/misc/HarleySound.wav"'

   +' hidden="true"'

   +' autostart="true"'

   +' loop="true"><\/embed>';
   


   var chimes =

    '<embed'

   +' name="theChimes" id="theChimes"'

   +' width="1" height="1"'

   +' type="audio/wav"'

   +' src="http://www.macridesweb.com/audio/misc/chimes.wav"'

   +' hidden="true"'

   +' autostart="true"'

   +' loop="false"><\/embed>';

so that we can play an audio file simply by loading the corresponding string variable as HTML into our audioDiv postioned div. For the .mp3 file we define a string variable of the form flashMp3s# which points to our play list (or to others, if we had more play lists for this document). We also define a function which accepts that as its first argument, plus three more arguments associated with the flash-based player, and returns a string variable with an object and embed element set up for loading as HTML into our audioDiv:

var flashMp3s01 = '../audio/misc/songlist01.txt';
   


   function flashMp3(list, loop, shfl, vol) {

    var flashMp3str =

     '<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="mp3_player" align="">'

    +'<param name="movie" value="../flash/mp3_player.swf'

    +'?sl='+list+'&l='+loop+'&sh='+shfl+'&v='+vol+'"&gt;'

    +'<param name="quality" value="high">'

    +'<param name="bgcolor" value="#dddbff">'

    +'<embed
   src="../flash/mp3_player.swf?sl='+list+'&l='+loop+'&sh='+shfl+'&v='+vol+'"'

    +' type="application/x-shockwave-flash"'

    +' pluginspage="http://www.macromedia.com/go/getflashplayer"'

    +' width="1" height="1" name="mp3_player" align=""'

    +' quality="high"'

    +' bgcolor="#dddbff">'

    +'<\/embed>'

    +'<\/object>';

    return flashMp3str;

   }

Now we can define a playIt() function which manipulates these strings and loads our audioDiv:

function playIt(whichsound, a1, a2, a3, a4) {

    if (OLloaded && OLgateOK && !OLns4) {

     var o = OLgetRef('audioDiv');

     if (o) {

      cClick();

      o.innerHTML = (a1)?whichsound(a1, a2, a3,
   a4):whichsound;

      o.style.visibility = 'visible';

     }

    }

    return false;

   }

It has a required first argument which is either the name of an embed string variable (in this document, for our .wav audio files) or a function reference (name without parens) which in this document is for our flashMp3 function. The optional second through fifth arguments are for the first through fourth arguments of a flashMp3 function call, which is performed if at least one optional argument is present.

We also define a stopIt() function:

function stopIt(){

    if (OLloaded && OLgateOK && !OLns4) {

     var o = OLgetRef('audioDiv');

     if (o) {

      o.innerHTML = '';

      o.style.visibility = 'hidden';

     }

    }

    return false;

   }

which we call onmouseout (together with an nd call) if the popup and audio were called onmouseover and the popup is not STICKY. For STICKY popups, which are closed via cClick calls, e.g., by the Close link in the CAPTION, we create a replacement which daisy-chains it to stopIt:

var cClickOld = cClick;
   


   function cClickNew() {

    if (OLloaded && OLgateOK){

     if (over && OLshowingsticky) stopIt();

     cClickOld();

    }

    return false;

   }
   


   cClick = cClickNew;

Note that we use the replacement cClick in the body start tag:

<body onunload="cClick();" onresize="cClick();">

to ensure that any audio associated with any open STICKY is terminated on leaving or resizing the current document. We still can simply minimize the current window and continue listening to the audio of a STICKY popup while working in another window.

If we had secondary popups with audio, we correspondingly would define and use an audioDiv2 positioned div, and a playIt2, a stopIt2, and a replacement cClick2 function to use in conjunction with overlib2 and nd2 calls.

We now are ready to make the calls for our popups with audio:

I love my <a

    href="javascript:void(0);"

    onmouseover="playIt(harley);

     return overlib('Keep your mouse on this link to keep hearing my '

     +'wonderful Harley Davidson motorcyle.&lt;br&gt;&lt;br&gt;'

     +'If you don\'t hear the sound or it is choppy, then the audio '

     +'file may still be loading, so hover over this link again later.',

     CAPTION,'I Love My Harley', CGCLASS,'olcg', CAPTIONFONTCLASS,'olcap',

     FGCLASS,'olfg', TEXTFONTCLASS,'oltxt12', BORDER,2, BGCOLOR,'#00ff00',

     WIDTH,210, BASE,3, HAUTO, STATUS,'Sound of My Harley');"

    onmouseout="stopIt(); nd();">Harley</a>.

<a

    href="javascript:void(0);"

    onmouseover="playIt(chimes);

     return overlib('What Fun!!!!',

     FGCLASS,'olfg', TEXTFONTCLASS,'oltxt16', BORDER,2, BGCOLOR,'#00ff00',

     WRAP, BASE,2, HAUTO, STATUS,'What Fun!!!!');"

    onmouseout="stopIt(); nd();">Chime</a> in.

Greek <a

    href="javascript:void(0);"

    onmouseover="playIt(flashMp3,
   flashMp3s01, 1, 1, 100);

     return overlib('&lt;img '

     +'src=\'../image/dance.gif\' alt=\'\' width=\'107\' height=\'193\'&gt;',

     CAPTION,'Opa opa!!!', CGCLASS,'olcg', CAPTIONFONTCLASS,'olcap',
 
     FGCLASS,'olfg', BORDER,2, BGCOLOR,'#00ff00', STICKY, SCROLL,

     WRAP, BASE,2, RELX,-10, RELY,10, STATUS,'Greek dances');">dances</a>.

Opera v9.5+ issues:

Note that these procedures all worked perfectly in Opera through version 9.27, but Opera v9.5 lost its handling of several attributes for embed elements, including hidden="true", autostart="false" and loop="true". The first doesn't matter in this context because we set the size to 1px, but both the Harley and Chimes sounds play, inappropriately, on document load, and the Harley sound doesn't persist on prolonged hover nor stop promply on mouseout. A bug report has been sent to the Opera folks, and hopefully they will restore handling of those attributes in a future release, but unfortunately the v9.6 release has remained lacking in this respect. Also note that the new Google Chrome browser does handle the embed element with these attributes properly.

Use your browser's View Source option to see the
javascript code, HTML markup, and CSS rules directly.