Learn how to employ the JavaScript mouseover function to play sound and music on web pages.
adding sound or music to web pages, JavaScript tip, sound on mouseover, including sound and music on web pages, embedding sound and music on web pages
Adding sound or music to web pages - JavaScript tipGo to Adding sound or music to web pages - JavaScript tipHTML & JavaScriptGo to HTML and JavaScript tips and tricksTips and tricksGo to web development Tips and tricksHomepage

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>

AddThis Social Bookmark Button


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

Page URL: http://www.webdevelopersnotes.com/tips/html/ adding_sound_or_music_to_web_pages_javascript_tip.php3



Join Mailing List


Feedback/Questions




50+ web hosting FAQs

Search engine for your website

Free software from Google - The Google Pack Collection

Create your own search engine
Search WebDevelopersNotes.com