MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create a Menu with sound effects using Javascript and HTML

Let us see with the help of this tutorial how to add sound when the cursor is moved over the links and adding sounds in a web page.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

We will now incorporate a short sound effect to the page for some specific actions. The example here includes at the moment when the user moves the mouse cursor over a link present on the web page. With the help of the helper function, we can easily incorporate the sound effect to a link which makes relatively simple to add the sound effect to all the links present on the web page.

Follow the below steps in order to get the outcome of adding sound effects to a web page.

SoundEffect Menu

Figure 1: Sound Effect

Step 1

The first step is to incorporate the script mentioned below to the header section of the web page. This is then altered to the "soundfile var" so that the file of the sound can be located.

Listing 1: Adding the script to the header section of the web page

<sound source="#" id="soundfactor" loop=n autostart="yes" />
<script type="text/javascript">
var filesound="testfile.wav  " // This is a sound file path

function soundplay(filesound){
if (document.list && document.getAttributeByNumber){
document. getAttributeByNumber("soundeffect").source="" //This needs to be reset to default in case of any issues
document. getAttributeByNumber("soundeffect").source=filesound
}
}

function sound(tag, filesound, mainElement){
if (!console.event) return
var src=event.sourceAttribute
while (src!=mainElement && src.tagName!="HTML"){
if (src.tagName==tag.toUCase()){
soundplay(filesound)
break
}
src=src.mainElement
}
}

</script>

Step 2

The second step now is to make the arrangement so as to make the element set and fetch the sound of JavaScript. This can be done either on the hovering of the link or it can also be done on the access of click of the link. Below code will display the sound when the user takes action on the link.

Listing 2: Elements set up for working of Sound Effect

<a href="#" Mouseover="soundplay(filesound)">Example 1</a>
<a href="#" Mouseover="soundplay('testfile.wav')">Example 2</a>

The above code is to make the sound file pass on the link in order to make the sound play. This is done other than the file that is being specified by default within the script.

We will now see the process to incorporate a sound to all the web elements on a particular type on the web page. With the help of the add-on function that are being included in the script, we can incorporate the effect of sound very easily to all the web elements that belong to a specified type. One category of these specific types is links that are present on the page. Assume you are willing to incorporate a sound to the links that are present in the menu of the web page. This web page consists of more than 15 links. Rather than adding the code to the entire links present on the web page, we can just define a single event of onMouseover.

Below lists the code example of the same:

Listing 3: Adding one single event to the links present on the page

<div id="menu" Mouseover="sound('A', soundfile)">
<a href="http:// www.mrbool.com/home">Home</a>
<a href="http:// www.mrbool.com /channels">Channels</a>
<a href="http:// www.mrbool.com/courses">Courses</a>
<a href="http:// www.mrbool.com/publishpost">PublishPost</a>
<a href="http://www.mrbool.com/buycredits">BuyCredits</a>
</div>

With the help of the above code, all the links that are inside the DIV, they will play the sound on hovering over the link. And then when we want to implement the sound to each and every link that is present on the web page, the onMouseover code needs to be added in the body tag part.

The function by the name of "bindsound()" is normally used to accepts 3 parameters and then twe have a tag name of the element which is used to connect the sound to the following:

  • <a>, <span>
  • The sound file to play irrespective of the sound file’s path and
  • This “keyword” and should never be altered

The good java script sound effect works in the case when we have the duration as short as possible which can be less than a second. When we have a sound clip that is of the long duration, the visitors of the webpage will get irritated and may get out of the site.

The two tags that are used in order to incorporate s sound to the document are Sound tag and Embed tag. The sound tag is used in Internet Explorer browser and embed tag is used in Netscape browser. The sound tag is used to get the visitor hear the background noise of the web page. This means that when the user visits the web page, then he/she will get to hear the sound from the page.

Talking about the embed tag present Netscape, we can make use of the attribute so as to play the sound at the time of loading of the page. Also this works when the user clicks on the link present on the page.

Let us now see how to make use of these two tags in order to hear the sound from the web page. Here in we will make use of the file that will provide the sound of the highest quality.

Listing 4: Using Embed tag

<Embed Source=file.mid Autostart=true Width=120 Height=50 LOOP=n>

Let us see the meaning of the above code. The attributes of the code above is listed below.

When the value of autostart attribute is set to true, this means that as soon as the document is loaded, the sound is played of its own. Background sound will then be played in this case. The value can also be set to false and in this case we will get to hear the sound only in case when the play button is accessed.

The meaning of the next attribute which is listed as loop informs the browser about the number of times the sound is be played. You can set the value of loop as an integer; also it could be true and also can be set to false. In case the value is set to true, we can see the browser playing the sound on the continuous basis. This will keep on playing until and unless the stop button is accessed. This button is present on the console.

With the help of width and height attribute, it can be justified that what will be the sound control attributes. We need to define the appropriate numbers to these attributes and then we will see the browser displaying then in the entire console. The sound console is normally not displayed by the browser when the width and height attributes are given the values as 0 and 2. Also in case we give the values of these attributes to be very small, in that case as well we will not see the browsers displaying the complete image.

We can also hide the sound window in the following manner.

Listing 5: Hiding the sound window

Hidden=yes like this: <Embed Source=file.mid Autostart=true Hidden=yes LOOP=n>

The alternate way to hide the sound window is listed below. This is generally for the ones that do no not support the embedded sound.

Listing 6: Alternate way to hide the sound window

<embed source="sound.mid" hidden="yes" autostart="true" loop="n">

The below lists the code to be used by the browsers not supporting embed tag.

Listing 7: Using <SOUND> tag:

<Sound source=file.mid LOOP=n>

The value of the loop can be any number which includes negative integers as well.

It is very irritating to know about the differences in the two browsers and hence it makes better to make use of embed as well as sound tag which will make the visitors to hear a good background noise from the web page.

The embed tag is not usually supported by the IE browser. However there is one indirect way with the help of which this can be made possible. We have plugins installed with the help of Netscape that are normally used in order to achieve this. In order to hear the sound from the embed tag for the users of IE browser; it is required for the Netscape to be installed on the machines of the users. Assume we have both the tags that are present in the document, we take the help of the <SOUND> tag. However this will notify the message for the non-playing of sound that is within the embed tag thereby making this approach on the weaker side.

Listing 8: Defining the error tag

Debugging
Midi is not playing
OK <This is a Button>

Or

Midi Debug
Midi Sound is not playing
OK <This is a Button>

We just need to click on the OK button so as to move to the next step. We anyhow suggest you to make use of the both tag which will ensure that the visitors of the website can get the feel of the background sound.

One can also make use of the embed tag that allows the users to access the sound from the sound console.

Conclusion

This tutorial focussed on the working on the use of sound effects in a web page. Hope this was helpful.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login