How to Add Audio in Free Weebly Site?

Weebly offers a very simple audio player as part of Weebly pro pack. Actually it is a HTML5 audio player which can be easily added with few lines of code and definitely there is no need for upgrading if you only want that audio player. There are many methods for Weebly free users to add audio to their site. In this article we will discuss the how to add add audio in free Weebly site using different methods.

Add Audio in Weebly Site

The following methods are some of the options to add audio, playlist and embed third-party sound files in Weebly site.

1. Insert audio using HTML5 audio element.
2. Add custom audio player with playlist using embed code element.
3. Embed audio player from third party sites like SoundCloud.
4. Adding background music by modifying site’s CSS/HTML.
5. Use premium Weebly audio player element.

1. Adding HTML5 Audio Player

Upload the audio file to your Weebly site and add the below code inside an “Embed Code” element on the page where you want to add an audio. Replace the file URL with your Weebly audio file URL.

<audio src="https://img.webnots.com/2015/07/suture_self.mp3" controls>
</audio>

The player will look like below similar to Weebly pro audio player:

If you want to play the audio automatically when the page is loaded then just add the “autoplay” attribute as below:

<audio src="https://img.webnots.com/2015/07/suture_self.mp3" controls autoplay>
</audio>

2. Adding Custom Audio Player

Below is a custom audio player for your Weebly site without the need of upgrading to Weebly Pro (the alignment will look proper on Weebly site).

Download the Weebly audio player JavaScript file and paste the content into the “Footer Code” section of your page. Then paste the below CSS code in the “Header Code” section:

<style>
#playlist,audio{background:#666;width:400px;padding:20px;}
.active a{color:#5DB0E6;text-decoration:none;}
</style>

Last step is to embed the below HTML code on the page using “Embed Code” element:

<div>
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
<source type="audio/mp3" src="https://img.webnots.com/2015/07/suture_self.mp3">
Sorry, your browser does not support HTML5 audio.
</audio>
<ul id="playlist">
<li class="active" style="background: #f5f5f5"><a href="https://img.webnots.com/2015/07/suture_self.mp3">Sample Music 1</a></li>
<li style="background: #f5f5f5"><a href="https://img.webnots.com/2015/07/suture_self.mp3">Sample Music 2</a></li>
<li style="background: #f5f5f5"><a href="https://img.webnots.com/2015/07/suture_self.mp3">Sample Music 3</a></li>
<li style="background: #f5f5f5"><a href="https://img.webnots.com/2015/07/suture_self.mp3">Sample Music 4</a></li>
</ul></div>

3. Embedding Audio Code

Go to any of the free audio player providers like SoundCloud. Click on the “Share” button and copy the widget or embed code and paste it in your Weebly site using “Embed Code” (Custom HTML) element. You can create your own playlist and use it in your Weebly site. Below is an example of an audio player loaded with playlist from SoundCloud. The player will get automatically updated whenever you update the playlist in SoundCloud.

4. Adding Background Music in Weebly

If you don’t want to use the external source code then you can add a background music to your free Weebly site by following the below two steps. In this way you will not see any audio player in your site but the music will get auto loaded when a visitor opens your page.

Step1:

• In Weebly editor click on the “Theme” tab
• Click on “Edit HTML/CSS” button
• Under “Assets” section click on “Upload Files(s)” option and upload your .mp3 audio file

Right click on the file and copy the URL of the mp3 file.

Step2:

• If you want to add music to particular page then click on the “Pages” tab and select the page. Go to “SEO Settings > Header Code” section and add the following code.

<embed src="File path from Step1" auto loop="true" hidden="true">

• If you want to add background music to your complete site then paste the same code under “Settings > SEO > Header Code”.

5. Premium Weebly Audio Player Element

Weebly offers audio player element from pro plan onwards. The default audio player is a simple tool to upload a single audio file on you page. Unfortunately this is not a comprehensive feature which can be used in a music sites and the free options explained above can be better option for you.

The advantage of Weebly audio player element is that this is unbranded.

Pros and Cons of Default Weebly Audio Player

Pros	Cons
Unbranded	Only one file can be uploaded and no playlist option is available
You can add a simple background music using audio player element	Supports only MP3 format
Simple and occupying less space	Fixed size and no option to change to different sizes
Play the audio in page without publishing	Only two color options are available

Like other elements just drag and drop audio player element in site content area to add an audio player to your site. When you click on the element, you have the following options as shown in the picture besides:

• Upload and Alignment
• Track info – Add track title and artist name
• Advanced – Choose skin and auto play

In addition to above options you have play/pause button, seek bar and volume button in the player.

By default there is no option to change the width of Weebly’s audio player. But you can use “Spacer” elements beside the audio player to adjust the width.