Search

Joomla - Cross-browser mp3 playback with audio.js library

Contents[Hide]

Joomla

If you need to publish some music on your site, you know how difficult it is to provide a cross-browser solution. Either your audio files will be embedded in a Flash stream and it won't be compatible with all IOS devices (iPhone, iPad, ...) or it will be compatible with HTML5 format and it won't be compatible with older browsers (IE8, Firefox 3, ...).

Hopefully, audio.js is there to fulfill all these needs. It is a fork of video.js, targeted on audio content in mp3 format. In fact, it's a drop-in javascript library that allows HTML5's tag to be used anywhere, with a Flash fallback for browsers not understanding HTML5. It is focused on mp3 format, due to its universality.

As a result, it is compatible with about 99% of the world browsers ! This seems to be the ultimate solution to publish audio content.

This article will explain how to allow you to easily publish some mp3 audio files on your Joomla site thru the audio.js library. It is using the standard <audio> tag and it has been tested on iPhone, iPad, Firefox, Android, ...

It has been designed on a Debian server with a Joomla 1.5 site, but it should be compatible with any Joomla 2.5 site as well.

1. Pre-requisite

The new <audio> and <video> tags are giving some compatibility issue with the commonly used Joomla JCE editor version 1.5.x.

So first thing to do, if your are using JCE editor, is to upgrade it to version 2.x. This version will allow you to edit articles using HTML5 <audio> tags.

2. Install audio.js library

You then need to download the audio.js library.

Extract the content of the zip downloaded file to a /audiojs folder at the root of your joomla web site.

You should get these files in /audiojs :

  • audio.min.js
  • player-graphics.gif
  • audiojs.swf

3. Update your Joomla template

You then need to update your current Joomla template to use the audio.js library.

The audio.js library call must be included at the end of your <head> section.

/templates/yourtemplate/index.php

...

<head>
...
<!--    Audio.js script        -->
<script src="/audiojs/audio.min.js"></script>
<script>audiojs.events.ready(function() { var as = audiojs.createAll(); });</script>
</head>

...

4. Include audio tag in your articles

Your Joomla site is now ready to serve some mp3 audio files to any type of browser ...

To add an audio file to an article, you just need to edit it thru No editor or thru JCE advanced editing and to add :

your article

...

<audio src="/path/to/audio/files/file.mp3"></audio>

...

 After such editing, your article should include an item like that one :

This audio file should be playable on most browsers. It as been tested succesfully on :

  • Firefox 10
  • Chrome 14
  • Opera 11
  • iPhone & iPad (IOS 3+)
  • Android 2.3+
  • Internet Explorer 8

5. Customize your player

You can even customize the player thru CSS using the .audiojs class properties.

Here is an example of a simple customization, including color & size.

your template's css

.audiojs { height: 22px; width:600px; background: #391422;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #391422), color-stop(0.5, #CF487B), color-stop(0.51, #CF487B), color-stop(1, #391422));
  background-image: -moz-linear-gradient(center top, #391422 0%, #CF487B 50%, #CF487B 51%, #391422 100%); }
.audiojs .play-pause { width: 15px; height: 20px; padding: 0px 8px 0px 0px; }
.audiojs p { width: 25px; height: 20px; margin: -3px 0px 0px -1px; }
.audiojs .scrubber { height:10px; width:460px; margin:5px; }
.audiojs .progress { height: 10px; width: 0px; }
.audiojs .loaded { height: 10px; }
.audiojs .time { float: left; height: 25px; line-height: 25px; }

You can then get a different style of player :

 

Your mp3 audio files playback should be cross-browser and trouble free.

Hope it helps !

Signature Technoblog

This article is published "as is", without any warranty that it will work for your specific need.
If you think this article needs some complement, or simply if you think it saved you lots of time & trouble,
just let me know at This email address is being protected from spambots. You need JavaScript enabled to view it.. Cheers !

icon linux icon debian icon apache icon mysql icon php icon piwik icon googleplus