How to add an HTML5 audio player to your Joomla website

This tutorial is a step-by-step guide of how to insert an HTML5 audio player to your Joomla website.

Step 1 – Create an HTML5 audio player Joomla module in Amazing Audio Player

Amazing Audio Player supports Joomla 1.5, 2.5 and 3.0. To publish the HTML5 audio player as Joomla module, in the application, Publish dialog, choose the option Publish as Joomla module, then choose your Joomla version and a folder to save the Joomla module ZIP file.

The filename of the module will be mod_amazingaudioplayer_ID.zip The valud of ID is specified in the Publish dialog -> Audio player id.

If you want to insert multiple audio players to your website, you need to specify a unique ID for each audio player.

Step 2 – Install the Joomla module to your website

Login Site Administrator of your Joomla website, click menu Extensions -> Extensions Manager, choose the module ZIP file, then click the button Upload & Install.

If the ZIP file is too large, and it exceeds the limit, you can unzip the file, then upload the folder mod_amazingaudioplayer_ID to the Joomla website modules folder, then goto Extensions > Extension Manager > Discover, find the module and install it.

Or you can upload the folder mod_amazingaudioplayer_ID to your Joomla website tmp folder, then goto Extensions > Extension Manager -> Install from directory, the path to your website’s /tmp/ folder should already be entered, you can add the folder name mod_amazingaudioplayer_ID/ to the end of the path and click Install.

Step 3 – Configure the Joomla HTML5 audio player module

Goto Extensions -> Module Manager, find the Amazing Audio Player module, click to edit its options.

In the module editing page:

• Change Show Title to Hide
• To display the audio player to an article, you can enter a customised position for the module.
• Change Status to Published
• Click tab Menu Assignment, change Module Assignment to On All Pages

Step 4 – Insert the HTML5 audio player to Joomla page

To insert the audio player to your Joomla article, in the article where you want to embed the player, enter {loadposition audioplayer1}. The audioplayer1 is the position we defined in above step.