How to Add MP3 Files to WordPress Themes

Let us Learn  how to use WordPress’ attachment functionality to automatically detect and wrap mp3s in a player in this post

If you want to your mp3s to automatically be wrapped and played  in a player, you can incorporate that functionality into your theme by using the JW Player (or any other embeddable player) and WordPress’

function.

Before we get started, let me explain why this might be a better option than using a plugin:

1. All you have to do is upload the mp3(s) and the theme takes care of the rest.
2. You get to learn more about
   get_children(),

   which you can do a lot with.

3. The JW Player can handle video and audio, so with a slight code modification, you’re in business for playing movies as well as music.
4. You don’t have to install a plugin that might break in a future version of WordPress.

There are lots of  embeddable mp3 players available on net  .  Longtail Video’s JW Player is free for non-commercial use and works in seemingly every browser. It’s even got an easy setup wizard if you need help getting your embed code worked out. And though I use the term mp3 throughout this tutorial, the JW Player supports m4a as well.

The embed code for a single song looks like this:

<object width='470' height='24' id='single2' name='single1'>
<param name='movie' value='player.swf'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name='wmode' value='transparent'>
<param name='flashvars' value='file=PATH-TO-YOUR-MP3'>
<embed
id='single2'
name='single2'
src='player.swf'
width='470'
height='24'
bgcolor='#ffffff'
allowscriptaccess='always'
allowfullscreen='true'
flashvars='file=PATH-TO-YOUR-MP3'
/>
</object>

In Action

The player looks like this:

I’m going to download the player and store all the files in a subdirectory of my theme called “jw”, so I’ll use the WordPress function

/jw/ to point to that directory. In reality, it’s http://my-site.com/wp-content/themes/my-theme/jw/.

The Code

In your template file (

or

), we’re gonna use the get_children() WordPress function to get the attachments that match a specific mime type (of audio – that will handle mp3s and m4as). The function returns an array that we’ll loop through using a PHP

. So, here’s what we’re gonna do:

1. Store the array that’s generated from the function in a variable called $mp3s
2. Check to make sure the variable $mp3s isn’t empty (that an mp3 is present as an attachment)
3. Loop through the mp3s attached, showing each mp3 in the embedded player.

The following code should take place inside the loop:

<?php $mp3s = get_children( 'numberposts=-1&post_type=attachment&post_mime_type=audio&post_parent='.$post->ID );

if (!empty($mp3s)) : ?>

<?php foreach($mp3s as $mp3) : ?>
<object width='470' height='24' id='single<?php echo $mp3->ID; ?>' name='single<?php echo $mp3->ID; ?>'>
<param name='movie' value='player.swf'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name='wmode' value='transparent'>
<param name='flashvars' value='file=<?php echo $mp3->guid;?>'>
<embed
id='single<?php echo $mp3->ID;?>'
name='single<?php echo $mp3->ID;?>'
src='<?php bloginfo('template_url'); ?>/jw/player.swf'
width='470'
height='24'
bgcolor='#ffffff'
allowscriptaccess='always'
allowfullscreen='true'
flashvars='file=<?php echo $mp3->guid; ?>'
/>
</object>
<?php endforeach; ?>

<?php endif; ?>

A few things to notice here:

1. I’m passing a parameter to
   get_children

   of

   post_parent = $post->ID

   . This passes the ID of the page/post you’re on to the function. As long as you’re inside the loop, this will work, otherwise, you have to somehow get the ID then pass it in a different way.

2. The parameter numberposts is set to -1, which means it will show every uploaded attachment that matches the mime type of audio. You can change this to a number if you would like to limit the amount of songs that show.
3. I’m using
   $mp3->ID

   (the ID of the mp3 attachment itself) to make sure that each instance of the player has a unique ID, otherwise the players will break each other.

Once more, this time with Gusto!

This works well for showing the players, but what about the title and description? You can also pull that info from the attachment. In the next example we’re going to wrap each mp3 that’s attached in an

with the attachment title and description also being shown.

<?php $mp3s = get_children( 'numberposts=-1&post_type=attachment&post_mime_type=audio&post_parent='.$post->ID );

if (!empty($mp3s)) : ?>

<ul>

<?php foreach($mp3s as $mp3) : ?>
<li>
<?php if(!empty($mp3->post_title)) : //checking to make sure the post title isn't empty ?>
<h4 class="title"><?php echo $mp3->post_title; ?></h4>
<?php endif; ?>

<?php if(!empty($mp3->post_content)) : //checking to make sure something exists in post_content (description) ?>
<p class="description"><?php echo $mp3->post_content; ?></p>
<?php endif; ?>

<object width='470' height='24' id='single<?php echo $mp3->ID; ?>' name='single<?php echo $mp3->ID; ?>'>
<param name='movie' value='player.swf'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name='wmode' value='transparent'>
<param name='flashvars' value='file=<?php echo $mp3->guid;?>'>
<embed
id='single<?php echo $mp3->ID;?>'
name='single<?php echo $mp3->ID;?>'
src='<?php bloginfo('template_url'); ?>/jw/player.swf'
width='470'
height='24'
bgcolor='#ffffff'
allowscriptaccess='always'
allowfullscreen='true'
flashvars='file=<?php echo $mp3->guid; ?>'
/>
</object>
</li>

<?php endforeach; ?>

</ul>

<?php endif; ?>

Take Note

• I’ve wrapped the p and h4 tags in if statements that check to see if the values of the title and description actually have content before the elements are created. If nothing is filled in for a description, the paragraph tag doesn’t get created.
• Helpful Tip: You can find out what is stored in any array by using the PHP function
  print_r(the_array_name)

  . It will print out a list of values stored in the array. It gets a little jumbled in the content, so view source for best results if you use this.

Done and Done. But don’t screw up now.

Once you’ve inserted the code in your theme, all you have to do to to take advantage of your new found functionality, is upload an mp3 using the “Add Media” button through the WordPress Add Post page. Once you’ve uploaded your mp3, just click “Save All Changes” and close. Don’t click “Insert into post”. For some reason, the mp3 doesn’t get registered as an attachment if you insert it into a post.