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.
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.
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.
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.
Here is the script you’ll need to add to the Header section as you see in the image above.
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:
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.
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:
If you are not utilizing the shortcode, then you’ll want to wrap your words directly in your post as seen bellow.
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. 🙂