Bandwidth is a measure of the amount of data that can be sent through a communication pipeline each second. Bandwidth values can be slow connections like phone lines which transfer data at a maximum rate of 58.6 kilobits per second, or fast like high-speed cable connections that can transfer data at several megabytes per second (a megabyte is 1024 kilobits) or faster. If you are only transferring text, it really does not matter, but if you want to transfer large sound or video files, the time involved for a slower connection is very large.
So one of the main goals in creating media clips is to make them small enough to allow users to view them, but not to sacrifice the quality of the clip.
Multimedia can be added to the web in two different ways, as either external media or as inline media.
"External media" means that the file is accessed through a link. This also means that the user has a choice of retrieving the media clip or not. With "inline media", a clip is placed in the web page similarly to an inline image. The user will have to wait for at least a part of the the clip to be retrieved by the browser.
If you are going to be working with sound clips it is necessary to understand some of the issues that are involved in converting a sound we hear in analog to a digital form that can be stored in sound files.
Every sound is composed of two parts; the amplitude, which is the height of the sound wave, and the frequency, which is the speed at which the crests and troughs of the sound wave move. Frequency is related to the pitch of the sound; higher frequencies mean higher pitches. The term wavelength refers to the distance between consecutive crests of the wave.
A sound wave is a continuously varying signal. In order to store that information in a sound file it has to be broken up into discrete (separate) pieces of information. A digital recording takes measurements of the sound's amplitude at discrete moments in time. Each of these measurements is called a sample and the number of samples taken per second is called the sampling rate. Sampling rate is measured in kilohertz(KHz). The most common sampling rates are 11 Khz, 22 Khz, and 44 Khz. A higher sampling rate means more samples taken each second which gives a digital recording that is closer to the analog sound. But a larger sampling rate also means a larger file.
sample resolution indicates the precision in measuring the sound in each sample. There are 3 common sample resolutions used: 8 bit, 16 bit and 32 bit. Again, increasing the sample resolution makes a digital sound that is more representative of the original analog sound, but also creates a larger file. 16 bit is a middle of the road resolution that is a decent balance between sound quality and file size.
The last thing we'll talk about in audio is the number of channels to use. Normally the choice is between stereo and mono sound, although in some instances you may want more channels. Stereo is a richer sound than mono, but the file size is approximately twice as large.
|
Sampling rate and resolution |
Sound quality |
|---|---|
|
8 Khz, 8 bit, mono |
Telephone |
|
22KHz,16 bit, stereo |
Radio |
|
44KHz, 16 bit, stereo |
CD |
|
44Khz, 16-bit, stereo |
Digital Audio Tape (DAT) |
In order to create a sound file on your computer, you need a sound card, speakers, microphone and sound editing software.
Sound File Formats
There are several different sound formats used on the web.
|
Format |
Description |
|---|---|
|
AIFF/AIFC |
Audio Interchange File Format. Usually these have an extension of .aiff or .aif These were developed by Apple for the Macintosh. They can be mono or stereo and 8 or 16 bit |
|
AU |
Also called mlaw. Usually have an extension of .au. This is one of the oldest sound formats and is primarily used on unix workstations. These have an 8 bit sample resolution with an 8KHz sampling rate and are mono |
|
MIDI |
Musical Instrument Digital Interface. MIDI files cannot be used for for general sound recording like most other formats, but are limited to synthesizers and music files. MIDI represents sound by recording each note's pitch, length and volume. They tend to be much smaller than other formats. |
|
MPEG |
Moving Picture Experts Group. Usually used for video although it can also be used for audio. These files are usually small due to the file compression algorithm. |
|
RealAudio |
These files are designed for real-time playing over many different bandwidth connections. They are smaller than AU or WAV files but the sound quality is not as good. |
|
SND |
Used primarily on the Macintosh OS for creating system sounds. Not widely supported on the web. |
|
WAV |
Developed for the Windows, OS is one of the most common formats on the web. They can be recorded in 8 or 16 bit sample resolutions, stereo or mono, and under a wide range of sampling rates. Usually they have .wav as the file extension. |
WAV is one of the most common sound formats on the web and support for it is built into the Windows OS. If your users are primarily Macintosh users you should consider using AIFF or SND and if they are UNIX workstation users you should consider the AU format.
The MP3 format is probably the most common sound file format on the web today. One of the reasons for this is that it can greatly compress the size of a sound file so that more songs can fit in a smaller space (like your Ipod). Remember that copyrighted material should not be posted or downloaded from the web without the permission of the artist or owner.
Streaming vs Non-streaming
Non-streaming media must be completely downloaded before the user can play it. This could mean length delays if the file was very large. Streaming media are processed in a continuous and steady stream as they are downloaded by the browser. This is why streaming video is ideal for news and sporting events. RealAudio was the first to introduce streaming media.
MIDI (Musical Instrument Digital Interface) is another popular sound format. It is a standard for synthesizers and sound cards. This format converts an analog sound into a digital signal by describing the pitch, length and volume of each note. Since this is a widely supported format, sounds can be created on one computer and played or edited on another. (You need sound editing software to edit a MIDI file.) This allows you to add sound effects or create new sounds. MIDI files are much smaller than many of the other formats, with a composition that is several minutes long taking up only about 20 kb. However,this format cannot be used for general sounds like speech, only for instrumental music.
Linking to an audio clip
You can link to an audio clip the same way you would link to another web page:
<a href="filename.ext"> Link content that is visible </a>
What happens when you click on link to a media clip depends upon your system and how your browser has been configured. When your browser sees a link to an external file it checks to see if a program is installed on your computer that can open the file. These kinds of programs are called "helper applications" because they help the browser interpret and present files. In the latest versions of many browsers you may be able to play a sound clip from within the browser itself. If the browser cannot find an appropriate helper application, it may prompt you to download a player from the web.
Embedding an audio clip
Embedded objects are objects that are placed directly into a web page, and a sound file is just one example of an embedded object. To use these, the browser must have access to the appropriate plug-in applications. These are programs that enable browsers to work with embedded objects. When a browser finds an embedded object it loads the appropriate plug-in and the controls needed to manipulate the object.
One drawback to plug-ins is that they require the user to download and install additional software before viewing a particular page. Many users will choose not to view a page rather than doing this.
There are two different elements that you can use to embed a media clip; embed or object. Embed is supported by almost all browsers, object is the element recommended by W3C, but is not well supported in many browsers. Again, always test your pages in several different browsers to see how they display.
To embed a lip, you need:
<embed src="guitar.mp3" width="value" height="value" autostart="type" />
where "url" is the url of the object, "width" and "height" are the width and height of the element in pixels and the "autostart" value says whether the browser should automatically start the media clip ("true") or let the user do it ("false").
For instance:
<embed src="guitar.mp3" width="100" height="50" autostart="true" />
Displaying video is one of the most popular and fun uses of the web. The biggest problem with video is the size of the files: a short video, 30 seconds or so long may be a large as 10 megabytes. You can record video from your computer, the tv, digital cameras or camcorders. Creating a video clip can be very time consuming and go beyond the scope of this course, but we will talk a little bit about them.
A video file is actually made up of a series of single images which are called frames. When a video is played, the frames are shown rapidly in sequence which gives the illusion of movement. (You can do the same thing with a sheaf of papers with pictures drawn in sequence: when you flip quickly through the pages the drawn figures seem to move.) The number of frames that are displayed in a given amount of time is called the frame rate. The most common measurement is in frames per second (fps). By reducing the frame rate you can reduce the size of a file because you have fewer frames to display. A VHS tape is about 30 fps, which would make quite a large file. You might choose to use 15 fps which would not change the time of the clip, but the file would be smaller.
You could also compress each frame in the video, and then decompress it as the video is played. You would do this using a codec (compression/decompression) program. There are a number of these available, but not all off the same quality. They may make your file considerably smaller, but the playback is choppy. If you do this, you need to experiment with several different codecs and find the one that gives you the smallest size with the best video quality.
Another thing you can do is reduce the size of the frames. The standard size is 160 pixels wide by 120 pixels high. You can also reduce the number of colors in the color palette, and if your video has sound you can reduce the sampling rate, resolution or the number of channels used to reduce the size of the file.
Most video editing software has all of these options available. Be sure to try different combinations and play the results on different computers to see how the quality is affected.
Video File Formats
There are several different video formats used on the web.
|
Format |
Extensions |
Type |
Description |
|
AVI |
.avi |
nonstreaming |
audio/video interleaved. This is a common file format developed by Microsoft. Video quality is very good a smaller resolutions, but files are large. Most media players and plug-ins can play .avi files |
|
MPEG |
.mpg, .mpeg, mp3 |
Nonstreaming |
Moving Pictures Group. The mpeg format allows for high compression of video files which means a smaller size. MPEG has become a standard for video and audio file transfer on the web. MPEG-2 is the resolution used for digital tv and dvds. |
|
Quicktime |
.mov |
Streaming |
Developed by Apple for windows and Apple computers. Uses a high compression algorithm, but to view files you need to download a and install the plug-in from Apple. |
|
RealVideo |
.rm, .ram |
Streaming |
Developed by RealNetworks for transmitting live video over the web at both low and high bandwidths and requires the RealPlayer media player |
|
Windows media |
.wmv |
Streaming |
Developed by Microsoft, these files offer good compression and quality and are often small than other streaming video formats. |
Linking to a video clip
You can link to an video clip the same way you would link to another web page:
<a href="file.ext"> File name (size and type) </a>
It is a good idea to let the user know what kind of file it is and the size so they know if they have to download software or a plug-in, or if they have the time to download or view the file.
You can also embed a video clip by using the same embed element as is used for audio.
Older browsers do not support embedded objects. If you think you will have users who have older browsers you can add the noembed element. It works like the noframe element:
<embed attributes />
When linking to multimedia, provide a variety of media formats to ensure that all users can access them.
Include the file size in links so that users with dial-up know how large the file is.
Do not embed clips in your pages unless you are certain users will have a high bandwidth connection.
Do not insert media clips without giving users a method to turn them off, or if you play something automatically, do it only once.