Adding music to your blog

There are many ways to add music to your blog. The most common way is to embed it into your post, or in New Blogger (formerly Blogger beta), add it as a HTML/Javascript widget via the "Add a Page Element" in the Layout.

You will first have to find a music file that is already hosted on the web, or if you have your own music file stored in your computer, upload it into a file host and then get the URL of the file. If you don't have any music file saved in your computer to upload, you can find files already hosted at freemp3mail.com, select the artist, click "Free Download" and you will be taken to the file hosted on the web. You can copy the URL from the address bar of that page. For example, this is a file already hosted on the web: Josh Aran (Blossom).

In the HTML/Javascript widget window or the post editor window, paste this code:

<embed src="URL of music file"
width="150" height="40" autostart="false" loop="false">

UPDATE 15 November 2007: A blogger commented he/she got error message "The tag isn't closed". No time to test this, but with XHTML (and HTML), opening tags without closing tags are supposed to end with a backslash /. Further, I believe with XHTML, there have to be a space as well. If you have problem, try

<embed src="URL of music file"
width="150" height="40" autostart="false" loop="false" />

and see if it helps. Please give feedback as I have no time to test.


You will have to substitute "URL of music file" with the actual URL of the music file in the script. In the script, there four attributes - width="X", height="Y", autostart="false/true" and loop="false/true". You will have to make sure that the value of width attribute X is consistent with the width of the container in which you intend to add the player into. For example, the width of the sidebar is 160 for this template, so I have to add a value less than 160 if I want to put it in the sidebar. For the autostart attribute, if you put it as true, the music will start automatically the moment your blog is loaded. Many have the opinion that this is a bad choice as the visitor may be visiting your site in the middle of the night when others are sleeping, and may be forced to quickly exit your page to stop the music. If you put the autostart attribute as false, the visitor will have to click the start button to start the music. For example, I have used the "Add a Page Element" to embed an MP3 player at the bottom of this blog Good Hobby Ideas. Try clicking on the start button to listen to the music. For this player, I have put the attribute loop="false" so that the music will stop when it is finished. If you want the music to loop continuously, you will have to put loop="true".

There are other ways of adding music to your blog. For example, you can use this site
Sonific to generate a script for putting into your post (the player will only appear in that post) or the Page Element (the player will then appear in all pages of your blog). You register for an account, verify your email address, sign in, select a songspot, and you will be taken to this page to fill in the field for the blog platform you are using and the URL of the blog you want to put the songspot in (see screenshot below, click to enlarge):



As you can see from the screenshot, you have various option like orientating the player horizontally or vertically, select the size, whether to start the music automatically or manually, etc. You will also have to select your blog platform (which in our case will be Blogger) and type in the URL of the blog you intend to embed the player into. When you are finished the configuration, click "Activate" and the next page will display the script for you to paste into your post or the Layout. If you paste it into your post, when you try to publish it, you will get an error message "Your HTML cannot be accepted.......". Ignore it, tick "Stop showing errors for this post" and publish.

You can see an example of the player embedded into a post at Testing Sonific. The player will only appear in this particular post. You can also see the player embedded in the footer of this blog. In this case, the player will be displayed in all the pages of the blog.

You can also use Google Gadget to add an MP3 Music Player on your blog. See post Adding a MP3 Player to your blog (click "BACK" button to return to this page).

RELATED POSTS:

Music for websites: Summary (click BACK button to get back to this page)

Easy way to add music to blog using eSnip (click BACK button to get back to this page)

eSnip music player in sidebar (click BACK button to get back to this page)

Invisible background music player for your blog

Embed Imeen music playlist into blog post

Embed Imeen music playlist into blog Part 2

Apple Quicktime to make MP3 player works