Geek Out! - WordPress tips, XHTML/CSS illumination, and adventures in jQuery

Using embeddable mp3 players – Part 2

Obviously, if you’re not going to post mp3s to your site very often, the easy solution is to paste the embed code into your individual post or page using HTML mode, but you might have a need to embed an mp3 on a regular basis. This tutorial will show how to use the embeddable player mentioned in my in combination with custom fields in order to display one mp3 at a time.

So, here’s how it works.

Step 1: The Custom Field (from the Add New Post page)

The first thing you have to do in order to set this up is to add a custom field. To do so, go to the bottom of the page, and in the “Custom Field” section, click the “Enter New“. In the “Name” field, enter your name (no, not your actual name, the name for the field). This can be anything you like. This name will serve as the “key” to the custom field (covered later). For my example, I’m going to name the custom field “mp3″. For the value, I will use the path to my mp3, for example: http://mysite.com/mysongsfolder/mp3-i-want-to-play.mp3.

Step 2: The Code

With your favorite text editor (mine is Textmate), open the single.php file, and insert the custom field code you’ll need. You can read about custom fields in the WordPress codex, but here’s a quick example of how you can use the custom field in your theme:

<?php echo get_post_meta($post->ID, $key, true); ?>

Now to explain some stuff.

• echo is tells the value to print (to spit out on the page).
• $post->ID is using the ID of the post that your in.
• $key is the name of the custom field (in my example, it will be mp3)
• true tells WordPress that there actually is something in the custom field, in order for anything to appear, it needs to be “true”.

This code will spit out exactly what is in your “value” field. If that’s what we wanted to accomplish, we’d be done. But if we left it like this, all we’d get is:

http://mysite.com/mysongsfolder/mp3-i-want-to-play.mpg

And that would look dumb and not do anything. We want action!

Let’s take the embed code for the Google reader player and make it do something.

The google embed looks like this:

<embed type="application/x-shockwave-flash"
src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=MP3_FILE_URL"
width="400" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff"
wmode="window" flashvars="playerMode=embedded" />

In this example, the “MP3_FILE_URL” will be replaced with our custom field code. Like so:

<embed type="application/x-shockwave-flash"
src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=<?php echo get_post_meta($post->ID, 'mp3', true); ?>"
width="400" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff"
wmode="window" flashvars="playerMode=embedded" />

There are a few things to note here:

• The $key has been replaced by whatever you added in the custom fields area for “Name”, wrapped in single quotes.
• Be sure that echo is include, otherwise the value won’t show up.

The only problem with this method is that if you don’t enter anything for the custom field “mp3″, no mp3 will be embedded. That said, we’re going to do two things to make this work better:

1. We’re going to create a variable so that we don’t have to keep typing <?php echo get_post_meta(…); ?> over and over again.
2. We’re going to check to see if something is actually in the field using the PHP function empty().

And here’s how that’s done:

<?php
$mp3 = get_post_meta($post->ID, 'mp3', true);
if (!empty($mp3)) : ?>
 <embed type="application/x-shockwave-flash"
 src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=<?php echo $mp3; ?>"
 width="400" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff"
 wmode="window" flashvars="playerMode=embedded" />
<?php endif; ?>

What’s going on here?

1. Line 2 is setting the variable $mp3 to the value of the custom field.
2. Line 3 is checking to see if the value of ‘mp3′ is NOT empty (that’s what the exclamation point stands for). Then closing the PHP brackets to allow for HTML code.
3. Line 5 is printing (or spitting out) the exact value of ‘mp3′ into the embed code.
4. Line 8 is starting up the PHP code again, and ending the if statement started in Line 3.

What all this does is tells WordPress, “Hey, if something’s in the custom field “mp3″, spit that out into the embed code, if not, don’t even mess with the embed code because we don’t need it.

And that’s how you do it. You can put this code above or below the_content(); but it needs to be in the loop.