Search This Blog

Wednesday, October 19, 2011

My Tech Support "Process" - Embedding Audio in Google Sites

XKCD Tech Support Cheat Sheet
This XKCD comic is funny because it's partly true, at least for me (I won't speak for others in my department). Sometimes when we tech support people hit a wall, we turn to Google for answers. It rarely disappoints. Here's the most recent example of my mish-mash support approach that worked out gloriously.

For quite some time now, we've had a number of teachers (and students) who want to embed audio clips in their Google Sites. For reasons none of us have been able to figure out, the super-helpful-built-in mp3 "gadgets" don't ever work. You can embed the player just fine, but it won't actually play your audio file. Grrrrr.....

Monday a colleague asked for help doing this very thing, and knowing I'd been stymied in the past trying to get it to work, I Googled "mp3 player gadget not working."  Good one, huh? About 95,100,000 results. I also tried "embedding mp3 in google sites." About 1,240,000 results.

Now, here's where my expertise* may have started kicking in, because I had tried some of the offered solutions before and had no success, so I sort of knew what I was looking for in the search results. I went on a little journey through some help forums, visited a few different sites with embeddable mp3 players, and read up on "ODEO" (the gadget Google provides) to find out what its problem was. It should have worked in Firefox, according to some, but we were using it in Firefox and IT WASN'T WORKING. Apparently, according to others, this is all to do with redirects and Google's tendency to give everything a mile-long URL. I stored that morsel for later, because I needed to know that. I ended up on a French site featuring something called "dewplayer," which, according to one forum, was the only player [a few] people could get working properly.

The first site we found was all written in Spanish. No sé. 
Alsacréations had directions in English. Oui!
Game on.

I quickly downloaded the .zip file and started following all the instructions about copying and pasting HTML code. I had already read elsewhere, and dewplayer confirmed, that the mp3 files we wanted to play on our pages had to first be uploaded to our websites. Huh? I wasn't sure I knew how to do this in Google sites. Mr. Scotlan, my first guinea pig in this grand experiment, had already tried uploading his files to Google Docs, but that wasn't close enough to the location of our embedded player, and I figured this was where all the redirect problems were coming from.  I knew we needed a URL for the file, so I read some more help forums....

Trying to make a long story a bit shorter, here's what I discovered, some by brilliant deduction (so modest) but most by trial and error:
  • On your Google site you need to create a page (it can be invisible) that is a "File Cabinet" to store your files. Both teachers I worked with created file cabinets called "mp3" because that's what they were planning to store there. Clever.
  • The mp3 files have to be named correctly for the code to recognize them--that's means NO SPACES in the file names. Become one with the underscore_.
  • The dewplayer.swf file has to be in the file cabinet too. Upload it there.
  • You need to be able to read HTML code to a slight degree to figure out where to stick your cursor for copying and pasting.
If you want help setting this all up, and you work at my school, I'm happy to come and help you. If you want to try it on your own, follow these steps:
  1. Visit and download the .zip file. There's lots of stuff in the .zip file, but you really only need the dewplayer.swf file.
  2. create a file cabinet page within your Google site
  3. keep the file cabinet page open in a separate tab (you'll need to copy the URL of its location)
  4. upload dewplayer.swf to your file cabinet
  5. open a tab with this .swf file open (you'll need to copy the URL of its location)
  6. upload your .mp3 files to your file cabinet
  7. Go to the page where you want to embed the audio file and get into "edit" mode. Click the HTML  button to see the code behind your page
  8. put your cursor where you want the file embedded and paste this:
<object type="application/x-shockwave-flash" data="dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer">
<param name="movie" value="dewplayer.swf" />
<param name="flashvars" value="mp3=test.mp3" />
<param name="wmode" value="transparent" />

9.  In the two spots highlighted yellow, replace that text with the URL from step 5
10.  In the spot highlighted green, replace that text with the URL from step 3, but add a slash (/) and paste in the exact file name of the mp3 stored in your file cabinet.

Simple, right?

Actually, once we got it to work, it didn't seem so dificult. Step 10 was the trial and error part. But in that first moment when we clicked "play" and actually heard sounds we wanted coming out of our computers, there was a lot of high-fiving and YAHOOing.

Want to see it in action? Visit Rob Scotlan's music page or Julia Maeda's 7th grade homework page to check it out.

My favorite part of all this? I felt like we were actually doing the kind of problem-solving and personal learning that we wish for our students all the time. There was no real expert helping us. We figured it out ourselves! Is there more than one way to do this? Most definitely. But what we cobbled together worked, and that euphoria of actually hearing it work was something else. Mr. Scotlan and I did a little victory dance. Maeda Sensei and I shouldn't have been celebrating quite so boisterously while working in the library perhaps, but we couldn't help it. Our hard work didn't pay off in a grade, or a pay raise, or even recognition from a single other person (other than the two middle-schoolers looking at us sideways). Success was our reward, and it felt great.
*I use this term in the loosest possible sense

No comments:

Post a Comment