Google Sites is a great solution for teacher and student web pages. However, for all that you can do on Google Sites, embedding an audio player so you can play an audio file that you created is not straightforward.
I decided to write this after seeing this on my Twitter stream yesterday:
Method 1–Not easy, but you learn a lot!
Twitter is a great medium, but sometimes you have to interpret the tweet. Although it seems like we just want to know how to upload, I assumed (maybe incorrectly) that not only did they want to upload but be able to play the file as well. If uploading is all that needs to be accomplished, then Google Sites allows you to make a file cabinet page for just this purpose. For a good explanation, watch:
Create a file cabinet page in Google Sites
Now, your file is now on your Google Site but how in the heck can you embed the mp3 on another page so it plays. There are a few ways to do this, but I’m going to stick with a Google solution.
Google Reader has a player of its own. If you use Google Reader and subscribe to a feed that has audio content, then you probably have noticed that the audio player is embedded right in the feed. We’re going to use that to play audio in Google Sites.
Here is the HTML code you will need. If you’re thinking that you don’t know HTML and this isn’t for you, it is just a copy and paste solution–no knowledge is needed:
<embed src="http://www.google.com/reader/ui/3523697345-audio-player.swf" flashvars="audioUrl=http://www.example.com/song.mp3" width="400" height="27" quality="best" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
If this copy and paste doesn’t work, go here and it should work fine.
All you need to do is copy and paste the above code into Google Sites. The text in red will need to be replaced with your own mp3 file. You can leave the width alone or change it.
While in your Google Site, click on Edit Page and then click on HTML Copy and paste the above embed code.
Now, we need to replace the red URL with the address of your uploaded MP3. For now, go ahead and click on update and save and you will see the audio player appear.
Navigate your way to your file cabinet page and right click on the “download” link and copy the link address:
Now, navigate back to the page with your embedded audio player, go to edit mode, click on the player, click properties and paste the URL.
Now here is the slightly tricky part. The player is expecting an mp3 file but the pasted URL is not an mp3 file. Fix that easily by appending &type=.mp3 to the end of the URL.
Click on OK and Save and you’re done. It should now play!
You can go to my test site and see the end result here.
You don’t necessarily have to use Google Sites to host your mp3 file. You can use Google Docs, Dropbox, SugarSync, etc to host the file. The important part is adding the &type=.mp3 to the end of the URL. In addition, instead of using the Google Reader player, you could opt to insert a Google gadget into your site. The procedure is the same!
Method 2–Easy and Free
Method 2 is by far the easiest and I have mentioned it before. Use the great file sharing site DivShare. DivShare allows you to upload all types of files and then creates the embed code for you! The free account gives you 5 GB of storage and paid versions are quite reasonable. Most users will be able to get by with the free version.
Here’s an example that I have embedded here which is the same if you use Google Sites.
In conclusion, the Divshare method is by far the fastest and easiest but involves a third party service. Method 1 is far more difficult but you learn a lot about Google Sites, its capabilities and URL’s.
Hopefully, one of these methods will make embedding audio into your Google site a reality instead of a wish!
By E-mail
