Back jQuery

Adding sound effect to A tag with jQuery

WRITTEN BY ON 23 Jan 2011
30,549 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 4 years ago
ok its working only some browsers only..hw it can work in mozzila.....
Reply
salawu azeez olanrewaju 4 years ago
nice
Reply
Sam 4 years ago
Thany's right. Now one of my slidshows isn't showing even though it's not actually playing the sound.
Reply
code19 4 years ago
Maybe you should take a look at jsound plugin by Havalite: http://www.havalite.com/?p=97
Reply