{"id":84,"date":"2012-10-04T14:29:29","date_gmt":"2012-10-04T18:29:29","guid":{"rendered":"https:\/\/havalite.com\/?p=84"},"modified":"2022-11-22T14:38:08","modified_gmt":"2022-11-22T19:38:08","slug":"play-audio-onhover-with-jquery","status":"publish","type":"post","link":"https:\/\/havalite.com\/?p=84","title":{"rendered":"Play audio onHover with jQuery"},"content":{"rendered":"

The simplest way to play audio files in your page without the need of flash is the usage of HTML5 tag <audio> as follow:<\/p>\n

<audio autoplay=\"autoplay\" controls=\"controls\" loop=\"loop\" preload=\"preload\">\r\n        <source src=\"beep.ogg\" type=\"audio\/ogg\">\r\n        <source src=\"beep.mp3\" type=\"audio\/mpeg\">Your Browser doesn't support audio\r\n<\/audio><\/pre>\n
For our example we only need the attributes “autoplay” and the two tags “source” to define the url of the audio files. Just like this:<\/p>\n
<audio autoplay=\"autoplay\">\r\n        <source src=\"beep.ogg\" type=\"audio\/ogg\">\r\n        <source src=\"beep.mp3\" type=\"audio\/mpeg\">\r\n<\/audio><\/pre>\n
Now we let jQuery take over by embedding the html code for all <a> tags whenever onMouseOver is done:<\/p>\n
$(document).ready(function(){\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0var audioFileName = \"beep\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0var mp3File = audioFileName + \".mp3\";\r\n\u00a0\u00a0 \u00a0var oggFile = audioFileName + \".ogg\";\r\n\r\n\u00a0\u00a0 \u00a0$('body').append('<div id=\"audio\" style=\"position:absolute; top:-200px;\"><\/div>');\r\n\u00a0\u00a0 \u00a0$('a').hover(function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('#audio').html('<audio autoplay=\"autoplay\">'+\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0'<source src=\"' + oggFile + '\" type=\"audio\/ogg\">'+\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0'<source src=\"' + mp3File + '\" type=\"audio\/mpeg\"><\/audio>');\r\n\u00a0\u00a0 \u00a0},\r\n\u00a0\u00a0 \u00a0function(){ });\r\n});\r\n<\/pre>\n
Thats it!<\/p>\n
DEMO<\/a>:<\/span> Check the upper menu of this page to hear how it works<\/p>\n
Useful Links:<\/span><\/p>\n
Convert mp3 to ogg online<\/a><\/p>\n
Free Mp3 sound effects<\/a><\/p>\n
HTML5 audio tag generator<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
The simplest way to play audio files in your page without the need of flash is the usage of HTML5 tag <audio> as follow: <audio autoplay=”autoplay” controls=”controls” loop=”loop” preload=”preload”> <source src=”beep.ogg” type=”audio\/ogg”> <source src=”beep.mp3″ type=”audio\/mpeg”>Your Browser doesn’t support audio <\/audio> For our example we only need the attributes “autoplay” and the two tags “source” to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[28,33,31,17,7,29,30,32,34],"class_list":["post-84","post","type-post","status-publish","format-standard","hentry","category-jquery-plugins","tag-audio","tag-css3","tag-hover","tag-html5","tag-jquery","tag-mp3","tag-ogg","tag-onhover","tag-onmouseover"],"_links":{"self":[{"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/posts\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/havalite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=84"}],"version-history":[{"count":1,"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":85,"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/posts\/84\/revisions\/85"}],"wp:attachment":[{"href":"https:\/\/havalite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/havalite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/havalite.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}