navigational links

[markd]

hello everyone,

I am a beginning web designer and am trying to create navigational links that make an audible "click" when the user hovers over the link. I have created the menus for my links, and have downloaded a .wav file for the "click", but cannot figure out how to make the "click" play, when I hover over the link. Any help would be greatly appreciated!

[Wickham]

I did it a few years ago, but I disabled it eventually.

 

I looked in the Windows folders for all the sounds and picked .wav files from there. For other mouseovers I created a short messages on my sound recorder.

 

The method uses javascript. I had mouseover and mouseout images but they aren't part of the sound code. Only the title="jakarta" is used by the javascript to play the sound.

 

Jakarta - my leaving party

 

and similarly for the other buttons with different titles and .wav files.

 

 

 

SCmediaPath="";

SCmediaDelay=300;

 

SCmediaSetup( "Clifton", "../sounds/im.wav", "Jakarta", "../sounds/jakarta.wav", "Falklands", "../sounds/falklands.wav", "Basketmakers", "../sounds/type.wav" );

 

 

The javascript file playmedia.js is:-

/*
* (C)2006 Stephen Chalmers  
*
* This notice must not be removed 
*
* Plays media files on hover to provide gratuitous 
* sound effects or talking tooltips.
*
*/


/*** These instructions may be removed ***


Installation and Configuration
==============================

SAVE THIS TEXT/DOCUMENT AS: playmedia.js 

All the links that will play media files must be given a 'title'
attribute, e.g.

Contents

There is no need to insert 'onmouseover' parameters to the links.

At any point in the HTML file /below/ the last link, insert the
following code. Note: If playmedia.js is located in a different
folder, specify a relative path.


 


<br /><br />SCmediaPath="";<br />SCmediaDelay=300;<br /><br />SCmediaSetup( "title1", "file1.wav", <br />              "title2", "file2.wav",<br />               ........ );<br /><br />

The parameters passed to SCmediaSetup() above must be substituted
with your own, as explained below.

Example.

You have three links whose titles are: "Products", "Ordering", and 
"Site Map" and you want to assign them the sound files: 'newprod.wav',
'ordering.wav', and 'map.wav' respectively.

SCmediaSetup( "new products", "newprod.wav", 
             "ordering", "ordering.wav", 
             "site map", "map.wav" );

Notes
=====
Not all the links in the document need be involved in playing sounds.

Title / Filename parameter pairs need not be passed in the order in
which the links appear in the document.

The title specified for each link need not be its full title, a unique
substring is sufficient, provided that it does not appear within the
title of a different link. Thus the example above could have been written:

SCmediaSetup( "new p", "newprod.wav", 
             "ord", "ordering.wav", 
             "map", "map.wav" );

This feature makes it very easy to configure all links to play the
same file (if you must), by specifying a single character common to
the titles of all the links.              
For instance, if all link titles end with a period (.), the 
following statement makes all links play 'blip.wav':              

SCmediaSetup( ".", "blip.wav");

Paths
=====
If the sound files are located all together in a different folder, 
specify a /relative/ path in the SCmediaPath variable, otherwise leave it unchanged.

For example, if the files are in a parallel folder called 'media', specify:

SCmediaPath="../media/";

Alternatively, paths may be specified as a part of each filename parameter.

Timeout
=======  
To prevent premature triggering, there is a default timeout of 400 
milliseconds between mouseover and the instruction to play a file. 
The overall delay is dependent upon the particular plugin used.
If the mouse cursor is removed before the timeout expires, the file
is not played. 

Mute
====
To allow users to disable sound, place the following link anywhere
in your HTML.

Sound Mute

Additionally, one could assign the link a title and have it play a wav
file that says 'mute'.

Operation
=========
No media elements are created on startup, therefore when a link is
hovered for the first time, there may be a short delay while the media
plugin loads. This can be obviated by including a hidden embed tag like:

 ,

however loading of the document will be commensurately delayed.

If a media-playing link loads a new document in the current frame/
window, and the link is clicked immediately, there may not be time to
play the file entirely or at all, as the script will be dismissed 
when the new page loads.

This script is not coded to work in conjunction with other mouseover
scripts operating on the same links.

******** DO NOT EDIT BELOW THIS LINE ************/  

function SCmediaPlay(soundFile)
{
this.soundFile=soundFile;
this.objRef=null;
this.canPlay=true;
this.tm=null;
this.buffer=null;
this.preLoad();
}

SCmediaPlay.prototype.playSound=function()
{
 if(this.canPlay)
 {
  if(this.objRef!=null)
   {
    document.body.removeChild(this.objRef);
    this.objRef=null;
   }

  if( (this.objRef=document.createElement('embed'))==null )
    window.status="ERROR - Element not created: ["+(typeof this.objRef)+"]";
  else 
   {
    this.objRef.setAttribute("width","0");
    this.objRef.setAttribute("height","0");
    this.objRef.setAttribute("hidden","true");
    this.objRef.setAttribute("src", this.soundFile);

    document.body.appendChild(this.objRef); 
   }
 }
}

SCmediaPlay.prototype.preLoad=function()  
{                                         
this.buffer=new Image().src=this.soundFile;
}

String.prototype.contains=function(substr)
{
return new RegExp(substr,"i").test(this);
}

var SCmediaPath="", SCobjTable=[];

function SCmediaSetup()
{
if(document.body && document.body.appendChild)
{
 for(var i=0; i   for(var j=0, ll=document.links.length; j    if( document.links[j].title.contains( arguments[i] ) )
   { 
    var idx = SCobjTable.length
    SCobjTable[ idx ] = new SCmediaPlay( SCmediaPath+arguments[ i+1 ] )
    document.links[ j ].onmouseover=new Function("SCobjTable["+idx+
    "].tm=setTimeout('SCobjTable["+idx+"].playSound()', 300)");
    document.links[ j ].onmouseout=new Function("clearTimeout(SCobjTable["+
    idx+"].tm);if(SCobjTable["+idx+"].objRef){document.body.removeChild(SCobjTable["+
    idx+"].objRef);SCobjTable["+idx+"].objRef=null;}") ;  
   }
}  
}

function toggleMediaPlay()
{
for(var i=0; i  SCobjTable[i].canPlay^=true;     
}

 

Edit: I did find that because I was using several sound files, they were a bit slow to operate and some preloading code would be advisable. If you click on a link too quickly the sound may not play at first until you click again but preloading should solve this, or it may be alright if you only have one sound file with very low KB size.

Edited August 9, 2009 by Wickham

[PicnicTutorials]

The one I used on hover happens instantaniously (via flash/JS). But wouldn't it be better to call the sound on :active? Does JS have an on :active? Like it's cousins onmouseover etc...

Edited August 9, 2009 by Eric

[markd]

Hi Wickham,

Thank you for you reply... I have been trying your recommendation, but am still unable to get the audio to play. Obviously I am doing something wrong. I have no experience with JS, so I am a bit confused. I seem to understand what you are saying, but I am not sure what the playmedia.js file is. I put the Script code you supplied in my HTML document below the last link as you said and I added a "title" to the links, but what exactly is the playmedia.js file?

[markd]

Hi Wickham... I GOT IT.... disregard my last reply, I finally figured out what the playmedia.js file was.

 

It works beautifully, thanks a billion!!!

 

Mark

[Wickham]

The playmedia.js file is essential to use the title in the link and find the audio file and play it.

 

Put the js file (all of it) in the same folder as your html file and put the link

above the script tags. Use ../ if the js file is in a higher folder than the html file.

 

Follow the instructions in the playmedia.js file.

Edited August 12, 2009 by Wickham