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 following methods to add audio in free Weebly site.
- Using HTML5 audio element.
- Add custom audio player with playlist using embed code element.
- Embed audio player from third party sites like SoundCloud.
- Adding background music by modifying site’s CSS/HTML.
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>
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>
2. Adding Custom Audio Player
Below is a custom audio player for your Weebly site without the need of upgrading to Weebly Pro.
Last step is to embed the below HTML code on the page using “Embed Code” element:
<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.
<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>
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
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.
- In Weebly editor click on the “Design” tab
- Click on “Edit HTML/CSS” button
- Under “Assets” section click on “Upload Files(s)” option and upload your .mp3 audio file
The uploaded file path in Weebly will looks like: “http://yoursitename.weebly.com/files/theme/Your_Audio_Filename.mp3”
- If you want to add music to particular page then click on the “Pages” tab and add the following code in “Header Code” section available under “Advanced Settings” option.
<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 in the section “Settings > SEO > Header Code”.