Audio made easy in HotPotatoes with a Flash button

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! So Flash stays - we can't do without it.

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, like pausing, rewinding, choosing which sound file to play, see the Flash mp3 players overview.

Preparation

1: Download SwiffRec voice-to-Flash 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.

Making the recording

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

1. Adjust the Volume
2. 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.
3. Press "Record end"
4. "Test recording" will play what you recorded. If you don't like it, start again. If you feel it's OK,
5. 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).
6. 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 the one below will open in your browser. Give it a try!

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 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!

It's great for a number of and short recordings. If you want a longer recording, for instance 3+ minutes, I'd suggest you use a flash mp3 player + mp3 file. The issue with the swf containing sound (and/or video) is that the browser loads the whole file before playing it. So, if you have a longish recording in the flash button, that'll take some time to load and play. Additionally, the users have no control of the recording and if they want to hear a part of it, they'll have to play and listen to the whole recording again.

Yet, if space in your page design is important and if you want a button to play longer mp3 audio recordings with more user-control functionality, you can still achive that with the 'musicplayer button" or the 'hbs_mp3_player2but_noslider' from the Overview of Flash mp3 Players.

Enjoy! And come back for more tutorials:

• Flash mp3 players
• Flash video
• Audio Glosses
• Audio Crossword