The Internet TESL Journal

How to Build a Multimedia Website for Language Study

Randall S. Davis
Randall's ESL Cyber Listening Lab (American Fork, Utah, USA)
randall [at] esl-lab.com
This article discusses the basic steps in developing an effective educational multimedia website for language study.

Introduction

This article will detail how teachers, administrators, and materials developers can prepare materials similar to that found on the author's Randall's ESL Cyber Listening Lab (www.esl-lab.com), a multimedia website designed to help ESOL students improve their English listening comprehension skills. The specific focus of this article is on the development of basic educational websites where the creators will be working with limited financial and technical resources. The actual implementation of these steps will vary depending on the nature and scope of the site.

Step One: Survey Existing Websites

First, conduct a detailed search of the Internet for websites that are trying to provide similar materials and accomplish the same tasks you have in mind. This will give you an idea of what is available online and help you to further develop your ideas.

Find out what has and has not been done in your area of interest by using search engines, reviewing collections of ESL/EFL links, participating in related mailing lists, joining a computer group, and attending conferences (see reference section). Also, conduct your own survey with students and teachers to identify their interests and needs. If you find a site with a similar concept, identify how it meets a particular objective in that subject and what areas could be addressed a different way.

Step Two: Deciding on the Purpose and Objectives of the Site

Next, try to develop your ideas into a specific niche in one area instead of trying to cover too much. By doing so, you can prepare material that focuses on depth, not breadth, in content. Do not spread your work and energy too thin; find a specific area that has not been explored and build a site around that one theme. Use your background to create, not replicate, something that has already been done. Do something new.

Content is the most important thing for a good site, and no amount of graphic artistry or technology will take the place of poor content. Kelly (2000) provides useful pointers on techniques to balance substance, functionality, and design. Also, just because something can be done with technology does not necessarily mean it should be done or that it will suit the needs of learners. Simple tools and design usually will do the job.

Step Three: Determining Limitations and Users' Reactions to Technology

A good understanding of what can and cannot be accomplished online and clear objectives are needed if you want to contribute to online language learning. Two particular concerns deal with (a) the technology itself for creating web-based multimedia, and (b) the users' understanding and reaction to it.

Limitations

An early challenge was the technical difficulty of producing sound and video files that did not overburden limited computer and telecommunication resources. In the past, Internet users' only choice for audio files on the Internet were formats that could be 10 MB in size for every minute of stereo sound. To download and then play such a file required a great deal of time, and often your computer system would crash or freeze in the process.

Newer technologies emerged in the mid-1990s, including the development of streaming audio and video. The first RealPlayer was introduced by RealNetworks in 1995. Now, audio and video encoded in a variety of formats can be played as these files download, allowing for almost immediate playback. Also, SMIL, or synchronized multimedia integrated language, allows web designers to combine a multisensorial array of media including video, text, and background music into one online multimedia presentation.

Webpage authors often create sites and multimedia content primarily for these high-speed connections, without realizing that many users working on slower computers and Internet connections cannot view them. You must identify your audience:

Your potential visitors will influence how you create your online media.

Users' Reactions to Technology

Imagine that you have considered the technical questions above. How familiar are your users with computers and the Internet? Unfortunately, we often underestimate the complexity and limitations learners and teachers encounter in using computers, particularly in studying a foreign language (LeLoup & Ponterio, 1995; Warschauer & Whittaker, 1997). Thus, our efforts can be negated when navigating the technology overshadows and consumes actual learning time. Remember that users often will be struggling with the target language in addition to computer-related issues, thus producing anxiety to figure out how your site works. Websites need to be intuitive to help students benefit from the technology.

You should also consider these questions:

Considering such questions will help you create a useful and user friendly place to visit.

Whatever technologies are used, the resulting content should be simple to maintain and update as the needs of users change and as the technology to create such pages evolves over time. Using technology can have a positive impact on the language learning process, but you need to keep your audience in mind.

Step Four: Securing the Right Equipment

Having the right equipment and software in the beginning to prepare your media will save you headaches later on because it is difficult to rescue poorly recorded sound files. There are several possible scenarios for capturing audio to your computer (from audio cassettes, CDs, mini-disks, portable mp3 devices, etc.), but my focus is on recording audio directly to your computer.

Sound Cards

Basic audio can be recorded on almost any computer. Some come with a built-in integrated chipset for handling sound or hardware (sound card) attached to the computer's motherboard. Basically, a sound card allows computers to input and output audio signals through speakers, microphones, and headphones. Unless you have high-end professional needs, your standard sound card in your computer might do. Look for a card that also provides line-in capabilities for a cassette player if by chance you are planning on capturing previously recording material from this source.

Microphones

There are variety of mics (e.g., handheld, headset, built-in, lavalier, shotgun) with different directional pick ups (omnidirectional and unidirectional). Omnidirectional mics pick up sound from every direction and can be good for group discussions or recordings with more that one speaker; unidirectional microphones respond to sound from the direction in which it is pointed, and it is better for interviews or talks with one speaker. Also, you might want to consider a pop screen to put between the speaker and the microphone to minimize cracks and aspirated pops produced during your recordings.

Speakers

Be sure to test your media on several output devices, and then test it again. Just because your file sounds great on a pair of external computer speakers is no indication of how it will sound on headphones, a computer internal speaker, portable CD speakers, and perhaps a classroom audio system. Again, try to provide the best quality for the largest possible audience of visitors.

Audio and Video Cables

Many people who buy quality microphones and video cameras use the cables that came with the equipment. Buying a set of quality cables is a good investment. Quality cables are designed to minimize the loss of signal from one component to another and dampen interference either from other outside electronic devices or vibrations produced by other equipment. Select cables that have good end connectors and are well-shielded (insulated). Also, remember that the less distance the signal travels the better. Choose the shortest cables possbile.

Step Five: Preparing the Content

Now, you need source material on which to base your recordings. You can either secure the rights to use existing materials, or you can develop you own.

Because of the time involved in writing original transcripts, many lean toward using previously-published for their recordings. You must keep in mind, however, that this material is usually copyrighted, and permission should be sought to use it, whether it be for personal, non-profit (e.g., educational), or commercial purposes. This is often true even if you do not see a copyright notice, and its absense does not give people free license to use it anyway they like. This could be true of any original work, be it an article, song, poem, or even perhaps some scribbling on the bathroom wall.

In addition, previously-published material may or may not have been specifically designed for language-learning purposes, and thus, might not be the most suitable content for your recordings. To avoid these issues, you might consider writing your own listening materials from the ground up, customizing them with English learners in mind, and at the same time, guaranteeing that the resulting content is yours to develop, customize, and promote as such.

For my website, I decided to create materials that would help learners develop their listening comprehension skills with focus on high-frequency, functional language topics. Key elements have been to:

  1. try to prepare natural conversations without the contrived feel of a scripted recordings;
  2. include a representative selection of North American voices from different gender and age groups (most publishers choose not to include children in their materials);
  3. develop pre-listening, listening, and post-listening activities to help students prepare to hear and then recycle the vocabulary and topics as part of one listening activity.

Step Six: Recording and Editing Media Files

Next, you need to record your audio files, and there are a number of programs for Windows and Macintosh platforms that will allow you to accomplish this in various formats. Key features you should look for include:It is a good idea to add the name of the clip and a copyright notice to the clip information which is shown as the RealMedia file plays.

I am currently using SoundForge (Sonic Foundry) which came packaged with my sound card, and it is a reasonably-priced program for PC users. CoolEdit 2000 (Syntrillium) is another affordable option for the home-consumer market. Both of these programs allow you to encode directly to various media formats. Mac users can try SoundRecorder, SndSampler, or SoundEdit.

Yet, even if you have the right software, you need to know how to use it properly. There are some key ingredients in creating quality recordings, and the RealSystem Production Guide (2000) gives suggestions on how to accomplish this.

Step Seven: Encoding the Media Files for the Internet

Once you have recorded and edited your source audio, you are ready to encode it for the Internet. Basically, the encoding process reduces the size of the files. There are a number of technologies and audio formats for encoding media for the Internet, and RealNetworks.com is one of the leading presences for creating web-based media content. The rest of my discussion in this paper will focus on working with media type.

As mentioned earlier, the early challenge with media on the Internet was file size, resulting in very long download times. RealAudio/Video technology compresses the files by throwing out what it considers non-essential information, particularly segments of audio at very high and low frequencies that you generally cannot hear anyway (RealSystem Production Guide, 2000).

Even if the files are small, problems with unreliable and slow internet connections have to be considered carefully. Too often, media files are created and then tested on high-speed Internet connections without thinking how they will playback on slower modems. Also, remember that just because your potential audience has a 56 Kbps (kilobytes per second) modem does not mean that the actual data will transfer at 56 Kpbs. Sometimes, the RealPlayer may stall or stop playing due to "packet loss" (i.e., the data, being sent in packets, is unsuccessful in traveling between the remote server and your player), or the audio data is being buffered or collected in the player before it starts. This congestion can be due to a number of factors, some which are beyond your control:

Keeping this in mind, you can use one of many codecs (compression-decompression settings) which are a part of some recording/editing software to create the media files for different connection speeds. The quality of the resulting sound depends on the codec used, from AM radio broadcast to near CD playback.

Codecs create media files for a particular bandwidth or data transfer rate. For example, a RealAudio clip encoded with a 16 Kbps codec uses 16 Kbps of bandwidth as it plays; a file prepared with a 96 Kbps codec (for LAN users) would play using 96 Kbps of bandwidth. With this in mind, ask yourself these questions:

Now, some of the recording software mentioned above has the ability to encode your source files directly into RealMedia format using various codecs. You can also use production tools from RealNetworks including RealSystem Producer Plus (commercial) or RealSystem Producer Basic (free). Both can encode media files, but the Plus version has a variety of useful features: The first point is particularly important because many visitors using older computers cannot upgrade to newer players even if they wanted to, and the basic version of the Producer will only encode for newer versions of the RealPlayer. Fortunately, other products like SoundForge will gives you the choice of encoding for older players. My final advice on the RealProducer is to stick with the basic version unless you need the extra benefits above.

Because many of my visitors are on extremely slow Internet connections, I encode my files using a range of codes from 6.5 Kbps to 20 Kbps. Thus, let us say a visitor is accessing my site with a 28 Kbps modem, and I have encoded the media file at 16 Kpbs: part of it is dedicated to decoding (playing) the media file, leaving 12 Kbps or so of bandwidth for users to surf between pages or compensate for a poor connection. Of course, there is a tradeoff between size and sound quality. Files created using codecs for slower connection speeds tend to sound muffled rather than bright and crisp with higher codecs, but users would rather have something than nothing at all.

Test various sound files yourself at my audio test page (http://www.esl-lab.com/audiotest.htm) to hear the difference in quality and playback time. The original source file was recorded in stereo at a sampling rate of 44,100 kHz, 16 bit (near CD quality), and it was then encoded using three different codecs in RealMedia format.

Step Eight: Making the Media Available to Users Online

Hosting Your Files

The next step is to find a server. If you do not have access to a university or corporate server where you can upload your files, you will have to use a company to host, or store your files online.

A hosting company gives you space on their servers so Internet users can access your site, and you have two basic options: a shared or virtual server, or a dedicated server. With a virtual server, you are actually sharing one server with up to 250 other web sites. By sharing the computer's resources with others, the company can offer this service at a lower price to everyone, but your site may be affected along with other sites on that server if some of them are heavily accessed.

You could also use a dedicated server, that is, one site on one server. This gives you complete control over the operations of your site, but it can be expensive. If you are working with a large number of media files and you anticipate a lot of traffic, you might have to move to a dedicated server.

Two final notes: Companies that advertise unlimited bandwidth (translated into unlimited traffic) may have a clause in fine print stating that you can have it, but for a price (once you exceed so much traffic, then you have to pay more). Unlimited bandwidth does not necessarily mean it will be free. My suggestion is to begin with a shared server which suits almost anyone's needs. They are free or inexpensive, and will give you the needed experience if you decide to expand later on.

Choosing Your Delivery Format

Now that you have created your RealMedia files, there are two basic methods for streaming them on the Internet: RealTime Streaming Protocol (RTSP) and Hypertext Transfer Protocol (HTTP), which most Web servers use to transfer and display graphics, text, and other media files.

RealNetworks (2000) sums up the basic differences between the two protocols:

"Designed specifically for streaming, RTSP enables RealServer to adjust streaming data to keep clips playing smoothly. When two clips play side-by-side, for example, RealPlayer communicates with RealServer about each clip's progress, indicating how much data it needs to keep playback synchronized. RealServer can then adjust the data flow to compensate for hanging network conditions, reducing low priority data if necessary to ensure that crucial data gets through. Communication like this is not possible through HTTP.

Web servers use HTTP to deliver Web pages and graphics. HTTP is designed to download small files quickly and efficiently. It is not suited for streaming large media clips, though. RTSP, which stands for 'RealTime Streaming Protocol,' is an industry-standard protocol that overcomes the deficiencies of HTTP for streaming media. RTSP enables RealServer and RealPlayer to stream long clips and compensate for changing network conditions."

So what does this mean for you? The above seem to discourage HTTP streaming, but you should realize that RealNetworks is targeting companies with high-end needs. Unless your hosting company provides free use of a RealServer, I would suggest the ease of HTTP streaming. It does not require any special server software to run, it is easy to use and understand, and it works well with many sites. Furthermore, using lower codecs for smaller (and faster) loading files tends to compensate somewhat for possible problems with Internet congestion.

Now, there are two ways of making the media files available on your site using HTTP streaming:

  1. link your RealMedia file (.rm) directly to html page like other graphics and audio files (two files);
  2. link your RealMedia file (.rm) to the html page with a .ram metafile, or reference file (three files).
The first method is actually not streaming at all, but rathers allows the user to download the file and then play it. It is, however, a simple method of delivering some clips. The html code in your document would look like this:
<HTML><HEAD>><TITLE>My Home Page</TITLE></HEAD><BODY>

<A HREF="test.rm">Download the RealAudio file</A>, then listen to it.

</BODY></HTML>

All you do then is upload your media files (.ra, or .rm) in binary code to your server using FTP (file transfer protocol) software. Many hosting companies also provide a way to upload your files directly from your web browser. When a visitor clicks on the link, the audio file will first download completely and then play.

The second method uses audio streaming technology and requires a couple extra steps to implement. In this case, you create a metafile (a text file with the .ram extension) that links the html document to the actual media file. The metafile contains just one line of text of the URL, or webpage address, to the media file. It does not contain any html code; just the one line. That is it.

When you click on the link to the .ram file in your html document, the .ram file tells the RealPlayer the location of the RealMedia file. The audio begins to play once the audio file reaches the player. Here are the specific steps:

  1. Open a new text document in a word processing program or your html editor to create the metafile;
  2. Write the URL of the audio file on the first line of the document. The audio file may either have the .ra (older) or .rm extension to identify it as a media file. Thus, if the audio file is named "test.rm," and it is located in this directory ("http://www.yoursite.com/"), the complete path (URL) in the metafile would be "http://www.yoursite.com/test.rm" as seen below. Do not forget to include "http://".
    http://www.yoursite.com/test.rm
  3. Save your metafile as a text document using the .ram file extension. In this case, the metafile's name would be "test.ram"
  4. Reference your metafile as a hyperlink in your HTML document, and save the page (e.g., "test.html"). For example:
    <HTML><HEAD><TITLE>My Home Page</TITLE></HEAD><BODY>

    <A HREF="test.ram">Listen to the RealAudio file.</A>

    </BODY></HTML>

  5. Upload your .ram file (test.ram) and webpage (test.html) in text format, and the media files (test.rm) in binary code to your server.
It is also possible to offer the same RealMedia file both ways. This allows those with faster connections to immediately begin listening to a streamed file while also allowing those who have a connection too slow for streaming to use the file by downloading the file before listening to it.
<HTML><HEAD><TITLE>My Home Page</TITLE></HEAD><BODY>

The Audio File:
<A HREF="test.ram">Stream it and listen right away</A> or
<A HREF="test.rm">download it, then listen.</A>

</BODY></HTML>

Step Nine: Playing the Media Files

Visitors have several options for playing your media files. RealNetworks offers a basic, free player and a commercial one with slightly-enhanced player controls and access to online media programming. Another option for listening to online media files and recording your own voice is the Divace Interactive Audio Video Recorder, a commercial product by Divace Learning Solutions. Another company, Enounce (http://www.enounce.com/), has created a 2xAV Plug-in for RealPlayer. It is a commercial add-on that allows users to control the playback speed of the media files. This may benefit learners who would like to slowdown the speed of the audio.

If you (also) offer your files as downloadable files, Windows Media Audio (WMA), MP3, and RealMedia can be uploaded and played on a portable player. This way, users can review the audio away from the computer.

Step Ten: Troubleshooting Playback Problems

Even after you have created your media and have uploaded it to the Internet, there are times when things just do not seem to work as you expected, or they work for you, but not for your visitors. Based on my experience, there are a number of common problems visitors encounter when trying to play media. You can also consult the RealForum (http://realforum.real.com/c/s.dll/realforum/wwwthreads.pl) where you can ask questions and share experiences with others. Here are some commonly asked questions and answers:
  1. "I see a message popup on the screen when I try to play RealMedia files, asking me if I want to save or open the file. What does this mean?
    The most probable cause is that you do not have the RealPlayer installed, and your computer is telling you that it cannot identify the file type ou are trying to play. Therefore, it gives you the choice of saving or opening it. Go to real.com and download the RealPlayer. You will not see that message again after you install the RealPlayer.
  2. "When I tried to play the audio files on a website, I get this message: 'Cannot connect to server, the link you requested may be inaccurate or out of date.'"
    There are two possible reasons: (a) the audio files exist, but they are not correctly linked to the webpage, or (b) the files no longer exist or have been moved. Both problems have to be fixed by the webmaster of that site. The older RealPlayer 5.0 identifies this as an Error #23.
  3. "After I click on a play button or link to start the audio, the RealPlayer opens, but nothing seems to happen. I see the word 'Connecting . . .' and then 'Buffering' at the bottom of the RealPlayer window, but I'm not sure what is happening.."
    As mentioned in this article, the audio file must be transferred from the remote server (where it is located) to the user's RealPlayer, and the word "Connecting" indicates that the Player is trying to connect to the server and find the file. Once located, the process of buffering, or downloading and storing the data temporarily in the player, occurs before the audio plays. This initial buffering can last anywhere from a few seconds to minutes. You can configure your RealPlayer to buffer the entire clip or a portion of it, and by doing so, you can minimize the problems with the audio stalling during playback.
    1. Start the RealPlayer;
    2. Open the View menu and then choose Preferences;
    3. Click the Connection tab;
    4. In the Buffered play section; click "Buffer at least _____ seconds before playing";
    5. Enter 0 in the Buffer at least box.
  4. "Where can I find an online manual on how to configure and use the RealPlayer?"
    You can find online manuals to versions 3.0+ of the Real Player at: http://service.real.com/help/library/players.html.
  5. "Why do I receive the error message, 'Connection to the serve has timed out, you might be experiencing network problems'?"
    What is probably happening is that the amount of information you are trying to retrieve (the file size) is greater than the bandwidth of your Internet connection. Imagine that you have a bottle filled with water. The size of the opening represents the amount of bandwidth, or the amount of data that can be transferred over your connection. Dial-up (telephone) connections have limited bandwidth. Now, the water you have in the bottle represents the actual data you are trying to pass through the opening. Since the opening is only so big, only so much water will pass through not matter how much pressure is applied. The same is true with the Internet. If your connection cannot handle the large file, you will receive the time-out error message.

    Another problem could be that you are trying to listen to the audio files behind a company or school firewall, which is used to control access to the network. Fortunately, RealPlayer can still work in many cases through firewalls if you adjust some of the settings in the Preferences menu. Take a look at http://service.real.com/firewall/ for more information.

  6. "How can I save RealMedia clips (audio and/or video) to my computer so I can listen to them later offline?"
    Content providers can determine whether they want visitors to be able to download and save media files for offline use. Many websites prevent downloads to protect the distribution and use of their copyright material. If the site links the media files directly to the Web page, instead of using the .ram file, then you can download it. Thus, if the audio file ends in the .rm or .ra extension (e.g., http://www.website.com/test.rm), then you can download it following these steps:
    1. Right-click the the link to the audio file on the webpage;
    2. Select "Save Link As" (Netscape) or "Save Target As" (Explorer);
    3. Choose the location where you want to save the file and click Save.
  7. "Where can I find an older version of the RealPlayer?"
    In some cases, users find that a previous version of the RealPlayer works best with their older computers. You can download these from the Real Archive at http://proforma.real.com/real/player/blackjack.html.

Step Eleven: Evaluating Your Work and Being Willing to Revise

Seeking comments from visitors and being willing to adapt, revise, or scrape ideas are key elements in developing an effective website. Do not expect to create everything just right the first or second time, and do not get too attached to every aspect of your original idea. Rather, encourage others to review your work and send you comments about your site. You can even prepare an online survey for visitors to respond about your materials. Such a survey is linked from my main page (http://www.esl-lab.com/survey/), and the results have helped me better target and customize my site.

In fact, one major benefit of working online is that educators can publish and then edit their materials quickly which is vital as their own teaching techniques and philosophy of education evolve over time and as the needs of their students change. With a traditional textbook, your ideas are set in stone until the next edition.

Conclusion

Perhaps the success of any website has to do more with the scope and goals of the project than the technology and financial resources invested in it. By finding and then developing a niche within the corridors of cyberspace, you can develop both depth and breadth to your ideas. I believe that practitioners have the greatest ability to have lasting impact on our profession, and I encourage them to develop their own web-based learning materials in the future.

References

All links were valid at the time this article went online (February 1, 2002)

Appendix

The Internet TESL Journal, Vol. VIII, No. 2, February 2002
http://iteslj.org/
http://iteslj.org/Techniques/Davis-MultimediaSite/