Embedding Music in Blogs

Updated: 28th March 2009

Like they say "A Picture is worth more than a thousand words", for people who write about music (or at least those who think they write... like me!) or if you are a music artist, its better to let your music do the talking rather than you :-P. That way, the point couldn't be driven home more. Further, you may not fool around the reader to sound as if you know more than you actually do (!!) when the evidence for your view is provided side by side..

But the problem is when it comes to hosting a music clip (mostly mp3) on blogs, the "how to do" part is not always very straight forward;

So here is a Dummy's guide on how to host your own music in your website/ blogs;

There are primarily 3 ways to do this:

Category 1:
You go to a one stop shop, where You let someone else control both your music file and the player it uses.

Mostly these are websites with file upload feature + a (usually flash based) player; Most of the time they allow streaming (i.e., playing the file already while its still downloading). The playback mechanism is native to the player. Since they take care of a to z, nothing specific is needed from you other than, 1.) uploading your file, 2.)Getting the code for 'sharing' and 3.) placing it in your blog post.. All these steps are rather self explanatory once you visit the web site who offers you this service.

There are too many websites who provide this service, both paid and free; You can google out and I am sure you will find zillions of them; I am mentioning two of my favorites;

1.) In the free category, the basic package offered by Soundcloud looks cool; They have lot of cool things such as non-technical easy presentation language in their site which makes the layman orient himself better. The player also allows you to insert comment on the sections of the song while its playing so you can communicate more effectively with your reader about a particular span of the clip while they are listening;
2.) In the paid category, hipcast looks complete; Its very popular among the Indian Audio bloggers in internet. As a regular listener to some of those audio blogs, I find it pretty Ok; But remember it burns a hole in your purse;

esnips seems to be very popular as well; But I've had playback issues with it, although it could be only me.. Plus, their plugin themes are always "hip" and playful; Thats fine for "da ma n newayz" crowd, while their plain themes are rather bulky; Would be nice if they could rework more on their plugin layouts..

I've also seen Muziboo and Picklecast that people use; Haven't tried them myself to comment;

I used boomp3 for sometime and ditched it due to its inconsistent playback;

Category 2:

You control both the file that is played and the audio player used inside the browser. This is a 2 step manual process and
Here is how you can do it

1.) First find yourself where to host your file. Choose one of the many free storage providers in the internet. Pay attention to two factors while you do this. One, They should offer direct access of the file through URLs (Not all do, like MSN's Sky drive is great but as I write this, it doesn't yet offer a direct anonymous access); Two, it should provide a decent bandwidth limit so that your readers are guaranteed most of the time that the file is available (Google pages or its new avatar Google site falls flat here; from my personal experience it blacks out the file after a few many times its been accessed); And then upload your file there. Note down the direct URL of this file;
Note: I use Fileden's free account; It provides 5GB of bandwidth per account per month; Put in perspective, if you are hosting about 5 MB of music in your blog, it plays up to 5000 times per month; I have only about 600 hits or so a month on my music blog; So it works fine for me so far..

2.) Copy the following piece of HTML code and paste it in your blog post:

<embed src="change me" type="application/octet-stream" autostart="false" loop="true"></embed>


Replace the change me with your actual file location noted on step 1;

That's it; You are ready to go;

For the more curious ones, what this code snippet does is, it lets the browser to play the music via the plug-in that you have asked it to to use (this is already configured in IE by default. It uses Windows media player plugin by default; For Mozilla, you may have to install additional plugins). the <embed> tag used here is a native part of HTML specifications and will work for all browsers; Also As you can see, there are two other self explaining parameters in that HTML code snippet; Autostart and loop; if the former is set to true, the file plays automatically when the page is loaded and if the later is set to true, the file will be played repeatedly until you quit the page.

Adv:
----
a.) Total freedom on your hands; You can always choose where to host the file and you are using an audio player plugin installed in your computer; If at all you chose any provider from category 1 and if tomorrow he shuts down the free service, you might be left in lurch.
b.)It supports not just mp3 but any file type (such as midi or ogg files) as long as your browser has a plugin for the given file type.
c.) Though manual, Category 2 is very simple (uses native provisions of HTML) but very effective (like it allows streaming as well)

DisAdv:
-------
a.) In the context of the above point, the 'embed' tag is not a hyperlink and hence it also downloads the file when the page is loaded. Therefore this leads both you and your reader at disadvantage. While your precisous bandwidth is wasted irrespective of the reader listens the track or not, for the reader it takes forever the page to load depending on the amount of content you hosted in the page and his network speed. Besides bandwidth to host the file is a premium now a days; Unless you have your own web server or a private host who can hold your content (Like your ISP), you are at the mercy of free storage providers in the internet for hosting your file. All said, normally they all have a bandwidth limit; The free accounts certainly do.

b.) Although this works in the most common scenario (i.e., if you use Windows and an IE browser, this approach is almost guaranteed to work by default), sadly most popular media files (such as mp3) are not often understood by default in (all) browsers. So sometimes you have to install additional plugins which automatically solves the problems; But if your stars are bad, you may also have to tweak the browser settings on top of that. Check the trouble shooting section below for more info;
But as I said, If you use Internet Explorer, don't bother too much. It will work without any extra efforts.

Trouble Shooting:
================
A General trouble shooting guide to all plugins related problems in browsers can be found here.

Although its guaranteed to work in IE, often an additional plugin is required for other browsers such as Mozilla Firefox; You have to install Apple Quicktime (or VLC Media player plugin) in your computer. Quicktime should also work for other popular browsers. Personally I have had problems with Google Chrome and further looking up revealed that since the browser is still nascent, it might have to travel some distance before it supports lot of features taken for granted now a days. Anyways, Often installing one of this should solve the problem automatically; If it doesn't, try this page for some tips. If you use other browsers, then you may have to look for appropriate audio plugins specific to your browser. (Che.. By giving that useless info, I am sounding too much like the documentation we write for the software we make!!)

Category 3
This is a kind of hybrid option between category 1 and 2; You control the file to play but depend on someone else for the player; The advantages of this category is immense.
1.) Normally these players are browser independent and you shouldn't face any plugin problem and such whichever browser you use.
2.) Unlike the embed tag, the audio track is hosted as a hyperlink. This means the file is streamed/ downloaded only when someone clicks on it. So you save bandwidth and the page loads faster to your reader.

I have seen odeo being one of the most popular player in this space; But I am sure there are many more in this category too. More info on Odeo can be found here and here. However in my personal opinion, the the streaming rate of Odeo is not smooth and leaves one much to be wanting.

For reasons unknown to me, Yahoo Media Player is not so widely used as far as I have seen. However I find this as the magic bullet that solves all the problems discussed above across the categories. The player is sleek, it is guaranteed to work on all browsers. Streaming is really seamless. It aggregates all tracks in your page into a nice integrated playlist (although on some occasions this can be a nuisance). The code to integrate the player to your page is lean and mean; It is supported by a very vibrant community in the internet (so you get nice support from fellow Yahoo Media Player users). The player can be placed inline with the texts in your post. It has some cool features such as tracing the location of song within the page from the player (like a song locator); The code to evoke the player refers to a common link which means, when there is a latest and greatest version of the player released, you are automatically upgraded without any code change; The hidden capabilities and user specific customization possibilities that one can achieve in this player by tweaking its code are immense; At the same time, its also a bit esoteric. For instance, you need a special code to turn off the auto start of next song that you wouldn't know normally unless you google it out or if you are part of the YMP community.

Verdict:
My verdict is the combination of Fileden (to host the files) + Yahoo Media Player (to play it in your page). You can find all about how I have used it in my music blog.

The biggest unintended impact this player has is, since the clips are Hyperlinked, it allows one to link a clip over the portion of text that talks about the clip. The embedding is seamless even if its amidst the paragraphs. The icons indicating the clips are unmissable and non-intrusive. This gives the reader an unique experience of listening to the clip while simultaneously reading about it.

Audio Editing:

For audio editing, Such as clipping only part of a music file, stitching many clips into one file etc., I use Audacity. I find it more than sufficient for my blogging needs.

Disclaimer:
-----------
Please note, options to host music in Blogs is an ever changing space; I am not surprised if a free service for audio hosting is launched tomorrow in this web 2.0 world, which makes this blog post obsolete. Like for instance, I have seen Wordpress blogs having a much more integrated approach to host clips (provided by wordpress) that I didn't even mention. So please keep yourself up to date with latest developments;

And yes, I don't encourage or discourage readers to use any of the vendors listed here; Its just an unbiased amateurish review based on some personal experience; So please be your own judge !

With Love
Vicky