facebook twitter instagram youtube linkedin thumbs-up thumbs-down arrow-right progress locked success play pause

How do I add an mp3 or other audio to my website?

You can add audio to one of your pages in a number of ways:

  1. Easy
    Create a direct link to the audio file which would be handled by the user’s browser (native player or download to their machine)
  2. Medium
    Use a 3rd-party, like SoundCloud, to host your Audio and embed a widget
  3. Advanced
    Use the HTML5 <audio> tag to create a custom embed that will play from within your website on modern browsers

1. Easy

If you want to simply link to an audio file for the user to download/listen to using their browser’s native settings, simply upload your audio file to your file manager, copy the URL and create a link like you would normally.

2. Medium

If you’d like to have a way for the audio file to be embedded on the page, that the user can interact with and play/pause. We recommend using a 3rd-party platform like SoundCloud. SoundCloud offers embed code just like YouTube does which can be added to your page in the same manner.

If you choose to use SoundCloud, you can find your embed code by navigating to the item you want to embed and clicking the “Share” button:

soundcloud-embed-1

 

This will bring up a pop-up where you’ll want to click the “Embed” tab. From there we recommend the second view option, and then you can further customize the button colors and size. Once you are done customizing the widget, copy the embed code:

soundcloud-embed-2

Now you can embed this on your website following the same steps for adding Video as outlined here.

3. Advanced

If you’d like to embed audio directly on your page without using a 3rd-party like SoundCloud, you can use the HTML5 <audio> tag, which looks like this (only modern browsers will render the following):

To do this, you’ll first want to upload your audio file in both mp3 and ogg (recommended) formats via your File Manager. From there you’ll want to paste the following code into the page where you’d like the audio embedded via the “Source View” button:

<audio autoplay="autoplay" controls="controls">  
   <source src="path_to_ogg_file.ogg" />  
   <source src="path_to_mp3_file.mp3" />  
</audio> 

Replace the path_to_ogg_file.ogg and path_to_mp3_file.mp3 with the file URL’s you previously uploaded to your File Manager.

Once you do this, hit “Save & Close” and you should see your audio file embedded within your page using the HTML5 <audio> tag!

Note: The HTML5 audio tag is not supported in IE8

Was this article helpful?
1 of 1 found this helpful
You already voted on this article!