Learn how to employ the JavaScript mouseover function to play sound and music on web pages.

Sponsored Links

Adding sound or music to web pages - JavaScript tip

Introducing music on your personal web site adds flavor. This tip explains how sound or music can be played when a visitor passes the mouse pointer over an image.

Move your mouse over the keys below to play Brahms Waltz #3 - please make sure that the speakers are on.
Note: This tip will work only in Internet Explorer.

Piano playing Brahms waltz piece

The code is simple and has to be included in the body section of your HTML document.

<bgsound src="#" id="brahms" autostart="true">

<img src="keys.gif" width="220" height="126" border="0"
onmouseover="document.all.brahms.src='brahms.mid'">

You can also play sounds when the mouse cursor passes over links. For this we use the anchor tag and the onmouseover JavaScript event handler function.

This link will play a beep sound when the mouse passes over it. Clicking this link will take you to the home page.

<bgsound src="#" id="beep" autostart="true">
<a href="some_page.html" 
onmouseover="document.all.beep.src='beep.wav'">
Hotspot</a>

You can also use free online services such as iLike.com to create and add a music playlist on your web page. There are thousands of songs to choose from and the best part is... you don't need to register and open an account. Read add music to a web site for step by step instructions.


Page contents: Adding sounf and music to web pages and getting them to play with mouseovers using JavaScript.

AddThis Social Bookmark Button