Use the New (Free) Audio Story Images Plugin to Add Audio to Your WordPress Images

If an image is worth a thousand words, an image synced up with audio must be worth…well, more than a thousand words, right? That is to say, adding audio stories for WordPress images is a neat way to add some context to the images you use on your site.

What do I mean by “audio stories”? Basically, an audio clip that is synced up with an individual image on your WordPress site. In this post, I’ll show you exactly what I mean by audio stories for WordPress. Then, I’ll get into how you can add them to your own site using a free plugin called Audio Story Images.

What Does Audio Story Images Do?

As I said, Audio Story Images allows you to sync audio files to your images. Users will see an audio icon in the top left corner of selected images. And if they click on the icon, the audio will instantly start playing:

The potential uses are pretty neat. I see both artistic and practical uses:

• On the artistic front, you could add narrations explaining the meaning and inspiration behind each piece of art posted on your site. Or, you could just add music and create an immersive experience to accompany your art.
• On the practical front, you could add voice-overs to tutorial images. So instead of just including an image telling people where to click, you could also quickly add a voice-over narration explaining the whole process.

I’m sure you can think of plenty of other niche uses for this functionality, as well. My list is by no means comprehensive!

Before We Start – A Caveat

Before I show you how to use this plugin, I want to lead with a quick caveat:

This plugin is fairly new and lacks a huge install base. We’re featuring it because we think the functionality is just plain cool and, as far as we know, there aren’t any other plugins that offer something similar.

With that being said, because it hasn’t been put “through the ringer” so to speak, we don’t want to fully endorse it just quite yet.

On the plus side, the developer does seem to be responsive to the few support threads that exist. And in playing around with the plugin, I didn’t experience any issues.

How to Use Audio Story Images

I’ll show you how to use Audio Story Images with the regular WordPress Editor first. Then, I’ll get into how it works with Divi.

To get started, begin by installing and activating Audio Story Images. Once you’ve activated it, you’re ready to jump right in. That is, there aren’t any settings to configure.

The plugin works like this:

You add both an image and an audio file to your Media Library. Then, you sync those two files in your normal Media Library interface. And then to insert an audio story in your post, you just use the normal Add Media button in the WordPress Editor.

Here’s how to do it step by step…

Start by uploading at least one image and one audio file to your media library. Then, go to Media → Library. Make sure you use List view, not Grid view. You should see a new Audio Story column. Just click Attach next to the image you want to add audio to:

Then, a window will pop up with all of the audio files in your Media Library. Select the radio box next to your chosen audio file and then click Select:

Once you’ve linked the image and audio file, the Audio Story column should update to reflect that relationship:

Now, all you need to do is insert that image into any post or page using the normal Add Media button:

And when you publish your post, you should see the audio icon on your image:

Simple enough, right? But does it work with the Divi Builder? Let’s find out…

Does Audio Story Images Work With Divi?

Yes and no. See, I did get Audio Story Images to play nice with Divi, but not in the way you might expect.

Naturally, the first thing I tested was just using a regular Divi image module to insert the same image file from my Media Library. That, unfortunately, did not work. The image showed up, but no audio.

But then I read the plugin’s support threads and realized the plugin author basically uses JavaScript to overlay the audio icon on the image. And that gave me another idea…

What if I grabbed the code from my first example and put it into a Divi code module? And bingo, that worked!

Then, after I figured out that method, I got another idea – what if I just use a regular Divi text module and use the Add Media button there? And that worked too!

So, I’ll show you both ways in case one works better for you.

The first method is easy – just add a normal text module and use the Add Media button to insert the image:

You won’t see the audio icon in the Visual Builder, but it should show up on the published version of your page.

The second method is more complicated. But it’s good practice for mastering Chrome Developer Tools, so I think it’s worth a try!

Step 1: Create a draft of a post using the regular WordPress Editor. Insert an image like I showed you in the example above and then preview the draft. Make sure the only content in your post is the image. That will make it easy to grab the HTML in the next step.

Step 2: On the preview of your draft, right click on your audio story image and choose Inspect if you’re using Chrome (or Inspect Element in Firefox). Check out our guide on using Chrome Developer Tools’ Inspect feature if you need some help:

Step 3: You should see a window on the right side of your screen containing lots of highlighted code:

Look for the

 < div class = "entry-content" > 

tag, right-click on it, and select Edit as HTML: