6/05/2006

Publishing Audio as Blog Background Music

NOTE: I am not condoning the misuse of copyrighted material, nor am I condoning the violation of terms of service for any service provider. This post is merely educational. Individuals are encouraged to use this information responsibly and legally!

The question was asked of me lately, "How do I post audio on my blog as background music?" It's something that I really hadn't done before - I was familiar with the method, just never the practice. So I did a little research and here are some solutions - the simplest cost money - the free ones are a little more complicated, but are not impossible.

The first thing you'll want to do is to actually upload your audio file to some location on the internet. Every file on the internet has an address and once you get your file uploaded, you'll need to know the actual address of the thing. You have several options. The first will probably end up costing you money. If you have your own website, chances are that you pay some amount for the web space that you "own" and/or "rent." I have space that I "rent" from GoDaddy.com and so I use that for a lot of my online storage needs. However, if you're not real interesting in building a online empire, you may want a free solution. There are plenty of those too.

I've used a couple in the past. http://www.putfile.com is nice because it will host images, music, and movies AND they try to monitor their content. Other services http://www.yourfilehost.com and http://www.filecabi.net may work as well, but they are much less monitored and the content is often objectionable. It's real simple - I think for each you'll need to create a free account and simply find and upload your content.

Now, the fun doesn't stop there, because these free services aren't necessarily interested in you getting unbridled access to the media you upload - they want people to view/listen from THEIR site (i.e. people going to putfile.com to listen to your song) so they don't make it easy for you to figure out what your filename is or where it's located once it's uploaded. But, it's not impossible. Login to your putfile.com account and browse to "My Media" which should be a link near the bottom of the page after you login. Select the song that you want to eventually be the background music to your blog or page. It should start to play. You may get some warning in your browser about wanting to use a plugin to play the content - that's fine, approve it and you should hear your song. Now, here's the tricky part, you have to view the source of the page, which is pretty standard in most browers and will be located, likely, in the View menu at the top of your internet explorer, firefox, or other browser window.

Viewing the source will open a new window with a lot of weird tags and text things. What you're looking for is your file name (which will have been changed from what you uploaded). It will be near something that looks like this <embed text text text data="http://upload.putfile.com/videos/xxxxxxxxx.mp3"
. . . you're needing the part inside those quotes. Write this down or copy and paste it somewhere on your computer that you can easily access later.

Now, that your file is online, you need to specify in your page or blog's code that you want THAT file to play when someone visits. I'll be using blogger because that's that I'm familiar with, but as long as you can edit your blog's HTML - you can make this happen too. In the blogger control panel, select "Change Settings" and navigate to the "Template" tab. In a box in the middle of this page, you should see your blog's code. This is what your browser sees and translates into the images and text that you read when you actual go to your blog.

You have two options here too. You can use the OBJECT method or the EMBED method. I would recommend OBJECT just because it's a little more standards compliant. Practically, they look the same except everywhere you just replace OBJECT with EMBED - but read on for a few other subtle differences

In the code, near the top you should see <Head>(a head start or opening tag). A little further down you'll find </Head>(the head ending or close tag). Anywhere between these tags, put the following code:


<object data="http://www.somename.com/xxx/yyy/zzz/filename.mp3" loop="true">
</object>


You'll want to change the address in red above to whatever the address of your audio file is. Also, if you don't want the file to loop, change true to false. The only issue with this method will be that you can't actually control the audio - once it starts playing, it'll keep playing until you navigate away from the page.

Your second option, EMBED will give your visitors control over the playback - mostly, they'll be able to stop the audio if they don't want to listen. Your site will display a little media player tool bar with play and stop controls as well as a timeline. However, in this case, you can define where this player displays. It'll take a little more work, but if you need it, it'll be worth it.

Instead of placing your code between the head tags, scroll down through the code until you find a place where you want the player to display. Two popular places would either be the top or bottom of the page. At the top, for blogger users, I would suggest putting the code immediately before the tag - don't forget to replace OBJECT with EMBED and /OBJECT with /EMBED.

Otherwise scroll down to the end and look for the footer tag - depending on the blogger template you are using this could be coded a little differently . . . but look for something like div id="#footer" or something like that. There will also be a /div tag. Put the EMBED code in here and your controls will be at the bottom of the page.

And that's it. Save your template changes, republish your blog - you'll probably want to republish your entire blog since republishing index only will only apply changes to NEW pages as you create them - you're older posts, if someone looks through your archives will not have music playing).

Hopefully this helps.


10 comments:

Sheena said...

Just wanted to let you know that was a pretty neat trick, looking out for the code in the source ;)Thank you, you've been a great help.

Groovy Nutter said...

maybe you can help me...im trying to embed an audio for one particular post...everything i have tried doesnt seem to work...I have tried your html code as well as someone elses...neither seem to work. Wot code would work in an actual post???

Unknown said...

thanks for the info... i'll try if its going to work! :)

waiting-to-exhale said...

doesn't work!

Anonymous said...

Try this site for great music tracks for use in your blog, podcasts etc..

Free Music Tracks

All tracks on there are free and theres some decent ones

Unknown said...

I have an useful article about adding background music into blogspot. It is very simple, just visit my blog at http://it-nthusiast.blogspot.com/2009/12/adding-background-music-to-your.html

Thornhill Wedding Limo said...

LimosRentalsToronto provides high class facilities in Oshawa Wedding Limo,Georgetown Limos,Hamilton Wedding Limos.Scarborough Wedding Limo,East York Wedding Limo are also best choice.

Credit Cards Debt Solution said...

Makemedebtfree organization helps you in Non Profit Debt Settlement,Credit Cards Debt Solution,Student Loans Consolidation.Credit Counseling and Debt Settlement in Toronto,Ontario,Calgary also consolidated here.

kitchener wedding limousine services said...

Hamilton Wedding Limousine Services is best choice for Wedding Limo Service.We provide high class services for all regions - Hamilton Wedding Limousine Services, Richmond hill Wedding Limousine Service, Caledon Wedding Limousine Services.

new tire truck said...

Yellowtires provides 24 hours tire road services, truck tires in toronto, brampton, mississauga. It provides truck alignment in toronto, brampton also