How to Host Music/Audio Files into Blogger Blog

Have you ever wanted to add some music on your Blogger blog? Audio or music can be a great spice for your blog. Adding some audio files or music to your blog can entertain your visitors with the great compositions. So, how would you add music to your blog? Is it really possible? To answer this, yes you can add music files to your blog hosted on Blogger.

However, blogger does not permit to upload MP3 or other file formats directly to your Blogger space. Google only allow to uplaod image files (in JPEG, JPG, PNG, ico etc. formats). You can not upload any MP3, MP4 files or even PDF or DOC files to your Blogger blog. Then, what is the solution? You can choose to upload a good cloud storage service and upload your files to it and later link them to your blog posts. There are many popular cloud storage solutions which offers hotlinking to your files. That means, you can give a direct link to your file from anywhere an access it using the link without visiting the website of your cloud storage. You can upload almost any type of files to your cloud storage space, then link from your blog. Hosting PDF and MP3 files to cloud storage and publishing them on Blogger is a popular practice among bloggers. In this post, I will be describing the process of uploading audio/MP3 files to cloud and linkink them to Blogger.

In the first step, choose any cloud storage service. My first choice would be Dropbox, which offers great file hosting services and customizable options. Ok, let me list down some of the most popular cloud storage services.

1. Dropbox: Dropbox is the most popular cloud file hosting service, which offers 2GB free space for cloud storage. You can get more space upto 16 GB for free from Dropbox

   

   using some of the options like Sharing on Facebook, Twitter, referring your friends etc. If you need more storage space, you can buy space from Dropbox also. You can upload files to Dropbox and keep them either private(which cannot be accessed by someone else other than you) or make them public (anyone can access them if he has the link to the file.) . After Joining Dropbox, you can install the Dropbox application to your computer and synchronize files in Dropbox folder. That means, after installing Dropbox, a folder will be created with some subfolders in it and when you move a file to this folder, it will automatically be uploaded to your Dropbox cloud. You can join Dropbox from this link>> and get 2.5GB of free space. To share a file on Blogger, you need to place the file in the Public folder. Then get the public link for that file. I will tell the process of embedding the audio file into blogger later in this post.
2. Ubuntu One: Ubuntu One is another popular cloud storage service. If you are using Ubuntu operating system, then you automatically get Ubuntu One installed on your system and can sign up for a 5GB free space. If you need more space, then you can

   buy from Ubuntu. Ubuntu one also works somewhat similar to Dropbox, it also synchronizes files in your Ubuntu One folder and the cloud storage. You can upload an audio file to Ubuntu one, then you need to share the file to public to be able to share on your blog. Ohh, don't get confused that you can use Ubuntu One from Ubuntu Linux only. You can install Ubuntu One on your Windows PC also and signup for a 5GB free space.
3. Google Drive: Google Drive is also an option for free cloud storage. If you have a

   Gmail or Google account, you automatically have 5GB of free cloud storage space on Google Drive. You can upload audio files to Google drive and share them as public to embed them into Blogger blog. You can also syncronize Google Drive with your computer's Drive.
4. Microsoft SkyDrive: Skydrive is also a good cloud storage service associated with any Outlook/Hotmail/Live account. SkyDrive offers 7GB of free storage space to its users and it can be run on Windows and Mac OS X. Now, SkyDrive comes as an app on windows 8. However, it has a file size limit of 300 MB for uploading. You can choose to use SkyDrive to share music publicly to your

   Blogger blog.
5. Amazon Cloud Drive: Amazon Cloud Drive offers 5GB of free storage space when you sign up. You can also buy more spaces from amazon if you need more.
6. Some other popular cloud storage services are iCloud(for Mac users), OpenDrive(offers 5GB free space with some limitations like 100MB file size limit, 1GB/day bandwidth, 200KB/s speed etc.) Box, Mediafire, Rapidshare etc. But, Box, Mediafire and Rapidshare does not provide hotlink to your files for free accounts. You need to purchase paid storage to get Hotlink to your files. So, to publish media on Blogger blog, I do not reccomend these services. You can try any of the 5 cloud storages I have mentioned earlier.

After uploading your files to the Cloud storage, the next thing is to share them embedding into your Blog. I am now going to tell you how to embed audio files in Blogger blog.

HTML5 supports embedding audio or music files to HTML doccument using the <audio> tag without using any third party plugin. The <audio> tag is a new feature of HTML5 which you can use to natively embed audio playback in any HTML document. 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: 

The player is generated using the following code:

<audio controls="">
<source src="audio-file-url">
<b><span colour="red">
<b>
If you don't see the audio your browser does not support the audio element.
</b>
</span>
 </b>
</audio>

Now, in the above example, you can set the control to 'autoplay' or 'loop' if you want your audio file autoplayed or looped when the page loads. To add an audio file in your blog post, first get the full URL of your file that you have hosted to Dropbox or any other cloud storage(Remeber, if you are using Dropbox, you need to put the file in Public folder), then Go to HTML editor in your post editor and insert this code:

<audio controls="">
<source src="audio-file-url-copied-from-storage"></source>
<b><span colour="red">
<b>
</b>
</span>
</b>If you don't see the audio controls, your browser does not support the audio element.
</audio>

Before publishing, ensure that you have the right to publish the music to public and you do not infringe the copyright for the item.

That's it. You are good to go. If you liked the tutorial, please share it to Facebook, Google+ etc. Thanks.