One of our customers asked how to play MP3 audio files on their Joomla site. Such files can significantly enhance your site content and help you achieve your site goals.
In this tutorial, I will show you how to embed an MP3 audio file in a Joomla article. You will learn to achieve this using the AllVideos plugin from JoomlaWorks.net.
Step #1. Install the AllVideos Plugin
- Visit https://extensions.joomla.org/extensions/multimedia/video-players-a-gallery/812 for the download link for the AllVideos plugin.
- Login to your Joomla site administrator control panel.
- Go to Extensions > Manage.
- Click the Upload Package File tab and then click Or browse the file button:
- Upload the AllVideos plugin.
Step #2. Enable the plugin
- Go to Extensions > Plugins.
- Find the AllVideos (by JoomlaWorks) and click on the little red cross icon displayed next to its title:
Step #3. Allow uploads of MP3 files
- Go to Content > Media.
- You will be taken to the Media screen. In the top right corner, click Options:
- Under the Media tab, find the Legal MIME Types parameter. Enter the following at the beginning of its field:
application/octet-stream,audio/mpeg,
- Click Save & Close.
Step #4. Upload your MP3 file to the /audio folder
- Go to Content > Media.
- Click Create New Folder:
- Enter audio into the field and click Create Folder:
IMPORTANT NOTE: you must call this new folder audio. This is the name of the folder where your AllVideo plugin expects you to store your audio files.
- Click on the audio folder.
- In the top left corner, click Upload:
- Click Browse and select your audio file from your hard drive. Click Start Upload:
- After a short activity on the screen, you will see the Upload Complete message with the name of your MP3 file:
- Take a look underneath this message. You will find your MP3 file's icon:
Excellent. You are just one step away from allowing your site visitors to listen to this audio file.
Step #5. Embed your MP3 file in an article
- Go to Content > Articles and open an article in which you would like to embed the MP3 file.
- Inside the article's text, enter a code snippet in the following format:
{mp3}your_mp3_file_name_goes_here{/mp3}
:
- Click Save or Save and Close.
- Check the article at the front end. You will now see the audio player displayed and ready to playback your MP3 audio file: