How to Add Audio Player to a Post On Blogger Blog

Hello friends....It's still your very own crown thechiefblogger.....Today I will be showing you guys how you can add music player to a post on blogger blog.

In this tutorial I will show how you can easily add an HTML5 music/mp3 player to your blogger post or layout, No flash player or plugins are required...

I've seen many bloggers lay complain on how to add music player to their blogger post..I've also seen many on different forum & groups on facebook asking this same question...Trust me, Today i'm going to show you the best simplest way you can music player to your blogger post, just sit back & relax...

Hold up friends, Hope you are not getting this wrong, Adding a music player to your blogger post is quite different from adding a music download link to your post..It's for sure two different things....

Let's get down to line as quick as we can....One of the advantage of adding a music player to a post on blog is to let your visitor or users so to say know if the music they are going to download is worth downloading or not....so now lets see the step below...

Step 1: Hosting file for your Music Player: It's simply a way of getting a link/url for your mp3 file..
Blogger does not allow us to upload or host audio files on its dashboard, so in order to do this you will need to find a host for your mp3 file...There are so many site that help you host any type on file on there site but only few offers free package..that's why i'm here...i'm going to show you one or two hosted site with free packages & in subsequent post i will update you guys with more site you can host your file online.....so here are a few suggestion:

i. Upload files to your Public folder on Dropbox
ii. Host files on Google sites (one of the best way; in subsequent post i will show step by step of hosting a file on google sites)
iii. Upload files to Datafilehost (a very straight forward step)

Once you have uploaded your audio files, make a note of the direct link to the file which you'll need to add in the code for your audio player
I will be showing you guys how you can host your music on google sites which is the best among the 3 steps:

-In your browser enter sites.google.com
-click on create

-select a template to use..i will recommend you to choose the blank template

-fill the field required (enter site name)
-click on create at the top

NOTE: do not forget to mark "i'm not a robot"
- click on create page at the right top of the page

-fill the provided field (name your site)
-On the 'select a template to use' choose 'file cabinet'

-click create to proceed
-Now congrats...your site is ready
Hope you are ready to add your music to your google site dashboard
-click on add file and select the file you want to host from your computer

-wait for the system to upload your file...at this point your internet connection should be strong to upload your large file fast
-after your file is successfully added, Right click on the download and click on copy link location.

- Now lets see how you can add a music player to your blog post
-Login to your blogger dashboard
-click on post, new post
-while using the compose tab, write the main content of your post as normal, then place your cursor where you would like the audio player to appear.
-Now click on the HTML tab beside compose ( make sure you maintain the place you want the audio player to appear or you can still select where you want the music player to appear from the HTML tab)
-Then select one of the code below

<audio controls>
<source src="url-of-audio-here" />
If you cannot see the audio controls, your browser does not support the audio element
</audio>

If you would like the audio to begin automatically, you can enable autoplay as in the following example:

<audio controls autoplay>
<source src="url-of-audio-here" />
If you cannot see the audio controls, your browser does not support the audio element
</audio>

To loop audio (specify that the audio will start over again, every time it is finished), include the loop element in the <audio> tag, like this:

<audio controls loop>
<source src="url-of-audio-here" />
If you cannot see the audio controls, your browser does not support the audio element
</audio>

-Paste it where you will like the audio player to appear
-NOTE: Replace the "url-of-audio-here" with your copied link location
 
Now, I guess your audio player is ready
Your audio player should look like this
 

Publish your post & view post
Play & Listen to your music
Feel Free to ask any question.....