HotPotatoes Tutorials and How-to's

You are here: Home » Tutorials » for HotPotatoes » Flash Audio

Audio made easy in HotPotatoes with a Flash button

Posted by Stan Bogdanov on 07 June 2007 - 12:13
Last updated 07 September 2009 - 22:46

Background

There's been plenty of discussion about how to make exercises so that our students do some listening. And there are plethora of Flash mp3 players to choose; each of them requires a different skill level to get it working. And you need to create your .mp3 files. You should start worrying about the bitrates, the browsers, the platforms... Then, you sweat it out until you play the mp3 file in your player...

OK, what we end up with is at least three files: the .htm exercise, the swf mp3flash player, the mp3 file itself. Can we not get rid of one of these?

Here's more, let me quote one of the authors of HotPotatoes [Tue, 21 Mar 2006 11:33:08]:

"…We're also revisiting the Insert Object tag code, and finding:
1. We can get Flash working everywhere, without bad XHTML.
2. We can get Quicktime working everywhere except IE without bad XHTML.
3. WMP only works on IE anyway, so that's easy.
4. RealPlayer we haven't looked at yet."

Flash working everywhere! Without bad XHTML!
Flash stays - we can't do without it. The exercise .htm, NO!
Let's get rid of the .mp3 file, elegantly. Well, actually we're not really getting rid of it, but putting it into a Flash button, like this one. Here's how to do that.

Before you go on:

If you want a player in which the user has more control of, like pausing, rewinding, choosing which sound file to play, see the Flash mp3 players overview.

Preparation

1: Download SwiffRec voice-to-Flash outlink from Snappfiles.com (since the developer's site no longer has the program for download) and install it.

2: Make sure you can record from your microphone. Or be ready to drag-n-drop a WAV file. Related article: How to enable your microphone to record (coming soon).

Making the recording

How to record? You simply follow the arrows. How does it work? Do you really need to know?
SwiffRec. UI

Adjust the Volume
Press "Record start" and say your lines (the software records your voice into a .wav file).
Note: You'll need to speak a little louder than you naturally do; and make sure there are no background noises – the mike will pick these.
Press "Record end"
"Test recording" will play what you recorded. If you don’t like it, start again. If you feel it’s OK, …
Press "Create SWF" (this will encode the .wav into an .mp3 and will inject it into a flash button, and it’s all done in the background, you see nothing of that).
Skip "Preview SWF and go to "Open output folder". When pressed, this button will open the directory where the output files are generated, usually: C:\Program Files\SwiffRec\data

If you press the "Preview SWF" button, a web page with a Play button (like this - give it a try) will open in your browser. You can embed this Flash animation in any web page by adding a few lines of code. However, the code generated by SwiffRec is old and is not XHTML compliant because it has the unsupported "embed" tag (although you can see a lot of it on the Web). It is also very long and therefore prone to errors.

I used the "Flash Satay" method to cut out and clean up the SwiffRec code to get the valid XHTML-compliant code and managed to reduce it to 3 lines only. The method is explained in detail by Drew McLellan in an article in the A List Apart Magazine (ISSN: 1534-0295)

When you press the "Open output folder" button, you see some files in a directory called data, usually C:\Program Files\SwiffRec\data . The important file is flashMP3.swf !

At this point, I'll have you know that whenever you make a recording and create a SWF file, the NEW flashMP3.swf overwrites the OLD flashMP3.swf, thus your previous recording is lost! So, make sure you copy this file, rename it, and/or put it aside before making a new recording.

The valid code

The xHTML1.1 valid code you will want to you use looks like this. Sure, you will change the 'flashMP3.swf' with the name you gave to your file and adjust the width and height to your liking.

<object type="application/x-shockwave-flash"
 data="flashMP3.swf" width="13"  height="13">
 <param name="movie" value="flashMP3.swf" />
</object>

Tips from experience

Mind that!

Don't be tempted to just copy-paste the code above. Or if you do, make sure it has no carriage returns. When you put the code into a JMatch exercise, or another one where the flash button code is placed in the Javascript code, mind that it must run as a single line! Otherwise the Javascript code of the exercise in which it is inserted gets broken and you see nothing! And don't complain I have not warned you because I do now!