Thursday, July 31, 2008

Embedding audio in blogger

Today I was working with a teacher who wanted to embed audio recordings into his blog. He runs a sports blog where students report on their sporting activities. He thought it would be a good idea for his younger sports people to record their sports reports and embed them on the blog as they had much more to say than they could write about. I thought this sounded like a fantastic idea and we started out on a problem solving trail.

Firstly we worked out that you could embed a player from Podomatic, but that embedded all of the episodes and we only wanted to embed one.

Next we tried to convert the mp3 to an .mov using switch.app (a free app for macs which converts files to different formats). Unfortunately this wouldn't upload in blogger.

So I put out a tweet to my twitter network for some advice. Miguel Guhlin came back with this solution. We uploaded our mp3 audio to Edublogs.tv, grabbed the embed code and pasted it into blogger. And voila...

Update: The audio from Edublogs.tv seems to play automatically when you load the page, would love to hear from anyone who knows how to change this.

Update 2: Thanks Miguel for this tip. When you have embedded the code from Edublogs.tv click on the 'edit html' button at the top of your posting page and then look at the code for the audio. You will see something that says "autostart=yes" change the "yes" to "no" and this turns the autostart function off. Thanks again Miguel.



We also received some advice from Lenva:
She suggested using the online site http://vocaroo.com/. At this site you can record your audio online then grab the embed code and paste it into the post as well.

Lenva also shared this site http://boomp3.com/ where you can upload your audio and then grab the embed code.

Update: Here is a link to Lenva's new blog on tips and tricks with blogging that outlines how to embed in much more detail: http://cogsforblogs.blogspot.com/2008/05/audio.html

What would I do without my twitter network?

32 comments:

Skip Zalneraitis said...

Thanks for the explanation of what Miguel said. All I saw was your reply to him in Twitter. That's great to know.
TTFN
-Skip

Suzie Vesper said...

Hi Jane - thanks for that. I've meant to chase up online mp3 storage before so that I could add audio to my SlideShare presentations so this was great. I have added these tools into the online storage and music sections of my wiki. I couldn't figure out how to turn off the autoplay for the edublog.tv option which is a little irritating. I added in some autoplay="false" code but it didn't work.

Miguel said...

Howdy! In looking at the embed code for MP3 audio, I noticed that the following appears: "autostart=yes"

Did you try changing the "yes" to "no"?

Glad to have been helpful,

Miguel Guhlin
Around the Corner-MGuhlin.net
www.mguhlin.net

Mike Crowl said...

Hi, Jane, just came across your blog today, and see that you're in Dunedin. I've put a link on my blog to yours - I'm 'collecting' Dunedin blogs...!

http://mikecrowlsscribblepad.blogspot.com/

Lucille said...

I did not see "autostart" anywhere in the HTML embed code. I embed an audio file in my blog after uploading, but it plays automatically and I cannot find a way to change this. All help appreciated

Dany said...

Thanks for the informatin i was able to add audio to my blog thank you very much for the information it has been days since i have been searching for this

sarah said...

I recently came accross your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.



Sarah

http://www.thetreadmillguide.com

Anthony Joseph Lanman said...

Thanks so much for posting this! I was searching all over the web for a way to embed audio into Blogger, and happened on your post, and problem solved! Thanks!

Rob McLean said...

Hi Jane,

Thanks so much for this!!! I've been going crazy trying to find a reliable source for embedding audio... I was getting ready to post on YouTube with a static photo in the background, but this is so much better!

I tried all three recommendations, but the edublogs.tv was by far the best... the "booMP3" site appears to have been disabled.

Thanks again!

Srinivas said...

Thanks! It was really useful!

Dan2000 said...

thanks a lot for the information. it perfectly works.

John said...

Thanks for the info. Very very helpful.

Eli From Brooklyn said...

Thank you!

First Rate Property Management - Boise, ID said...

Thank you so much for this step by step! It helped me so much!

C. June (Casey) Wolf said...

Ah, brilliant! Thanks so much for this. Just getting into recording my stories for my blog, and immediately tripped over several obstacles, the Blogger upload being one.

Cheers!

Casey

Casey Wolf said...

Poop. I couldn't get it to work at all, though it was interesting to go through all those different hoops - get a sense of what's going on out there in sound conversion.

From now on, I do NOT record using Roxio or Nero, and I continue trying to figure out a better way to do it. No conversion. That's the cleanest way to go.

John Campbell said...

I have been trying to add audio to my blog for my ESL class dictation exercises and was just about to throw my laptop out the window when I found your post. Thanks so much. I followed the steps and it worked perfectly.

By far the best way to record audio is with audacity. It exports as a .wav file, but can be converted using any nimber of online converters.

Thanks.

www.englishlearns.com

Shannon said...

When I searched the Internet for this, I came cross your post. It was very helpful. Thanks!

Hot Buttered Media said...

I've returned to this page about 10 times as well as refer others...thanks so much!

Beth Mann
Hot Buttered Media
http://www.hotbutteredmedia.com

pH 7.0 said...

I think I'm a real idiot.
I come here to find out how to embed audio in blogger, and the best answer is
'We uploaded our mp3 audio to Edublogs.tv, grabbed the embed code and pasted it into blogger. And voila...'
OK, I got my subscription to Edublogs.tv, start uploading my mp3 file. After a while it tells me that there have been some problems with the tags and it asks me to fill-in the details, so I do it. After another while it tells me 'Upload is now complete. Your audio is being processed.' And it stays like that for a looooooong time. Realizing ten minutes is way too long for 'processing' my audio, I click on 'My Audio' tag, just to be taken to my audio page; all I can do here is play the song or delete it! Where's the code? I check again and nothing, when I click on it I just listen to the song... but I need the code! I realize what clicking on the file takes me to http://edublogs.tv/play_audio.php?audio=1234, but that's not a tag. So I delete it and start all over again. And again I'm stuck at the 'audio processing' page.
Going over Lenva's page I realize there's some code to embed "mp3" files (more about the quotation marks in a moment), so I copy the tag while realizing it calls for quicktime, and is designed as a video! Like this: '
' I don't know much about this, but if it is saying that it is a type="video/quicktime" it should be video, shouldn't there be a type=audio or something like that?
I just checked again, and my file is still being "processed", as it was for some time before I started writing this comment.
I realized I could take Lenva's code and try embedding it into my blog, which takes me back to my original question, How do I embed audio in my blog? It was partially answered above 'we grabbed the embed code and pasted it into blogger'. But HOW do I paste it into blogger? Is it supposed to be another entry? Do I put it as part of the sidebar? Does it need to be an html post?
And I just checked again... my file is still being processed! I am now officially scared to click on 'My Audio' tag... I don't want to start it all over again.

I just tried embedding the code as part of a post just the way it is above; all I get is a small square, no link, no audio, no nothing.
More than one hour working on this and nothing to show... nor hear.

pH 7.0 said...

I feel google's support answer a bit more comforting, ' Once you've uploaded your files to your web host of choice, you'll need to enable enclosure links to link to the file from within a Blogger post. To do so, just go to your Settings | Formatting tab and set the "Show Link fields" option to "Yes." This will add the enclosure link fields to your post editor. When composing a post, you'll then see a field for your enclosures. From there, just enter the URLs of your audio files, and your blog will instantly become a podcast. When viewed with most RSS readers or podcatchers (such as Google Reader, iTunes, or Bloglines), your recordings will appear as embedded music players. It's that easy!'
I just did it like that, but it seems that clicking on the link actually takes me to the edublogs page, instead of being a player within my blog! I'll keep searching.

pH 7.0 said...

Finally!
After another hour or so, and checking other blogs that talk about yours, I got to embed (make a post on the blog), adding some comments and then pasting the code which I got from edublogs by copying the shortcut while right-clicking on "download audio" in the audio page I was interested in. The code, plus HTML looks something like this:


Be sure to delete any spaces and CR (other than those necessary such as 'embed src' before pasting on your blog, otherwise it might not work or could work but it will also show part of the code itself --not nice.) BTW, the above link will take you nowhere; I'm not trying to promote anything here, it is just an example.
Thanks.

enjoey said...

Hi Jane,
Funny, I knew of a way to play audio on a blog which forced the user to click on the control and wanted to make it play automatically, whereas you wanted the opposite.
So, if you want to do that, try uploading to divshare.com and embed that code into your blog. It works like a charm with a play control right into the page. Hope this helps and thanks for your tips on auto-play. Much appreciated.

Aboveoeuf said...

I use the Yahoo Media Player
http://mediaplayer.yahoo.com/

OLAPLANTE said...

Jane,
Just like someone else noted, if you change "autoplay=yes" to "autoplay=no" it won't play automatically.
False didn't seem to work.
Thank you very much for this! A load off my shoulders! :)

Katelyn said...

It has to be mp3 :( A lot of my music from itunes is m4a. Is there a way to change this?

Jane Nicholls said...

In iTunes there is a way to convert your music to mp3. Should be under the advanced tab

costa rica hotels said...

thank you very much for your information helped me understand things I did not know because

DFingas said...

this is a great post. i'm using BooMP3 & Dropbox as a result of this post.

great detail & excellent updates/responses.

thanks for the useful info!

PEACE
...be calm...

Laurie said...

it very simple.

1. Post you audio files to this site
http://search.4shared.com

2. grab the code. ( under share with friends)

3. paste the code in the body of your blog post.

click here for a working example.
http://eritajkreol.blogspot.com/2011/03/tant-yaya.html

Anonymous said...

to embed web radio http://www.findradio.net/findradio-widget

Audio Blog said...

Just use the site http://twitaudi.com