How To Add Music & Widget To Blogger 2022?

Many publishers use bloggers as a publishing platform, some of them want to add music to the blogger background which has no control visible to the visitor of the website. You probably have seen it on the website when you hover over the music it starts playing, for some visitors, it might annoy them but for some others, it grabs their attention.

If you want to add some nice music to the blogger background, you have to follow the simple step. In this blog, we will discuss the process of adding background music to a blogger’s platform.

There are several methods we can follow to add music to the blogger’s background. We will try to go through it one by one. By one method we can make it work with visible control, we can also make the sound play when the website loads or make the background music plays endlessly with control hidden. Follow the below producers:

Add Background Music To Blogger Platform

Before you start the procedure of adding music you have the music file to add, you can search for royalty-free music in the google search engine. Many sites offer royalty-free music to download and use publicly, it will be written on the site.

Choose the type of music you like for the background for the blog and if you got the music, upload the file to the online server storage. Online server file storage stores your file for free like Google Drive or Dropbox. Make sure your music file is uploaded and ready to use, now we have to add some code to the HTML blogger.

Below are the steps to follow:

Choose the blog for which you want to add the background music.
Got the Layout, Click On “Add a Gadget”, select the HTML/JavaScript Gadget and then add or copy the below line of code.

<audio autoplay loop>
<source src="Music URL"></source> 
</audio>

Now you have to change the <source src=” “ add the music file into the location, save the gadget, and then refresh the blog where you will hear the music and controls will be hidden.
In the line of code, we entered “autoplay” starts to music as you open the website, and “loop” will make the audio play in the loop means repeats at the end of the music.
If you want to provide the audio control for users you have to add a line of code inside the audio tag just like below:

<audio controls autoplay loop> 
<source src="…"></source> 
</audio>

If you want to add the music player or want music to play for only one post and page, you can also do that very easily by the code for the particular post.
Suppose the audio player width is not for your sidebar. So add in id inside the tag like <audio id=” player” controls autoplay loop> then you have to add CSS code like below:

#player { width: 100%; }

There are several theme and template works with the blogger platforms and all of these have different programs and lines of code. If the above code is not working with your template then try this one instead. Remember Always to replace src=” ” with your music storage URL.

<html><iframe height=0 width=0 frameborder=0 src=”Music URL”></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>

OR

Go To Blogger Dashboard > Click on Layout.
Click On “Add Gadget” > Click on HTML/Javascript.
Now Copy the Below code and paste in HTML/Javascript Section.

<embed style=”width:1px; height:1px; visibility:hidden” autostart=”true” loop=”true” src=”Music URL”/></embed>

Disclaimer: All the code above works only in the music file format of mp3. You can also upload the music to your own web hosting of WordPress, you can take the URL of the uploaded music directly from it. Blogger does not have the option to upload the .mp3 format file, it only works for video and images.

However, you can always use the above method of storing the files in online storage. Now if you want to add a visible width to the blogger post, we can do that as well.

Music Player For Blogger Widget

Sometimes we want to simply add an MP3 music file to the in-between the blogger post, we can do that by simply inserting the right HTML code of the audio player.

For that, we have to upload that particular MP3 file from the computer storage to the online hosting storage to obtain the URL from it, and then we have to use that URL to insert the music player code into the particular code that will use to play the song in the blog post.

Direct Audio File URL

I always encourage you to use the music that you have complete copyrights, but if you do not access have the access to copyrighted music, you can use royalty-free music and there are free audio-hosting services available on which you can upload your songs like Picosong.com or Mailboxdrive.com are among the many options.

Modifying the Music Player Code

The Code for Google Reader Player is:

<embed type="application/x-shockwave-flash" flashvars="audioUrl=MP3_FILE_URL" src=" " width="400" height="27" quality="best"></embed>

In the above replace the “MP3_FILE_URL“, you have to insert the actual direct URL of your Songs and the add location in src=” “ and be careful do not delete = or “

Embedding the Code

Open the Blogger Platform.
Go to the Post section and Click on New Post.
Before adding the content, switch to HTML View.
Insert the Google Reader Player customized code.
You can Click On “Preview” to see if the music player that appears in the blog post.
Now you can add the content and click on “Publish“.
Done.

Hope the content helps you. If you have any queries with this information, please leave your Comments Below. We will try to fix your issue ASAP.