How To Add A Song To A Blog

Happy Saturday Guys! So what you guys have been up to? Me? Being a freelancer, I do work whenever there is an opportunity. Sucks being me but hey I don't have to follow a schedule and choose the working hours. There are pros and cons in everything. It just how you managed your life and your time :).

Anyway, today a client wanted to add a background music to their blog. Their blog is on Blogspot (Blogger) and to be honest I'm not familiar with Blogger editing. I usually will suggest WordPress, to begin with. It's easier and has a lot of plugins to help with the job. But nonetheless I will try my best to give what my client want.

Download song or music

First step, find a song or music that you want. I suggest find a royalty free music so that you wont have any copyright issues later. You can find from youtube and use any free online downloader or converter. For example, this music from youtube. Download it using https://mp3-youtube. It will convert the youtube file to .mp3 file.

Then you can upload the file to your storage. For Blogger, there is no option to upload mp3 file. Thus you need to upload to any free storage. I will describe more below.

How to add background music to Blogger blog or site

Once login to Blogger blog or site, go to "Layout" and choose add gadget. Select HTML/JavaScript.

In the Content section, add in this code:

The first code will play the music once it's ready but the controls are hidden. The second code will show the audio controls.

source src="add the music url here"
autoplay the music will automatically play
controls to display the audio controls
loop will make the music repeat or continuously playing

If the above codes does not work with your theme, try this code instead. Replace the src="" with your music URL.

<html><iframe height=0 width=0 frameborder=0 src="place music url here"></iframe><script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2″;_udn="none";_uff=false;urchinTracker();}</script><script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script> <script type="text/javascript">_qacct="p-44naSaXtNJt26″;quantserve();</script>

All these codes only works with .mp3 eg. http://dahliaahad.com/wp-content/uploads/2019/01/adventures-a-himitsu-no-copyright-music.mp3. Meaning you need to upload the music to your own hosting which can call the file and play directly. Unfortunately Blogger did not provide function to upload files. Only video and images.

However, there is another option. Upload your music file to any free file hosting such as Clyp, File.fm, Vocaroo and Soundcloud. Once uploaded, find the embed code. It will come with audio control. Hope this will help with you to add music background to your Blog or site. Till next time!