Recently a client requested the ability to add a sound effect to a couple of words inside a WordPress post when the mouse simply ran over it. Thinking this was an interesting idea I quickly searched on Google for an easy solution. It took less than 15 minutes to locate and implement the effect. In this post I will share with you exactly how to add sound to content with mouseover play-ability on your WordPress.
Before I begin, please note that because of the nature of WordPress (primarily TinyMCE), the code required to make this work will be removed automatically if you view your post in Visual mode versus Text mode. For this reason, I have utilized a shortcode plugin which somewhat takes away the chance of forgetting and accidentally erasing the code should you ever edit or view the post in Visual mode.
Step 1
Decide which set of words you want to apply the sound effect to. In my example, you should have been able to hear a guitar sound effect when your mouse ran over the words “the mouse simply ran over it” above.
Step 2
In order to have the sound effect playable on nearly all types of computers and mobile devices we need two versions of the audio file (.mp3 and .ogg). There are various free online audio converters you can use. Once you have your files, upload them to your WordPress media section and copy the links somewhere handy to use in the following steps.
Step 3
So far so good. We will now need to add the script that will handle playing the sound effect in our post. To do this, we utilize the Head & Footer Code plugin. Install the plugin but rather than use the global settings to add the code, you’ll want to use the settings inside the post you’re working on. You should be able to see the Head & Footer Code section somewhere on the bottom section of the post you’re working on once you’ve installed it.
Step 4
In the example below, you can see the Head & Footer Code plugin section (at the bottom of your post) already filled out with the script.
Here is the script you’ll need to add to the Header section as you see in the image above.
<script type="litespeed/javascript">var html5_audiotypes={"mp3":"audio/mpeg","mp4":"audio/mp4","ogg":"audio/ogg","wav":"audio/wav"}
function createsoundbite(sound){var html5audio=document.createElement('audio')
if(html5audio.canPlayType){for(var i=0;i<arguments.length;i++){var sourceel=document.createElement('source')
sourceel.setAttribute('src',arguments[i])
if(arguments[i].match(/.(w+)$/i))
sourceel.setAttribute('type',html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)}
html5audio.load()
html5audio.playclip=function(){html5audio.pause()
html5audio.currentTime=0
html5audio.play()}
return html5audio}else{return{playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}}}
var mouseoversound1=createsoundbite("sound.ogg","sound.mp3")
var clicksound1=createsoundbite("sound.ogg","sound.mp3")</script>
Step 5
Okay, we’re almost there. In the script we added in Step 4, replace the file names sound.pm3 and sound.ogg with your own file names (from Step 2). You will notice there are two sections depending on if you will have mouseover or clickable. Fill in both of them. So the end part of the script will look similar to this:
var mouseoversound1=createsoundbite("https://internetmarketinglight.com/wp-content/uploads/2016/09/guitar.ogg", "https://internetmarketinglight.com/wp-content/uploads/2016/09/guitar.mp3")
var clicksound1=createsoundbite("https://internetmarketinglight.com/wp-content/uploads/2016/09/guitar.ogg", "https://internetmarketinglight.com/wp-content/uploads/2016/09/guitar.mp3")
Step 6
Now, if you trust yourself and don’t use the Visual mode to edit your posts then skip over to Step 7. If however you wish to somewhat avoid the possibility of accidentally loosing the coding you are about to add in the next step then I recommend installing Shortcoder plugin. Once you’ve installed it you will want to create a shortcode that will look similar to this:
Wrap the words you selected in Step 1 with the < a > tag as shown below. To make things easier name the short code the same words you used in Step 1. Jot down the shortcode as this is what you’ll use to insert into your post.
<a nohref onmouseover="mouseoversound1.playclip()">the mouse simply ran over it</a>
Step 7
If you used the shortcode variant, you’ll simply want to add your shortcode in place of the wording you wanted to activate with the sound effect. See example below:
<a nohref onmouseover="mouseoversound1.playclip()">the mouse simply ran over it</a>
If you are not utilizing the shortcode, then you’ll want to wrap your words directly in your post as seen bellow.
<a nohref onmouseover="mouseoversound1.playclip()">the mouse simply ran over it</a>
In both cases, you will want to make sure you are in Text mode when editing your post. The good thing about using the shortcode is if you forget and switch back to Visual mode while editing your post, your shortcode will still be there unchanged.
If you made it to this point, you should already have sound in your post. I hope this will bring you and your readers a little excitement… even if it’s only for a short moment. Should you need a hand in implementing this script in your WordPress, contact a professional who will be happy to assist. 🙂
![ow To Reach Your Writing Goals Like A Pro: A Step by Step Guide to becoming a Self-Published Author [even Mark Twain talked about]](https://internetmarketinglight.com/wp-content/uploads/2025/03/how-to-reach-your-writing-goals-cover-front-cover-200x300.jpg "ow To Reach Your Writing Goals Like A Pro: A Step by Step Guide to becoming a Self-Published Author [even Mark Twain talked about]")
14 Responses
This guide is fantastic! The step-by-step instructions made adding sound effects to my WordPress posts easy. My readers love the interactive experience!
This method has completely transformed how I engage with my audience. The sound effects add a fun and interactive element to my content. Thanks for the detailed steps!
I found this article very clear and useful. The use of the Head & Footer Code plugin was a game-changer for integrating sound effects without messing up my posts.
Impressive tutorial! The combination of shortcodes and proper audio formats ensures compatibility across devices. This practical advice has elevated my blog’s interactivity.
Adding sound effects has made my blog posts more engaging and fun. The detailed instructions and screenshots were incredibly helpful. Keep up the great work!
Following the steps was a breeze, and now my content has an extra layer of engagement with sound effects. Super!!
Hats off to Bogdan for his invaluable insights on WordPress sound integration, particularly with the Head & Footer Code plugin – it’s truly revolutionized my content!
This article on adding sound to WordPress? It’s a game-changer, man! 🌟 Got my content poppin’ with interactive sound effects in no time! Step-by-step instructions? Straight-up genius. And Shortcoder to protect the code? Brilliant move. Props to the author for sharing these gems! 👏
it’s elevated the quality of my website content effortlessly
I’m truly impressed by this post on WordPress sound integration. It’s incredibly comprehensive and well-explained.
It’s simplified the entire process for me. The step-by-step instructions were easy to follow, and now my posts have an exciting new dimension with sound effects.
Remarkable. It’s transformed the way I engage with my audience.
Yes sorry, it is working actually. But the mouse cursor, does not change and sometimes i just tryed to click, but it is when you pass!! Thanks.
Not working