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.
Is liking this very much – have passed the link on to colleagues in the web team. Thumbs up.
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.