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.             Meep me.             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;">
 <script type="text/javascript">
 <!--
  document.write(OLop95?
   '<object'
  +' name="myHarley" id="myHarley"'
  +' width="1" height="1"'
  +' type="audio/wav"'
  +' data="HarleySound.wav"'>
  +' <param name="hidden" value="true">'
  +' <param name="autostart" value="false">'
  +' <param name="loop" value="true">'
  +'<\/object>':
   '<embed'
  +' name="myHarley" id="myHarley"'
  +' width="1" height="1"'
  +' type="audio/wav"'
  +' src="HarleySound.wav"'
  +' hidden="true"'
  +' autostart="false"'
  +' loop="true">'
  +'<\/embed>');
 //-->
 </script>
</div>


<div id="MeepMeepDiv" style="position:absolute; visibility:visible; z-index:0;
 top:0px; left:0px; width:1px; height:1px;">
 <script type="text/javascript">
 <!--
  document.write(OLop95?
   '<object'
  +' name="myMeepMeep" id="myMeepMeep"'
  +' width="1" height="1"'
  +' type="audio/wav"'
  +' data="MeepMeep.wav">'
  +' <param name="hidden" value="true">'
  +' <param name="autostart" value="false">'
  +' <param name="loop" value="false">'
  +'<\/object>':
   '<embed'
  +' name="myMeepMeep" id="myMeepMeep"'
  +' width="1" height="1"'
  +' type="audio/wav"'
  +' src="MeepMeep.wav"'
  +' hidden="true"'
  +' autostart="false"'
  +' loop="false">'
  +'<\/embed>');
 //-->
 </script>
</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.myMeepMeep.play(); return overlib(. . .);"
onmouseout="nd();"
Internet Explorer still supports that simple mechanism, but alas, it has languished in the other browsers, though the HTML5 audio element will provide a simple alternative.  Here we use a "back door" strategy of also defining (via an imported .js file) the embed elements (or object elements for Opera v9.5+, see below) 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 = OLop95?
 '<object'
+' name="theHarley" id="theHarley"'
+' width="1" height="1"'
+' type="audio/wav"'
+' data="HarleySound.wav">'
+' <param name="hidden" value="true">'
+' <param name="autostart" value="true">'
+' <param name="loop" value="true">
+'<\/object>':
 '<embed'
+' name="theHarley" id="theHarley"'
+' width="1" height="1"'
+' type="audio/wav"'
+' src="HarleySound.wav"'
+' hidden="true"'
+' autostart="true"'
+' loop="true">'
+'<\/embed>';

var MeepMeep = OLop95?
 '<object'
+' name="theMeepMeep" id="theMeepMeep"'
+' width="1" height="1"'
+' type="audio/wav"'
+' data="MeepMeep.wav">'
+' <param name="hidden" value="true">'
+' <param name="autostart" value="true">'
+' <param name="loop" value="false">
+'<\/object>':
 '<embed'
+' name="theMeepMeep" id="theMeepMeep"'
+' width="1" height="1"'
+' type="audio/wav"'
+' src="MeepMeep.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+'">'
 +'<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(MeepMeep);
  return overlib('What Fun!!!!',
  FGCLASS,'olfg', TEXTFONTCLASS,'oltxt16', BORDER,2, BGCOLOR,'#00ff00',
  WRAP, BASE,2, HAUTO, STATUS,'What Fun!!!!');"
 onmouseout="stopIt(); nd();">MeepMeep</a> me.
 
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 Opera through its version 9.27 handled embed elements equivalently to the other browsers, 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 if we used embed with Opera v9.5, both the Harley and MeepMeep sounds would play, inappropriately, on document load, and the Harley sound wouldn't persist on prolonged hover nor stop promply on mouseout.  A bug report was sent to the Opera folks, but unfortunately the Opera v9.6 and subsequent releases have remained lacking in this respect.  Also note that the Google Chrome and Safari browsers, like all the other non-Opera browsers, do handle the embed element with these attributes as intended.  The hidden and autostart attributes are handled properly in object elements for Opera v9.5+, but the loop attribute is ignored.  As a partial workaround, the procedures have been set up so as to use object for Opera v9.5+, and otherwise use embed elements.  The consequence of a disfunctional loop attribute for Opera v9.5+ in the above Harley example is that the audio does not keep repeating for as long as the mouse hovers over the link, but does for Opera through v9.27 and for the non-Opera browsers.  The HTML5 audio element includes a loop attribute, and should solve this problem when implemented across the supported browsers.
 
Use your browser's View Source option to see the
javascript code, HTML markup, and CSS rules directly.
 
 

Copyright Foteos Macrides
  2002-2011.
  All rights reserved.