Tuesday, April 18, 2006

Embedding audio in your webpage

A very simple way to embed audio into your webpage

Your web server needs to support the audio mime types to decode this line and play. I think lots of web servers out there do support these types. Go ahead, use them and enjoy.

You need to make sure that the audio file does not sit on your own local hard drive, instead it should be accessible to all in an Internet web server. Try out www.ripway.com to get your own free disk space and upload your audio files there to embed that link in the code shown and NOT your local address where the file is sitting. (Thanks Jenny, for pointing that out as you bumped into this issue!)

Please be careful about using this as background music for your webpage as in ripway, if you use large mp3 files, then you might end up using uo the bandwidth that is allowed per day. Use small files and that too only for background music. If you need to embed audio with a player plug-in then you would need to use special tags to embed the classid of the player that will be discussed in another blog entry.

17 Comments:

At 11:03 AM, Blogger Virginia Revoir said...

Hi, I took your advice about how to do that. Since I don't know much about computers, I don't understand a lot. I do know I got this to where I can hear the music on my computer, but no one else can hear it on their computer when they pull up my blogsite. No one is explaining in detail how to do it right. This is what I got. How do I make it to where other's can hear it?

\\C:\Documents and Settings\Charles Revoir\My Documents\My
Music\iTunes\iTunes Music\Compilations\Fallen [Bonus Track]\12 My
Immortal.m4a

 
At 11:04 AM, Blogger Virginia Revoir said...

P.S. My email is Revoirs@juno.com. Please also send response to me. :)

 
At 1:43 PM, Blogger Karthik Nagaraj said...

Hey Jenny,

I can see what the problem is - You have the file on your local disk and thats why you are able to hear it and no one else can as they dont find the file on their C:\Document [blah blah]\...

So here is what you can do: Upload your music file to some sort of server where in you would need to specify that address in the embed link. Now the next question is where do you get a web server that can host your music files? You can try www.ripway.com and you get about 30 MB of disk space. Upload your file there and get the link to the file and put that in place of the C:\....

Sorry, I think I assumed a lot when I wrote this entry and didn't think about this corner case. try it out and let me know. Good luck. I checked out your blog and it's look nice. Nice to bump into someone who is spiritual and religious. I'm too, but not a Christian, Hindu from India staying in the Bay area - still God is God! Good luck and God bless!

 
At 1:47 PM, Blogger Karthik Nagaraj said...

Jenny,
I have updated the blog entry to reflect some more information on how to do this correctly.
Thanks!

 
At 2:02 PM, Blogger Karthik Nagaraj said...

Jenny,
your email id is bouncing and it bounced twice. anyway hope you see the reply to your query.

 
At 11:57 AM, Blogger Virginia Revoir said...

Thanks! I'm gonna try it out once I get my kids down to sleep. :) Hard to concentrate with 4 little ones. I have friends from India and I just wore an outfit from India to our church conference. Thanks for helping me. Can't wait to try it! :)

 
At 1:03 PM, Blogger Virginia Revoir said...

Sometimes the song will work when I pull up my website and sometimes it says that it can't work. This is the one I used. Please tell me if I did it correctly. Most of the time it will play the music.

http://h1.ripway.com/Virginia777/12MyImmortal1.m4a
(I inserted the text where you told me to.)

Is there anything I can add to that, that will make it to where you can see controls and people could stop it if they wanted to?

 
At 1:37 PM, Blogger Virginia Revoir said...

I also tried this one.

http://h1.ripway.com/Virginia777/04-MyImmortal.mp3

Again, it works sometimes and then sometimes it won't and I'll get an error saying file is corrupt. But then why would it play sometimes?

 
At 9:40 PM, Blogger Karthik Nagaraj said...

Jenny,

Here is the problem:

[1] Make sure you close the tag for the embed link. Some how when I cropped the image I must have accidently cropped off the end. Check out the update for the entry.

[2] Dont use this to embed complete songs as this will use up your allowed bandwidth on ripway for a day. Try to keep this option of embedding as a simple welcome music and not cimplete song that is about 3 to 4 MB. Everytime somebidy or yourself load it up it is consuming bandwidth. I did type in your address to the mp3/m4a file in the browser window and I get the following message from ripway:

"User Account Exceeded Bandwidth
This user account has exceeded their daily bandwidth limit. If this is your account, you might consider upgrading to a premium plan, or reduce the number or size of files you're sharing online. As soon as the total downloads from this account over a 24 hour period drops below the accounts limit, downloads will be restored."

Hence, use this as an option to welcome users. Now, your next question obvisouly will be - how do I put in audio on your page so that it has controls that user can play it as per their wish. Right? You have already asked that. I think that requires another blog entry which I might enter it sometime tomorrow or on Monday. It requires one to have the Windows Media player/Quicktime plug-in and you need some embed and classid tags to do that. But yes you can do it. I will put it up and update you. Send in your correct email address.

 
At 10:11 PM, Blogger Virginia Revoir said...

Revoirs@juno.com is my email address. I wonder why you couldn't send it? I get about 15 emails a day on it. I hope it works for you. Thank you for helping me. I know you are going out of your way to do it. :)

 
At 11:38 PM, Blogger Virginia Revoir said...

I think the music works now.

 
At 7:30 AM, Blogger Karthik Nagaraj said...

Cool! Enjoy!

 
At 10:33 PM, Blogger Joan Saks Berman said...

I have a .wav file of a lecture I recorded, that I would like to make available on my blog. It's 25mb, and Ripway only allows 30mb total for a free account, and apparently only 10mb at a time. So where else can I go to upload this file, or is there another way to put it on my blog?
dr.joan@joanberman.com

 
At 3:55 PM, Blogger Karthik Nagaraj said...

Here is something you can try - since wav files are huge, it is usually advisable to convert them to either streaming quicktime format or realaudio format which will drastically reduce the size and still preserve pretty good amount of clarity. After you have made it a RA/RAM/WMA file, you need to find a server to host it. The simplest way to do this will be to get a RA file and create a RAM file and have a link to that RAM file on your blog - people can click that and they can listen to it on their Real Player. There are other ways you could do it but that would mean a little more programming and making sure your webserver supports Multimedia streaming and hosting. Get some free webserver space from geocities.com or any other website or you can use ripway itself once the size reduces. Hope this helps.

 
At 4:37 PM, Blogger Karthik Nagaraj said...

EVWG
It does not matter if you MAC or a PC. If you webserver support the MIME types then you can embed audio into the html page. HTML is deciphered by the browser.

 
At 5:47 PM, Blogger Santiago Rios said...

hello KarthiK

Blogger as a tool is great.. but I have a problem. I bought a software called AUDIORAZOR made for playing audio files in a blog or a website. However I've been searching in blogger help section and I do not know how to install it. The directions of the software creators star with the following instruction:

"upload siteaudioplayer.swf to your website's root directory (the same directory that contains whatever web page will be dysplaying your audio razor player"

How can I do that? I would like to have a fixed player below my profile and a player for some entries. This is very important for me because my blog is about RADIO....

The audioblogger solution does not work for me because I'm outside the US.

Thanks a lot for your help.
SANTIAGO

 
At 10:06 PM, Blogger Geeky Tai-Tai said...

I just tried embedding the audio in my blog post using the code you've supplied, but it only shows up in IE7, not Firefox. What did I do wrong?

 

Post a Comment

<< Home