How to Add Audio to WordPress Posts
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:
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.
Thank you Otto! Any suggestions on converting an .m4a file to .mp3 (mac) ?
@lastraw
Set your iTunes importer settings to be MP3, then right click the file in iTunes and select “Convert to MP3”.
Thanks Otto, but I’m not seeing an importer settings option in iTunes?
Well, that’s what it’s called on the Windows version of iTunes. I don’t know, I don’t use Macs.
It turns out Mac iTunes doesn’t let you import. But thank you for the plug in. I’ll definitely give it a try.
Leslie
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.
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?
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..:)
Hi! Awesome post. I was just wondering if this can be done with video as well?
//Anna-Maria
[…] Shevonne: How to Add Audio to WordPress Posts (ottopress.com) […]
[…] 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 + […]
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!!
[…] Shevonne: How to Add Audio to WordPress Posts ottopress.com) Share this:Facebook […]
Hello,
Thanks for this code ! How can I keep the title of the MP3, rather than “Download MP3” sentence ?
You can also use Audio Plugin to enrich your blog with audio. like here
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.
I wrote this post almost two years ago, and have since deactivated the plugin. Content doesn’t stay relevant forever.
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
[…] Shevonne: How to Add Audio to WordPress Posts (ottopress.com) […]
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