Here’s a timely question from the mailbag:
“How do I put an audio clip on my website?”
It’s timely because I just held a teleclass yesterday, and I wanted to post a quick clip on the blog today, now that I’ve sent the complete call recording out to people who signed up (and yes, you can still sign up and get the recording here).
Let’s assume that you’re not using a paid audio-hosting service (like AudioAcrobat), and would like to upload an audio file directly to your WordPress website so people can listen and download. Here’s an example:
(This is a 6-minute clip of me talking about three clues that might mean your website is ready for a shopping cart — and reassuring you that you might not need one, after all.)
To play this clip in your web browser, simply click the button. A new tab will open and begin playing the clip.
To download this clip to your computer, CTRL-click (Mac users) or right-click (PC users) the button and select “Save Link As” from the menu that pops up. Then give the file a name and location, and it will be downloaded to your hard drive.
Check it out: This is going to be so meta. I’m going to take screen shots of myself adding a clip to this very post. Whoa!
Step 1:Upload the audio file to WordPress
Figure 1: Uploading media from within the "Edit Post" screen
In the “Edit Post” screen, there’s a handy toolbar for adding pictures, videos, music, and other files (like, say, PDFs or PowerPoint files). Just click the button that looks like a musical note (if you hover over it, a tooltip saying “Add Audio” will pop up as shown in Figure 1). That triggers the popup window shown in Figure 2.
Figure 2: The "Select Files" popup window
There are three tabs at the top of this window:
- From Computer is what we’re doing today: Uploading a file you have on your hard drive.
- From URL is when you want to link to a file that’s already online somewhere else (like your Flickr stream, or your BlogTalkRadio account).
- Media Library is a list of the files you’ve already uploaded to your WordPress site.
Clicking the “From Computer” tab and then the Select Files button lets you browse your hard drive and select files to upload, as shown in Figure 3.
Figure 3: Selecting an audio clip to upload from your hard drive
Important note: WordPress comes with a default size limit on uploads. So this easy-upload process only works for files that are smaller than 7Mb. Most images and PDFs easily fall under this limit, as will short mp3 audio clips (usually less than about 15 minutes — though this is highly variable depending on the recording and encoding settings).
If you want to upload a larger file, like a one-hour teleclass, the easiest way to do this is to use FTP to manually upload it. And that’s a whole nother post.
Step 2: Insert the file into your post
Figure 4: Inserting a file into a post
Once the file is uploaded (you’ll see a progress bar for a moment or two), you’ll see some information about the file, and at the bottom of the window, a button labeled “Insert into Post,” as shown in Figure 4.
Before you click that button, you probably want to edit the “Title” field in this window, because that text is going to show up as a clickable link in your published post. So instead of having a link to a possibly-cryptic file name, you might want to change that text to something relevant, like this:
Three clues that you’re ready for a shopping cart (6 minutes long, 2.9Mb)
Now you’re ready to click the Insert button to automagically insert a link to your audio file into your post. And if you clicked too soon or want to change the link text, you can still do that right in the editing window.
Or you can insert a button or graphic, as shown at the beginning of this post, and link it up to your audio clip so there’s a nice obvious place for your visitors to click.
Step 3: Test the link
OK, you got the link inserted, and it says what you want. You’re basically done.
But you should take the time to test the link anyway. You can do it by previewing your post, or you can do it after you publish the post. Just click the link and make sure that it works. Seriously, one click. Is that too much effort for a little peace of mind?
Inserting an audio player
OK. That method works. But what if you want your visitors to be able to play the file without leaving your post or opening a new window or tab?
That’s a whole nother post, involving plugins and possibly podcasting. If you want to do a lot of work with audio files, the method I’ve described here will get clunky pretty fast, but if you’re at the hey-I-want-to-try-this-out stage, it will work fine for your first few clips. I’ll post again soon about audio player plugins. In the meantime, you can leave a comment if you have questions.
