Best Way to Embed an Audio Player into WordPress

WordPress has improved dramatically in its ability to handle audio and video files especially from popular sources like Youtube. I remember struggling a few years ago with Javascript libraries to efficiently and elegantly play media files without a plugin. After all, if just a few of your posts have media, it doesn’t make sense to clutter your WordPress setup with add ons. But with the introduction of WordPress 3.6, it’s become easier than ever to simply drop and play audio and video files along with a host of options. The WordPress team decided to integrate the MediaElement.js library into the core installation making it the best way to embed an audio player or a video file into a post. Here’s how to go about it along with learning how to play the file from an external source.

Basic Audio Player Embedding

For purposes of this example, I will be downloading some sample MP3 files to illustrate how we can upload and play them in our posts. So let’s assume that you have downloaded the audio file onto your desktop.

The process of insertion begins with the same steps that we used to embed an image file. In the WordPress visual editor, click “Add Media” to bring up the media library and the upload section in a tab on the left. Click the latter and use it to either select the audio file in question or simply drag and drop it onto the dialog box.

The upload starts automatically and once done, the right-hand pane is populated with details of the media. Then simply click “Insert into post” at the bottom right as shown below:

And voilà! Your audio player is automatically ready for use.

Linking to an External File with Shortcodes

A lot of people are starting to use external file hosting services as Content Description Networks or CDNs especially for static files like media and JavaScript. If your audio file is hosted on a service like Dropbox with a publicly accessible URL, there’s no need for you to upload it onto your WordPress site. The content can be played directly from the source. Amongst other things, this also makes it easier for you to migrate your site from one domain to another since you won’t have to transfer any internal media resources or change the hyperlinks.

If you view the HTML that we generated in our first example, you will see that WordPress internally uses the “audio” shortcode. As you can see, we use the “src” attribute to link to the external source. In your WordPress visual editor, click the “Text” tab next to “Visual” and paste the above code into the place where you want the media player to appear. Replace my example URL with the link to your media file as shown below:

And that’s it. No further work is necessary. Preview your post and you will see the familiar audio player that we got in the first section of this tutorial. From the users point of view, it makes no difference whether the file is hosted locally on your server or elsewhere. If you don’t use a CDN for your images, you really should consider one.

We should thank the WordPress team for making media inclusion so simple. It cuts down on a lot of additional work especially considering that web pages today are more resource heavy than ever before.