oEmbed, Can You Hear Me?

Can You Hear Me?

We’ve arrived at the final post (for now) on using WordPress embeds (see part 1 and part 2). This post fills in the gap to something that is obviously missing in our oEmbed examples. We saw the popular media sites like VimeoYouTubeFlickrSlideshare, and even Twitter all had the capability of simply copying and pasting a URL to the media page in a WordPress blog and the full media shows up. The glaring omission is audio. If you look closely at the WordPress Embed Codex page, as of WordPress 3.5, SoundCloud is now an option for embed. Below is an example from the Radiolab show:

Again, WordPress knows what to do when I paste the URL from the media page and it gives us a nice SoundCloud player. SoundCloud is a popular service, but it’s limited in the amount of audio one can upload and play from an account for free. You can upgrade to a premium plan, but they start at 29 euros (which equals about 39 U.S. dollars today). To get unlimited downloads you need to pay 79 euros per year ($107 per year). That might be a bit too pricey for some. Another option is to create a “video” out of your music or audio file. By that I mean import your audio file into a video editor, then add an image or text/title, and finally export that as a video file to a site like YouTube. It’s slightly inelegant, but it gets it published for free. Be aware that even if you think you have a file that clears copyright (like Creative Commons audio), someone associated with YouTube may try to make a claim to it.

Lets step back and think about what if we simply have an MP3 file on a server somewhere (maybe you uploaded it into the WordPress Media Library). Well, to follow our philosophy on using the minimal URL of a file to get our media embedded and playing in our posts, I recommend the oEmbed HTML5 Audio plugin. Now I warned of using plugins in the first post of this series because plugins can become outdated and unsupported in the future. However, this plugin does not use any shortcodes in its implementation. What it does is emulate an oEmbed option for audio. Paste in the URL for the audio file and you’ll get a built-in player embedded in your post. It will even work on an iOS device because it supports HTML5. A caveat is that you generally have a limit to the size of the file you can upload to your WordPress account which usually is 2MB. If you have control over your server you could up that limit or place it somewhere else on a server you control (It’s why you need A Domain of Your Own!).

So I paste this:

http://andheblogs.andyrush.net/wp-content/uploads/2013/02/dream.mp3

And I get this:

If you have a URL to an MP3 elsewhere, you can just paste it into your post, and it should play. I used this technique when I posted the audio file on my Got Running post.

Hopefully WordPress will begin to natively support this type of embedding in the future so you won’t have to install the plugin. In the mean time, even if the plugin goes away, you will still have the link to the audio file. Some users may not know where to go from there, but they could always ask their local instructional technologist.

The WordPress oEmbed technology seems to add new support with every new release of the software. I’ll be curious to see what they add in version 3.6.

This is part 3 of the series of posts on WordPress embeds. Here’s Part 1, and Part 2.

3 thoughts on “oEmbed, Can You Hear Me?”

  1. What a great photo! One thing I’ve noticed with the oembed stuff is that in some cases the embeds appear in an RSS reader and in other cases they don’t. The Soundcloud one doesn’t show up in Google Reader but the HTML5 audio oembed did. I’m glad you posted this. I actually went back to my We Are All Artists post (one of the only ones I can remember trying to elegantly link/embed audio) and used it.

Leave a Reply

Your email address will not be published. Required fields are marked *

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>