Make Some Noise

Want sound in your site? Here’s a few ways to inject audio into your posts. [An article by Barrett Golding. Sonics are from Transom » Shortlists around the web.]

1. MP3 Link
2. Audio Player (WordPress)
3. Audio Player- Jetpack (WordPress.com)
4. PRX Embeddable Player
5. NPR Media Player
6. Yahoo! WebPlayer
7. HTML5 Audio
8. Playlist
9. Other Audio Players

MP3 Link

The simplest way is just to link to the URL of an MP3: “White Paint”.

In HTML, that’s: <a title="sound-file" href="http://www.atlantic.org/audio/sonicid/white_paint.mp3>"White Paint"</a>

In WordPress you can upload your own MP3, using WP’s Add Media tool, then use that MP3’s link: “Monika Mueller Sings”. When you click an MP3 link, how (& if) the audio plays depends on your browser, operating system, and settings. For instance, Safari/Mac launches a new browser window and plays the MP3 in QuickTime.

WordPress Audio Player

You can put an MP3 player right into your post. Transom is among the many who choose the easy-to-use plugin, WordPress Audio Player:

This installs a player at your site, that you can color with the Audio Player’s excellent settings screen. To add audio to your post, just type in this shortcode:
[audio:http://www.atlantic.org/audio/sonicid/white_paint.mp3]

Or use WordPress’ Media Uploader to auto-insert it:

1. Place your cursor where you’d like the audio to go.
2. Upload the audio.
3. Click the button labeled “Audio Player” (added by the plugin) under “Link URL” in the Add Media screen.
   
4. Click the “Insert into Post” button, at the bottom of the Media screen, and the player will be in your post.

You can have multiples MP3s on one page. To avoid cacophony, it stops one player when another is triggered. Try it:

Audio Player also comes in a standalone version for non-WordPress sites.

Audio Player- Jetpack (WordPress.com)

If you’re using WordPress.com’s Jetpack with the Shortcode Embeds activated, you already have access to a WordPress Audio Player (and SoundCloud Audio Player). Just use a this slightly different audio shortcode:
[audio http://YourDomain.com/PathTo/Your.mp3]

Jetpack’s [audio] fetches an Audio Player from WordPress.com. It’s harder to color this way, though. Nor do you get that play-one-at-a-time feature that comes by installing your own WordPress Audio Player.

PRX Embeddable Player

Another simple solution is to put your audio at PRX (you have an account, right?). Then just embed their player in your post. Make sure you enable Sharing for your piece(s), then grab the code from the “<Embed>” button at the upper-right of your piece page.

PRX offers a big or small player. Their “Share” button at the bottom has the embed code, so others can share your audio too — can you say “viral?” And at PRX, ‘course, radio stations can purchase a broadcast license for your piece: then you, the producer, get most of the profit.

Other places to upload then embed/share audio are SoundCloud and Audioboo. Jeff Towne wrote an in-depth Transom feature on both.

NPR Media Player

Many national series offer an embeddable player for each story. On each NPR story-page is a “Listen” link that launches their custom media player.

To the right is the embedded NPR player, with Maria Elena Fernandez’s “The Short List: A Bilingual Day of the Dead”. The “Embed” link at the bottom has the code to copy & paste into your webpage.

Yahoo! WebPlayer

One crazy-easy way to add audio to your site is the Yahoo! WebPlayer. All you do is use this bit of HTML: <script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js"></script>

That JavaScript adds a player (bottom-left, then finds any MP3 links on your page, and auto-adds a play button next to each. Or you choose only specific MP3s, such as these links to more Short Lists at NPR:

“Big Day for a Big Shot” from NPR by Sean Cole.
“Disco Discoveries” from NPR by Ben Walker.
“Stuck in the Middle” from NPR by Melissa Harrell.

Click any play button above, and watch the player do its thing.

(If adding the above <script> yourself is above your pay-grade, there’s a Yahoo! Media Player: WordPress Plugin. Also check Playtagger- Mod, now in use at WFMU’s Beware of the Blog: It’s a rewrite of the now-defunct Del.icio.us playTagger.)

HTML5 Audio

Most audio players are made from Flash then inserted by JavaScript. If either aren’t installed and enabled, the user will see a default message, like:

That message will get seen a lot: Half of all mobile web traffic comes from one source, iOS (aka, iPhone/Pad/Pod-Touch); and iOS is Flash-free. That’s why the best players have a non-Flash fallback, usually HTML5. Audio Player does not have a fallback, so we added our own.

Playlists

This Playlist file format is more for radio stations than radio stories. Rather than put a player in the web-browser, a playlist file triggers the default player of your web-visitor’s computer, such as iTunes of Windows Media Player. So when s/he goes to another webpage, the audio keeps playing.

Playlists come in several flavors, including M3U (.m3u) and PLS (.pls). This link is the live feed of Cape and Islands Radio. And this playlist file has all the MP3s on this page: shortlist.pls.

The .pls format looks like this (length is in seconds):

File1=http://YourDomain.com/PathTo/Your1st.mp3
Title1=My Radio Story
Length1=55

File2=http://YourDomain.com/PathTo/Your2nd.mp3
Title2=Another of My Radio Stories
Length2=65

NumberOfEntries=2

Version=2

Other Audio Players

Here’s some more of the best audio players out there. All these do video; all switch to HTML5 when there’s no Flash; and all have WordPress plugins:

1. JW Player (WP plugin), used by This American Life, Radiolab, WNYC.
2. jPlayer (WP plugin), used by Third Coast Festival.
3. Flowplayer (Flowplayer (WP plugin), used by PRX.
4. MediaElement.js (WP plugin).