How to embed an MP3 file

MP3 players embedded on the page

The Organ Music for Weddings page has 12 embedded MP3s

Last week I was working on embedding an MP3 file onto the University website so I thought I’d write about it here in case it helps someone else.  We’re using Site Manager 6.2.0032.

WordPress Audio Player

As the embedded player we’re using the standalone version of the excellent WordPress Audio Player which uses a combination of JavaScript and <whisper>Flash</whisper>… which means no iPhone/iPad support and a flood of hatemail from HTML5 aficionados.

Audio Player is released under the Open Source MIT license, which gives you the opportunity to use it and modify it for your own use.

Media template formatting

We created a new media type called ‘mp3′ and gave it the following format:

<p id="mp3"><a href="http://www.adobe.com/products/flashplayer/" title="Download Flash Player">Flash Player</a> is required for the embedded audio player.</p>

<p><script type="text/javascript">AudioPlayer.embed("mp3", { soundFile: "<t4 type="content" output="file" modifiers="nav_sections" name="Media" />", artists: "<t4 type="content" output="normal" modifiers="js-var, nav_sections" name="Description" />", titles: "<t4 type="content" output="normal" modifiers="js-var, nav_sections" name="Name" />"    });</script></p>

<p>Download: <a href="<t4 type="content" output="file" modifiers="nav_sections" name="Media" />"><t4 type="content" output="normal" modifiers="js-var, nav_sections" name="Description" /> - <t4 type="content" output="normal" modifiers="js-var, nav_sections" name="Name" /></a> (MP3, <t4 type="meta" name="Media" meta="filesize" /> KB)</p>

which drops into the WordPress Audio Player code the appropriate file path, name, description and file size.

Obviously the download paragraph is optional if you don’t want end-users to be able to download the MP3 file directly.

Also, if you want to include more than one player on the same page you will need to change the first paragraph ID (<p id="mp3">) so that each player has a unique ID, e.g.

<p id="audioPlayer_1">...</p>
<p id="audioPlayer_2">...</p>

We use PHP code to generate a random alphanumeric ID but you could create a template for using with the MP3 files if you wanted to go down that route.

JavaScript

The final step is to ensure that the supporting JavaScript file is linked to on the page, and that the audio-player.js and player.swf files are in the Site Manager media library (and linked to from an ‘includes’ file to ensure that it publishes out… if you’re not using a version of Site Manager that will manage that within the Media Library itself).

We use a related content navigation object to look for a sub-section called rel_jquery which then drops whatever it finds in that section just above the closing </body> tag.  So that’s where the audio-player.js file goes, linked to from the Media Library using a template we have for… well, linking to media library items.

Why we did it this way

The only minor faff about doing it this way is remembering to include the rel_jquery section and accompanying JavaScript file otherwise it’s been a really useful way of including links to MP3 files with an accompanying embedded media player.

That way the users just needs to upload an MP3 file into the Media Library and link to it within a piece of content without needing to use a particular template.

About these ads

About Gareth J M Saunders

Hi, I'm Gareth J M Saunders, 6' 4", married to Jane, father of 3 boys (twins and singleton), I'm a priest in the Scottish Episcopal Church, employed as the Web Architect at the University of St Andrews. My main interests are HTML, CSS (inc. frameworks), jQuery, Information Architecture and Agile development.
This entry was posted in SiteManager and tagged , , , , , , , . Bookmark the permalink.

2 Responses to How to embed an MP3 file

  1. Is liking this very much – have passed the link on to colleagues in the web team. Thumbs up.

  2. Raewyn McKenna says:

    Thanks, Gareth. This is great. Just a thought, instead of using php for the paragraph ID, could you use the media ID? That would assume that the same piece of media isn’t used twice on a page, and also assumes that the ID’s don’t need to be sequential.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s