This is part 1 of a 2-part series…
I’m a BIG fan of embedding. The ability to take media files from one location and use them in another context creates learning environments that are rich and appealing to students. I like it even better when the process is simple. Embedding is now a standard feature for most social networking sites. YouTube was one of the first, and now most media file hosts have followed suit. On just about any media site now days you can find something like the image below which allows you to copy the code and paste it into another site.
Bottom line – most teachers are uncomfortable with coding of any kind, so it’s got to be easy. Most can do the copy and paste, but if you have to manipulate codes, it can be a problem. Unfortunately, there are times when a simple cut and paste is not available. A resource (such as YouTube) may be blocked by a district, or you may have an original file that you would prefer not to upload to a social networking site. That’s where these tutorials come in. I’ll show you how to create your own embed codes so that you don’t have to worry about blocked resources.
I’m going to start with audio in this first part for two reasons. First, it’s easier. For the most part you just mix everything down to an MP3 file and you’re good to go. Don’t even worry about WAV files. Secondly, most of the media sharing sites have focused on video (as I lamented in a previous post), so there aren’t that many dedicated to audio.
Here’s what you do. First, find some web space to hold your MP3 files. Just about any space will down, and there are plenty of free alternatives – Google web, Dropbox, PBWorks, WikiSpaces, or Ning for example. There are lots of other media hosting sites, but most of these are blocked by districts and many have objectionable content.
The rest of these instructions come straight from Mindy McAdams’ excellent tutorial on embedding Flash MP3 players. You need some web space to park two small files downloaded from 1 Pixel Out. Just download the audio-player.zip file from that location, and find player.swf and audio-player.js files. Mindy’s embed and instructions are listed below:
Now that your three files are uploaded, they reside at these URLs:
- http://www.fakedomain.com/myname/audio/player.swf
- http://www.fakedomain.com/myname/audio/audio-player.js
- http://www.fakedomain.com/myname/audio/music.mp3
The next step is to place the HTML for this player on the Web page where you want it to appear. Change the URLs shown below to match your own URLs.
<script language=”JavaScript” src=”http://www.fakedomain.com/myname/audio/audio-player.js“></script>
<object type=”application/x-shockwave-flash” data=”http://www.fakedomain.com/myname/audio/player.swf” id=”audioplayer1″ height=”24″ width=”290″>
<param name=”movie” value=”http://www.fakedomain.com/myname/audio/player.swf“>
<param name=”FlashVars” value=”playerID=1&soundFile=http://www.fakedomain.com/myname/audio/music.mp3“>
<param name=”quality” value=”high”>
<param name=”menu” value=”false”>
<param name=”wmode” value=”transparent”>
</object>
All you have to do is change the “www.fakedomain.com/myname/audio/” to the actual location of your files. The code can then be copied and pasted into blog posts, web pages, etc.
To demonstrate, I uploaded an MP3 file to my PBWorks wiki page. I’ve got a couple of gigabytes of free storage there, which is plenty for the few MP3 files I plan to upload. The file is of some Scottish Piping that I recorded at the 2009 Highland Games at Furman this past summer. The code I used is as follows:
<script language=”JavaScript” src=”http://www.randomconnections.com/wp-content/plugins/audio-player/audio-player.js”></script>
<object type=”application/x-shockwave-flash” data=”http://www.randomconnections.com/wp-content/plugins/audio-player/player.swf” id=”audioplayer1″ height=”24″ width=”290″>
<param name=”movie” value=”http://www.randomconnections.com/wp-content/plugins/audio-player/player.swf”>
<param name=”FlashVars” value=”playerID=1&soundFile=http://randomconnections.pbworks.com/f/Scottish_Piping.MP3″>
<param name=”quality” value=”high”>
<param name=”menu” value=”false”>
<param name=”wmode” value=”transparent”>
</object>
This was embedded in the HTML code for this post so that the player shows up here:
If you click on the play button, you should hear the piping.
You can save the embed code as a .txt file and copy and paste it, changing it to match your MP3 file’s name and location.
As always I check to make sure that these methods will work with Google Earth placemarks, and this one does.
It’s not quite as easy as the Upload-Copy-Paste method that social networks and media sharing sites use, but it’s not too difficult. Next time it gets a bit harder. We look at embedding video.