Adding sound effect to A tag with jQuery

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>

Share the love

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement