Using Streaming MP3 for Web Page Narration

Use Internet Explorer 5 or higher to view embedded Windows Media Video tutorials linked from this page.

This tutorial will provide you with instruction about how to record, convert and embed streaming MP3 audio narration in a Web page.


1. Create a New Web Page.
In the page, put a screenshot, graphic and/or some text to go with your narration.

 

2. Record an Audio File& Convert to MP3

a. Launch Sound Recorder.

b. Prepare Sound Recorder to record sound at 44.100kHz, 16 bit, Mono. (Here's how.)

c. Practice recording and playing back your voice.
You should adjust your microphone volume settings until you have a good range of motion in the volume meter, as you see in the animation to the right.

d. Once you have adjusted your volume settings, delete any test audio you've recorded. To do that, move the position slider all the way to the left. From the 'Edit' menu, select 'Delete after current position'. You should now be able to record onto a "blank slate".

e. To begin recording, click the Record button. Speak the narrative text for your Web page. When finished, click the stop button.

f. When you are satisfied that the narration quality is good enough, convert it to MP3 format at 24kBits/sec, 22,050 Hz, Mono. (Here's how. In this video, I talk about a PPT file. Just pretend I'm talking about the Web page you created in step 1 instead of a PPT file. Also, I talk about recording MP3s for five different slides. Instead, just pretend I'm talking about five Web pages. The recording process is the same.) (Note: If you don't have the MPEG Layer 3 codec available in Sound Recorder, you'll have to install the latest version of Windows Media Player. Sorry about that.)

g. Upload your mp3 file(s) to your student account.

 

3. Create a M3U Metafile for Each MP3 File You Recorded

What's a metafile, and why do I need one?

A metafile sets up streaming for your media file. If you were to provide a link directly from your Web page to your media file, when a user clicked the link, the media would download in its entirety before it started to play. That's the way the Web and Web browsers were designed to work in the first place.

Since you want your media to start playing before the entire file has downloaded, you don't link directly to the media file. Rather, you link to it indirectly through a metafile. A metafile is just a text file that contains the full URL of the media file that you want to stream. Follow the instructions below to create a metafile for each of your MP3 files.

a. Launch Notepad (as can be seen in the graphic below).

 

b. In Notepad, type the full URL for your first MP3 file that you have already uploaded to your student account. For example, if I had uploaded my first MP3 file into a folder named "narration" in my student account, I would type the following into Notepad.

If I were a CTER 3 student with a LRS account:


If I were a CTER 4 student with a College of Education account:

 

c. Save the Notepad metafile as slide01.m3u in the same folder with your PowerPoint.

 

d. Repeat this process if you have more than 1 MP3 file.
(Quick Tip Demo)

 

 

4. Embed Your M3U Metafile(s) in Your Web Page, or Link to Them

 

Follow these instructions.

 

Listen to my MP3.

 

Here is the code I used to create the link to the M3U that you see to the left.

 

 
And here's the code I used to embed control panel that you see to the left.