Join our Affiliate Program to earn 30% from each sale! Earn now

Include a locally hosted audio (song, podcast, etc...) into Joomla pages easily with the audio block. Select one or more audio formats to maximize compatibility with browsers.

When a new audio block is created, placeholder audio controls will be inserted into the page. You can change it immediately by clicking the Block Settings icon or leave it like that if you don't have the audio files prepared yet.

Cog Audio Block Settings

Audio block settings

Audio ID

Unique identifier of this block. It's useful for CSS or custom coding. If you don't need this, leave this field empty.

Audio Class

The class name of this block in order to style it in your template's CSS file. If you don't need this, leave this field empty.

Audio File (MP3 format)

Enter the path to an MP3 audio file (relative to the Joomla root path). Your file must contain audio in a proper MP3 format for browsers.

Audio File (OGG format)

Enter the path to an OGG audio file (relative to the Joomla root path). Your file must contain audio in a proper OGG format for browsers.

Audio File (WAV format)

Enter the path to a WAV audio file (relative to the Joomla root path). Your file must contain audio in a proper WAV format for browsers.

It's usually enough to use only an MP3 audio file. However, for better compatibility with older browsers, you can add the same audio file in multiple audio formats.

Audio Align

By default, the audio container is not aligned. Using this option, you can align it to the left or to the right or make it centered.

Autoplay

Check this option if you want your audio to start playing as soon as it is loaded. This option doesn't work on all browsers. Some browsers (especially on mobile devices) won't play your audio until the play button is pressed.

Controls

Check this option if you want to show the audio controls (play, stop, pause, etc...).

Loop

Check this option if you want the audio to replay automatically when playback is finished.

Muted

Check this option if you want to mute the audio (this will make sure there won't be any sound until the user unmutes it).

Example

Audio block output

Block Operations

To learn how to duplicate, move and delete blocks, visit the Blocks page of the Page Layout section.