How to use the WPAudio plugin to embed an audio clip in WordPress

Image credit: joanna8555; song credit: They Might Be Giants

Want to know how I got this humble audio link to be playable right within this post? C’mon, click it — it’s only 19 seconds long.

What’s that blue thing doing here?

With a plugin, of course!

There is a nifty plugin you can install that makes your audio files into one-click mini-players. There are lots of audio plugins, of course — but I’ll tell you about my favorite one: WPAudio.

Step 1: Install the WPAudio Plugin

In Plugins –> Add New, search for WPAudio (no spaces, no quotes). If the first line of the description is “All the other WordPress audio players were crappy or ugly so I made a better one,” that’s the one you want. Install and activate the plugin in the usual manner.

Step 2: Upload an audio clip to your WordPress Media Library

This process is illustrated in my post How to add an audio clip to your WordPress site, but here’s a quickie refresher:

1. On the post (or page) editing screen, click the small gray musical note to the right of the words “Upload/Insert”, below the page title.
2. Choose the From Computer tab in the popup window, and browse to find your audio file.
3. Once you’ve found the file, click “Upload” and watch the pretty progress bar.
4. When it is done, click the “show” link.
5. Edit the “Title” field — this will become the click-to-play title of the audio clip.
6. Click “Insert into post” at the bottom of the window.

What you have now is a link to your audio file. When people click on it they will get a blank web page with a small play button, and the file will autoplay.

What the WPAudio plugin does is make the link into a mini audio player right on that very page, instead of forcing the opening of a new window. It’s a much less confusing experience for your users.

There are two ways to make the WPAudio plugin do its magic on your .mp3 files.

Step 3(a): Using the plugin on one link at a time

In the post editing screen where you’ve inserted your audio link, click the HTML tab so you see the code-y gobbledygook. Look for the code for your sound file, which will look something like this:

<a href="http://www.yoursite.com/wp-content/uploads/pieceofmusic.mp3" >Piece of Music</a>

You need to insert this snippet:

class="wpaudio"

into that link, so it looks like this:

<a class="wpaudio" href="http://www.yoursite.com/wp-content/uploads/pieceofmusic.mp3" >Piece of Music</a>

Now you can go back to the Visual tab.

The link probably looks just the same, but try Previewing the post. In your Preview, you should see that the link text is bigger, and there’s a little gray triangle to its left. The idea is that if you click the triangle (or anywhere in the link text) the file will begin to play, and a play/pause/progress bar will appear below the link automatically.

Just like that link at the top of this post. Did you click it? Go on, you know you want to!

Step 3(b): Converting all your audio links with no code-wrangling

If you use lots of audio files, or plan on using lots of audio links, or just plain don’t want to deal with the HTML, WPAudio has a one-click solution that detects and converts all .mp3 links to mini-players.

Go to Settings –> WPAudio in your WordPress dashboard, and the first thing you’ll see is a checkbox labeled “Convert all MP3 links.”

Check that box, and scroll to the bottom to click the blue “Save Changes” button, and you should be good to go.

I still think it’s handy to know how to convert the links manually, though…

Also included in WPAudio Options is the ability to change the font, color, and size of your audio links. Styling your links is optional — the plugin will work just fine with its default settings. Also, remember that these settings will apply to all the audio links on your site, including links in your sidebar, footer, etc.

OK. You should now have the file uploaded, the proper plugin installed, and a link embedded in the post that will play that link. Time to publish your post and give yourself a round of applause!

This crowd is cheering for you!

Related posts:

1. How to add an audio clip to your WordPress site
2. How to fix the WPAudio plugin if it’s not working
3. WordPress Plugin: Broken Link Checker
4. How to install a WordPress plugin
5. Updated version of “How to install a WordPress plugin”