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
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:
<a href="http://www.adobe.com/products/flashplayer/" title="Download Flash Player">Flash Player</a> is required for the embedded audio player.</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.
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.
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
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.