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.]
- MP3 Link
- Audio Player (WordPress)
- Audio Player- Jetpack (WordPress.com)
- PRX Embeddable Player
- NPR Media Player
- Yahoo! WebPlayer
- HTML5 Audio
- Other Audio Players
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
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:
Or use WordPress’ Media Uploader to auto-insert it:
- Place your cursor where you’d like the audio to go.
- Upload the audio.
- Click the button labeled “Audio Player” (added by the plugin) under “Link URL” in the Add Media screen.
- 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] 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.
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.
One crazy-easy way to add audio to your site is the Yahoo! WebPlayer. All you do is use this bit of HTML:
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.)
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.
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.
.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: