WP Audio Player – Easily Embed Audio in Your WordPress Posts

As we’ve begun regularly publishing Hello Dolly and I’ve started running a few podcasts on Yet Another Blogging Podcast, I was finding the process a bit cumbersome for regularly embedding podcasts into our posts.

To be clear, I’ve been using the jQuery plugin by Codrops to embed audio, but it requires that I hop back and forth between the visual and the text editor when drafting posts.

In order to streamline the process a bit, I wrapped the jQuery plugin to make an easy to use WordPress audio player plugin.

A WordPress Audio Player Plugin

WordPress Audio Player Plugin

If you’ve read my blog for any amount of time, you know that I believe in releasing strong 1.0′s – or the absolute minimum viable product possible – and I’ve attempted to do just that with WP Audio Player.

In short, I’ve attempted to keep the functionality as close to native WordPress functionality as possible. The plugin expects:

  • That you’ll be upload the media via the Media Uploader
  • That you’ll be using the URL of the media the WordPress provides after uploading the file

Easy enough, I hope.

How It Works

1. Upload Your Media

First, you upload your media using WordPress’ media uploader. When the process is complete, WordPress will generate a page that includes the URL to the file:

WordPress Audio Player Plugin

Grab the URL from the Media Uploer

From here, you copy the URL from the File URL meta box of the page.

2. Add The Audio Your Post

Next, you can begin drafting your post – or editing your post – and then place the URL to the audio that was provided by the Media Uploader in the meta box that now appears in the sidebar of your edit screen:

WordPress Audio Player Plugin

Adding audio to your post

At far as editing is concerned, this is all that you need to do.

3. Profit!

Once you publish your post, the plugin will add the player as the last item in your content:

WordPress Audio Player Plugin

The audio player embedded in a post.

In the current version, the player will always appear at the bottom of the content so you’ll need to be able to plan for your post to account for that.

Permitting the plugin proves useful, I’ll introduce functionality that makes it easier to place it wherever you’d like to include the player.

Other than that, the audio is ready to play.

Downloading The Plugin

You can grab the plugin from the official WordPress plugin repository.

Again, this plugin is mostly a wrapper for the jQuery plugin by Codrops. Though this version doesn’t include any of the fancier skins, the base functionality works and should make it a bit easier to embed audio in your WordPress site.

As usual, I’m all for comments and feature requests, so please leave them in the comments below.

26 Comments

Funny enough, that was on my list of things I wanted to build :) throw it up on GitHub and I’d be happy to contribute.

Is it just me, or is your plugin incompatible with Firefox? On Hello Dolly: Ep. 1, I can see the audio player in IE, but not in Firefox.

    The JavaScript on which this plugin depends appears not to be compatible with the latest version of JavaScript.

    I’ll make a note and see about resolving it when I revisit the plugin.

    Thanks for the heads up!

What advantages do you see using this instead of the audio player bundled with Jetpack? (Unless, of course, someone’s not using Jetpack :))

    Honestly, if they’re happy with JetPack, stick with it.

    I’m a fan of the jQuery plugin and it offers a couple of other options – namely styling, responsive, and touch-friendly support that’ll make for a solid plugin once we get rolling on building it out a bit more.

Hi,
it’s very convenient and useful. Congratulations. I have only one problem, you might want give me some advices. Details: my theme (PRINCIPLES from obox-design) is the ability to create standard posts and posts in the portfolio section. After installing the WP Audio Player plug-in option to add the player is only visible in the editor standard posts. How can I add the option to add a player in editor in portfolio section? Can you help me? Many thanks for ypur time.

PS. Sorry for my english :-)

    No worries – your English is good :).

    Right now, the plugin only supports the “post” post type; however, I’ve made a note and will do what I can to update the plugin soon so that it also supports other post types as well.

Tom is there any way I can use the WP Audio player in Buddypress when I want to share an aduio clip?

    Honestly, I’ve not tested it with BuddyPress. Right now, the plugin is only meant to allow users to add audio to posts.

    If there is a custom post type in BuddyPress or some other specific type of content, let me know and I’d be glad to look into adding it in a future release.

YES best one yet! Thanks!

How to add media to sidebar?

I’d love to use this as a regular audio plugin to just drop a shortcode where I want and have the audio player appear. Any plans on having it versatile this way? Thanks.

    I’m considering it – I’m personally not a huge fan of shortcodes, but I do want people to have the ability to drop the audio player wherever they’d like in the post (and be able to add multiple files).

    I’m still considering on how best to introduce this functionality, as well as if it’ll be a free or premium feature or not.

    Thanks for the feedback, though – always helpful from you guys!

Nice plugin! It worked fine when i was using an icecast with an mp3 link, but does it work with a Shoutcast url (ie. 123.123.45.6:9876)?

    The plugin is really just meant to play a URL from your local server. I haven’t tried it with any third-party services.

    I know that sites like Soundcloud provide a widget that you can use; however, I’m unsure about Shoutcast or any of the other services. Wish I could be more help, but that’s the status of the plugin for now.

Is there a way to have multiple tracks play or to have more than one file per player or to have multiple players on the same page? I am planning to use this player to add mp3s of our church sermons, but I could only use it to play one file per page.

Leave a Reply

Name and email address are required. Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>