Andy’s Home, Home on the Range

Fun with simple technologies

Andy March 19th, 2007

One of my most recent projects at home was to help my wife with the technical side of creating a “talking” literary map.

A normal literary map involves linking books to locations on a map. Most use images of the book cover or of the map location as reference points. My wife decided to have her students create a literary map of Washington DC. Her twist on the assignment was that she asked the students to not only submit an image for a pop-up window, but to have a voice recording of the students describing the point of interest.

The plan was for the students to prepare and record a script which would then be tied to map of the area.

The first challenge was to capture the audio. This was solved by allowing the students the option of recording themselves on their own computer or to call a free voicemail service to record their snippets. Only 1 of the 22 students recorded their own audio, with the rest relying on a K7 voice mail line.

As the tech person responsible for getting this project online, I had a few challenges to work out. Those being,
1) Clean up the K7 audio files to remove background noise but preserve the voice as much as possible. After trying several solutions, I was able to get some remarkable noise reduction from Soundtrack pro. It even beat out SoundSoap on this particular task. Several people on the Yahoo podcaters list suggested using the Levelator which I found to be the wrong hammer for this particular task.

I also got the best results on a 16 bit 44.1 aiff file than on the raw 8 bit wav file from k7. So step 1, was to convert all 21 wav files to aiff files using QuickTime Pro. Next was to open each file in SoundTrack Pro to clean the noise.

Once I got into a rhythm, I was able to take only about 3-4 minutes per file. The main reason being each file needed to be tweaked individually. Although the noise reduction was in the same 30-50 hz range, no 2 files had the same exact noise floor.

Once cleaned, the aiffs were converted to MP3 using iTunes with the same settings that I use for encoding all of our podcasts. I am quite pleased with the results. You can still hear that it’s a phone call, but it’s still listen able.

Ok, with, the most time consuming part completed, the rest of the map would come together quite nicely…and it really did.

I pulled a map of the appropriate area into Adobe Illustrator to add highlight boxes corresponding to the locations the students designated their books were referring to.

This map was then exported out of illustrator as a PNG file and then pulled into Photoshop to resize to fit an average sized monitor.

Once finished in Photoshop, the image was imported into the Shareware application YokMap to create the image map HTML to allow hyperlinking to the various locations.

YokMap was extremely easy to use and very straight forward. I was able to fairly quickly create all the “hot spots” on the image and save out the map information to an HTML file. Perfection.

The next task was to display an image the students supplied with their audio. One method would have been to create 22 individual files and link off to them. This would have take much longer than it would be worth.

I created a little perl script that would take in a single value and dynamically create an HTML file with the image and then play the audio file.

We mapped all the locations and assigned them numbers. I then renamed all the images to correspond to the location number and the MP3 were also renamed to match the locations ie 04.png and 04.mp3.

The last little part was to create a little javascript code to create the popup window and display the results of the perl script within that window. It took a little trial and error to get the window size and location right.

The final piece was to great a home page and drop the entire contents on our webserver.

The final results can be found at http://www.bazmakaz.com/lit_map_dc/

If you are interested in a copy of any or all of the code used, let me know, I’d be happy to share.

Although I was primary on the nitty gritty, Viv was equally busy gathering all the images, mapping them all to each location and creating the graphic on the splash page. All totaled, we spent around 9 hours time on this project.

Technologies used :

K7.net : Voice Mail
SoundTrack Pro : Noise Reduction
Adobe Illustrator and PhotoShop : Image Manipulation
YokMap : Image Map creation
Perl : Dynamic HTML creation
Javascript : Pop-up Window

and some good old Canadian Know-How!