I’ve been wanting to add a cross-browser audio player into a site for a while and I finally found a few minutes to find a solution and apply it.

A quick Google found the link above, which includes good demos and examples.

Files:

http://www.sean-o.com/files/singlemp3player.zip
http://www.sean-o.com/jquery/jmp3/jquery.jmp3.js

Download the files and place them in the design/site/javascript/mp3 directory, where site is the name of the siteaccess. Unzip the zip file.

Edit jquery.jmp3.js and ensure the path names match. The site will probably have to change.

var playerpath = "/design/site/javascript/mp3/";  

Update design.ini.append.php to add the jQuery MP3 code in.

settings/siteaccess/site/design.ini.append.php

[JavaScriptSettings]
JavaScriptList[]=mp3/jquery.jmp3.js

I updated design/site/override/templates/page_layout.tpl to use jQuery from the jQuery CDN.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

I also added the player load code directly into page_layout.tpl, since it was compact. A better approach is probably to add it in as a footer script using the admin interface.

<script type="text/javascript">
$(document).ready(function(){
$(".mp3").jmp3({
/*backcolor: "000000",
forecolor: "22ff22",*/
width: 400,
showdownload: "false",
showfilename: "false"
});
});
</script>

Finally, I override the line/file template, testing to see if the filename ended in .mp3. If the file is an .mp3, the player code is added. In hindsight, a more graceful solution would be to create a custom class for .mp3s, but this works fine.

design/site/override/templates/line_file.tpl

{def $attr=$node.data_map.file}
        {def $fileurl=concat( 'content/download/', $attr.contentobject_id, '/', $attr.id,'/version/', $attr.version , '/file/', $attr.content.original_filename|urlencode )}
        {if $fileurl|ends_with('.mp3')}<span class="mp3">{$fileurl|ezurl('no','full')}</span>{/if}
        {undef $attr}{undef $fileurl}

Many thanks to ’sean-o’ - see the link above.

I tested it on Windows and CentOS, with FireFox 3+, it works really nicely.

As a side note, while working on this, I needed to add the http:// to the URL, and it could not be encapsulated in double quotes, since the name is not assigned in an href or src attribute. eZ has two nice optional parameters for the ezurl function, the first indicating what type of quotes to use (in this case none), and whether to create a full URL or relative (in this case full).