Adding an Embedded Audio Player to Your WordPress Website

I must say, this was a bit harder than it should have to be.

I understand my way around technology and WordPress, but I still found myself doing a Google search trying to figure out how to embed an audio player on my website.

So hopefully this post can end the confusion for others and provide some clarity on exactly how to pull it off quickly.

First things first, the 2 main reasons you will want to embed an audio player are:

1. Podcasts
2. Interviews

It was the latter that prompted me down the path of embedding an audio file. After completing my first interview with a good friend of mine I needed to get it uploaded to my site.

Here’s how you do it.

Audio Player Plugin

You’re going to need this plugin to embed your audio files on your site.

Don’t be turned off when you see the warning box below.

This plugin works just fine with the latest version of WordPress at the time of creating this post (WordPress 3.5). I’d imagine it would continue to work for future versions, but cannot say for sure.

Side note: I’m amazed no one else has created a plugin to do the same function since it seems to be widely used throughout the internet by bloggers and marketers.

Once installed, you’ll want to go to your WordPress Dashboard and click on the “Settings” tab on the left.

Under that tab you’ll see “Audio Player”. Click on it to configure your player.

The important part here is to assign a folder that you will upload all your audio files to. This will make it easy to embed new files when you add them.

I’ve configured my files to be in a folder in my home directory called “audio”. See the image below.

You can also style the audio player to match the color scheme of your website. This is done by clicking on the “Display” tab at the top of the Audio Player Settings screen. See the image below.

Once you have completed the steps above the only thing left to do is actually embed the player and the appropriate audio file on your site.

Since you’ve already set the folder the audio files will be uploaded to, all you need to do is reference the name of the audio file when you execute the shortcode.

Use this code wherever you want to embed the player on your site:

Where you replace “filename” with the actual name of your mp3 you uploaded.

If you completed all the steps correctly you should have an audio player embedded like this.

Notes:

• You’ll need to have login access to your hosting account to gain access to your home directory via ftp
• Your home directory is located inside of the “public_html” folder. My “audio” folder has the following path: “public_html/audio“
• If you have multiple domains the home directory will be as follows: “public_html/domain/audio“. Where “domain” is the directory you have installed WordPress.
• I recommend Coda for Mac (paid) or FileZila for both Mac and PC (free) for an ftp client
• You must have a WordPress.com account for this to work, not WordPress.org

Any issues pulling this off successfully just drop me a line below and I’ll help you figure it out.