Back jQuery

Adding sound effect to A tag with jQuery

WRITTEN BY ON 23 Jan 2011
36,178 VIEWS • SHARES
9 comments

This trick is pretty simple and effective. It appends a hidden embed tag to the link which play the sound once only. These examples come with click and hover events.

JS - jQuery

$(function(){
	$('a.click').click(function(){
		$('embed').remove();
		$('body').append('<embed src="click.wav" autostart="true" hidden="true" loop="false">');
	});

	$('a.hover').mouseover(function(){
		$('embed').remove();
		$('body').append('<embed src="hover.wav" autostart="true" hidden="true" loop="false">');
	});
}); 

HTML/XHTML

<p><a href="#" class="click">Click here for sound effect</a></p>
<p><a href="#" class="hover">Hover here for sound effect</a></p>
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

9 comments
kalesh 12 years ago
ok its working only some browsers only..hw it can work in mozzila.....
Reply
salawu azeez olanrewaju 12 years ago
nice
Reply
Sam 12 years ago
Thany's right. Now one of my slidshows isn't showing even though it's not actually playing the sound.
Reply
code19 12 years ago
Maybe you should take a look at jsound plugin by Havalite: http://www.havalite.com/?p=97
Reply