Saw a few tweets by @lastraw today, asking Matt and others if they could make the Add Audio function in the WordPress editor work.

Well, @lastraw, the audio function does actually work, it just doesn’t do what you expect it to do.

Basically, the WordPress uploader does provide a few different kinds of uploader buttons: image, video, audio, and media. All of these buttons behave in different ways. The Audio button in particular lets you upload an audio file, and then insert a link to that file in your post.

WordPress upload buttons in the post editor

However, the link it inserts is just a bare link. This is because WordPress doesn’t come with a flash audio player, and HTML 5 hasn’t gotten standard enough to allow sane use of the <audio> tags.

Still, plugins can modify things to make audio files embed. I just wrote a quick plugin to take those bare audio links and turn them into embedded audio players using Google’s flash audio player. This is the same player they use on Google Voice and in several other locations in the Google-o-sphere.

Example:

Example Audio File

How did I do that? Easy, I activated my plugin, then used the Add Audio button to just insert the plain link to my audio file (which I uploaded). Naturally, this audio player will only show up on your site. People reading through an RSS reader or some other method won’t see it, they’ll just see the plain audio link and can download the file.

Couple limitations on this: It only handles MP3 formats. You could conceivably use a player that could handle more formats, I only made this as an example. MP3 is the most common format in use anyway, and I didn’t want to go searching for a more complicated player to use. Also, I made it only handle links on lines by themselves. If you put an audio link inline into a paragraph or something, it won’t convert it.

Here’s the plugin code if you want to use it or modify it or whatever. It’s not the best code in the world, but then it only took 5 minutes to create, so what do you expect? 😉

<?php
/*
Plugin Name: Google MP3 Player
Plugin URI: http://ottodestruct.com/
Description: Turn MP3 links into an embedded audio player
Author: Otto
Version: 1.0
Author URI: http://ottodestruct.com
*/

add_filter ( 'the_content', 'googlemp3_embed' );
function googlemp3_embed($text) {
	// change links created by the add audio link system
	$text = preg_replace_callback ('#^(<p>)?<a.*href=[\'"](http://.*/.*\.mp3)[\'"].*>.*</a>(</p>|<br />)?#im', 'googlemp3_callback', $text);

	return $text;
}

function googlemp3_callback($match) {
	// edit width and height here
	$width = 400;
	$height = 27;
	return "{$match[1]}
<embed src='http://www.google.com/reader/ui/3523697345-audio-player.swf' flashvars='audioUrl={$match[2]}' width='{$width}' height='{$height}' pluginspage='http://www.macromedia.com/go/getflashplayer'></embed><br />
<a href='{$match[2]}'>Download MP3 file</a>
{$match[3]}";
}

This is mainly intended as a demo. There’s more full featured plugins for this sort of thing in the plugins directory. If you need to embed audio, using one of them might be a better way to go.

Shortlink:

20 Comments

  1. Thank you Otto! Any suggestions on converting an .m4a file to .mp3 (mac) ?

    @lastraw

  2. Just to say I spent a lot of time hunting for a good wp audio solution and for me, http://wpaudio.com/ works great. Once the plugin is installed you simply add class=”wpaudio” to the audio url.

  3. This is really cool. It works perfectly on mp3 anchor links such as:

    <a href=”http://ottopress/files/2010/11/audiotest.mp3″>anchor text</a>

    It does not work on bare URLs like:

    http://ottopress/files/2010/11/audiotest.mp3

    Instead, it embeds two players, with a single download link. Maybe it’s no supposed to?

  4. Hey man…I have been looking for this in several hours now. I was almost going crazy because I couldn’t manage to add the audio to my posts.

    I just want to say thanks for the help, you saved my day..:)

  5. Hi! Awesome post. I was just wondering if this can be done with video as well?

    //Anna-Maria

  6. […] properly. Then you just change the link into a player on display. Example way of doing this here: http://ottopress.com/2010/how-to-add…rdpress-posts/ Otto – Tech Ninja Nothing to See Here | Otto on WordPress Reply With Quote + […]

  7. Thanks a lot for your simple plugin, included it on a custom theme for my site, I think I’ll add it to other themes too as long as I make them 😀

    Thanks a lot again!!

  8. […] Shevonne: How to Add Audio to WordPress Posts  ottopress.com) Share this:Facebook […]

  9. Hello,

    Thanks for this code ! How can I keep the title of the MP3, rather than “Download MP3” sentence ?

  10. You can also use Audio Plugin to enrich your blog with audio. like here

  11. Otto, I’ve looked at this page in Firefox, Chrome, and Safari (all mac), and the demo link above is pure text. There’s no visible player. All give the same behavior: when I click it goes to an empty browser window to play the audio in the browser’s player.

  12. Otto,

    I realize your post is old, but the idea of posting audio is still popular and thus the concept is relevant. My favorite approach these days is a combo of the Blubrry PowerPress plugin and the Mobile Podcaster iPhone app. This way I can record from my iPhone and upload the audio straight to my WordPress site and with PowerPress it’s on iTunes within an hour or so.

    Thanks,
    Steinar

  13. Birgün minibüsteyim minibüs borusan fabrikasına doğru ilerlerken çocuğun biri şöföre BORUSANA girmeden indirirmisin abi diye seslendi.Şöför çocuğa ters bir şekilde baktıktan sonra kapıyı açıp çocuğu indirdi….devamı için: http://www.komikti.com

Leave a Reply to Otto Cancel reply

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=""> <s> <strike> <strong>

Need to post PHP code? Wrap it in [php] and [/php] tags.