How to add a Music Player in the Blogspot

While composing the blog, you can write the content of the blog normally. Then place your cursor where you want to add the audio player. Then use any of the below methods :

1. Using Basic HTML5 Tags:

The <audio> tag is a new feature of HTML5 which we can use to natively embed audio playback in our sites.

It is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari, and can be set to play the linked audio file automatically (autoplay) or loop if required.

Here's a basic example using the <audio> element:

<audio controls>

<source src="url-of-audio-file" />

If you cannot see the audio controls, your browser does not support the audio element

</audio>

In the above example, all code related to the audio player is wrapped in <audio> tags. By including controls in the audio element, a simple player is displayed, enabling the user to begin playback when (or if) they want, and to adjust the volume.

If you would like to make the audio to auto play, You can enable auto play as in the following Example:

<audio controls autoplay>

<source src="url-of-audio-file" />

If you cannot see the audio controls, your browser does not support the audio element

</audio>

By retaining the controls attribute, you give visitors the option to stop or resume audio playback if they choose.

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-file" />

If you cannot see the audio controls, your browser does not support the audio element

</audio>

2. Hosting files for the Audio Player:

Blogger does not allow to upload the files. So in order to add the audio player, first we need to host the mp3 or music files.  Few easy solutions to host the files are:

1. You can use dropbox to upload the music file and enable it for public access.  You can add that path to the source src.

2. You can use google sites to host the files as explained in my previous blog. You can upload the file without zipping or compressing it.

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.

3. Using the Code Generator Below:

Be sure to check the Interpret Typed HTML option on the post Options in the right side of the post editor, otherwise the raw code for your player will be displayed instead

 Or Switch to HTML and paste the code generated:

Generate code for audio player

Add your audio URL

Preview of audio player will appear here