The Joomlashack Blog

Play MP3 Files on Your Joomla Site

Written by Steve Burge Steve Burge
Published: 28 November 2018 28 November 2018
Play MP3 Files on Your Joomla Site

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

download all videos 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:

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:

enable the AllVideos plugin

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:

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,

enter the following mime types

  • Click Save & Close.

Step #4. Upload your MP3 file to the /audio folder

  • Go to Content > Media.
  • Click Create New Folder:

click create new folder

  • Enter audio into the field and click Create Folder:

create folder called audio

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 upload

  • Click Browse and select your audio file from your hard drive. Click Start Upload:

click browse and then click start upload

  • After a short activity on the screen, you will see the Upload Complete message with the name of your MP3 file:

the Upload Complete message

  •  Take a look underneath this message. You will find your MP3 file's icon:

the file itself

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}:

the embed code snippet

  • 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:

the audio player displayed