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.
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
Block Operations
To learn how to duplicate, move and delete blocks, visit the Blocks page of the Page Layout section.