Multimedia | Computer Sound – Audio | Video | Augmented Reality

Multimedia and the Web

Image yourself souring on a hawk’s wing past the Eiffel Tower, the Grand Canyon, or the pyramids of Egypt, hearing the wind rush by as you take in the panoramic view. Picture a baby’s face changing smoothly into that of a 5-year-old, then a teenager, and then a middle-aged adult—all in a matter of seconds. Consider the colors, sounds, and animation that add texture and realism to a favorite video game. These are all examples of Multimedia, with the power to capture the imagination and attention of the view. Solomon, Ana Weston, McGraw Hill Glencoe

wordleSelecting the right media for the intended message is important for effective web design. Multimedia can enhance a traditional static website by turning it into a media rich dynamic website. A primary ingredient of any successful Web page is well-placed video, audio and images. On the flip side, too much multimedia can distract your users from the web site's intended purpose or turn the visitor off to the web site altogether.

In the strictest sense of the word, multimedia means "more than one medium." In other words, television programs, movies, even illustrated books are all examples of multimedia—they all use combinations of text, images, sounds, and movement. In the real world, though, when most people talk about multimedia, they are talking about computer graphics, video games, on-screen presentations, and a whole world of other possibilities.

According to Jennifer Kyrrin ( Guide), The web sites that use multimedia the best are the ones that use it to solve a problem for their customers or are sites about a multimedia element (sound, video, or animation). Using gratuitous videos and sounds may get your readers' attention initially, but it quickly becomes overwhelming.

Suggestions for using multimedia on websites include:

Presentation on using audio and video in your multimedia projects
Click on the picture to read the presentation

Computer Sound – Audio

Mrs.RushThe use of sound on the Web is becoming increasingly more prevalent. Companies use sound to draw attention to their web site and market their products; developers search the Internet for sound files to use in their multimedia applications; educators deliver audio lectures in their online courses; musicians provide sample versions of their latest songs; and Web-based game developers use sound to enhance their entertaining sites.

The next time you play a multimedia video game, turn the sound volume on your computer all the way down. Is the game less realistic? Do you have less fun? If so, the game's developers have made effective use of audio.

Understanding How Sound Works

You should always be careful when you use sound on web pages. After intrusive advertising, sound that turns on automatically and cannot be turned off is one of the most annoying aspects of poorly designed web pages. If you don’t have a pressing need to use sound, then you probably shouldn’t. (J. Kymin,

Tips for Using Sound on Web Pages

Audio File Formats

headphones iconAn audio file's format determines what files a PC can open and play, how much space the file occupies on a disk, and how long it takes to travel over the Internet connection. Sound files can be saved in several file formats.

MP3 is a standard format for music files sent over the Internet. Use one of three MPEG standards for audio compression. MP3 creates small file size because of the high compression rate. It can compress an audio file to about 1/12th of the space it occupies on a CD with no significant loss of sound quality.

WAV was created by Microsoft & IBM as a standard for sound files on Windows PCs. Windows & MAC PCs use WAV files for many sound effects. WAV format does not compress audio as much as MP3 and other formats. Used for very short sound clips. Can be created with Sound Recorder

AU & SND formats were first used with UNIX computers before PCs were commonplace. Earliest formats used for exchanging sound files on the Internet.

MIDI is a method and format for recording music from synthesizers and other electronic instruments. Creating a MIDI file involves connecting an electronic instrument to a computer that has a sequencer, which can be either software or hardware for recording musical information from a MIDI performance. The computer than records information about each note played on the instrument. Not compatible with Flash.

AIFF (Audio Interchange File Format) and AIFFC (AIFF Compressed) Developed by Apple and used as a standard for Macintosh computers. Can be played on a Windows-based computer

RealAudio (.ra) A compression format developed by Real Networks that allows streaming of the sound file over the Web

Ogg (derived from ogging is jargon from the computer game Netrek). Ogg is a free, open container format maintained by the Foundation.

To overcome some of the issues associated with embedding audio files into webpages, the latest version of the HTML introduces the audio element. However, as not all browsers support all audio formats, it is a good idea to convert audio files to multiple formats.

audio format table


Once a sound as been digitized, it can easily be manipulated using a sound-editing program. As designers, we must always keep the file size mind. Every element that is added to a Web page, increase the download time. A sound file's size can be impacted by sampling rate, sample size, number of channels recorded, time span of recording and sound quality. High-quality audio is important in conveying a sense of realism in multimedia but make sure the tradeoff of high quality is worth the extra download time. There are a number of commercial and open source software available for creating and editing audio files.

Commercial Software:

Free or Open Source:

Assignment: Question for Thought 1

Directions: Describe current uses for audio on the web. (75-100 words). Place your essay in the textbox below. Do not attached a separate document and be sure to proofread before submitting.

Assignment: Music Mix

Directions: Your task is to create a mix of a minimum of 5 songs (more is okay) linked together on a common word. Excerpts from each song should stay around 10-15 seconds each; longer than 30 seconds is not permitted. Every attempt should be made to make the songs sound like they were meant to connect. Use of special effects is encouraged (fade in, fade out, echo). Audio volumes should be adjusted for fluidity. Download the full assignment from itsLearning.

Audacity Tutorial:

Exporting Audacity instructions:

Audacity ( make sure to also download the lame_enc.dll file to export MP3s


Video is widely used in today's web design. Video is one of the most powerful tools of visual communication. It is the technology of recording, processing, storing and transmitting a sequence of still images representing scenes in motion. Video can be recorded, transmitted and stored in various physical media and their quality depends on the method used.

Movie iconCreative and professional videos take a prominent position in web design. Video is a great way to create a dynamic website that attracts and keeps visitors. Smashing Magazine’s Sean Fioritto describes the future of video in Web design in his article, The Future Of Video In Web Design (Don’t worry about understanding the code. We’ll get into that next year in the Web Design class.).

Websites should not be a static experience. Designing a website does not mean you have to create a static experience for the visitor, after all it is not print. With the rise of HTML5 it is easier than ever before to add things like animation to create a richer user experience. These visual flourishes can often work to create a more interesting, immersive and remarkable experience if done properly. The same is also true of video, which HTML5 makes much easier to implement in a way that is accessible.

Video camera iconSome sites are making the most of large, browser-sized videos by using them as the background for their web page, which allows them to change the visual experience in new and creative ways. Some sites are using large background videos to subtly change the mood and atmosphere, while others are demonstrating their product in action or using it to tell a story that would not have been as easy or perhaps as fun as with a regular, static page. Alex Black, 15 superb websites with video backgrounds.

Take a look at the examples that Alex has shared in his blog:

To overcome some of the issues associated with embedding video files into webpages, the latest version of the HTML (html5) introduces the video element. However, as not all browsers support all video formats, it is a good idea to convert video files to multiple formats.

video format table

Kyle Cassidy, a visual artist, explains the various video formats in his article Video Formats Explained for Videomaker. How can you make family videos more interesting? Emulate what you see in documentaries. In the video below, you'll learn the four ingredients of documentaries, and then how you can turn regular family videos into micro-documentaries. (And people will love what you make with them!)

Video Editing Software

It is the first law of movie-making: no matter how expensive your camera, or how skilled you are at using it, your raw footage will always be rubbish. And so, if you are looking to add a little professional polish, then installing a video editor will be essential. Commercial video editors can be very expensive, of course, but you may not have to go that far. Whether you want to trim your clips down to size, add a soundtrack or captions, apply transitions or special effects, there are some great free tools which can help - and these are the very best around. Mike Williams, techradar.computing

Commercial Software:

Visit 10TopTenReviews for the complete list and a comparison of video editing features.

Open Source or Free:

Assignment: Question for Thought 2

Directions: Research and reveal how video can be used to enhance the message intended for an audience (150-200 words). Place your essay in the textbox below. Do not attached a separate document and be sure to proofread before submitting.

Assignment: Creating an Animoto

Directions: Create a 30 second animoto using You will need to register for a free account. You must use at least 4 pictures and 4 textboxes. You can choose your own topic but it must be school appropriate. You will then place the link to your animoto in the itsLearning assignment textbox for me to view.

Assignment: Digital Video Production

Directions: Digital video has become a prominent and effective way of conveying new ideas and products. Create an iAchieve recruitment video to recruit high school students who are looking for a virtual alternative to education.

Create a video between 2 and 4 minutes that properly develops the topic. You may use any method to capture or create moving images. The video must be uploaded to YouTube or SchoolTube. Please mark it unlisted with comments disabled. The description of the video must contain copyright information and the video must comply with copyright restrictions.

Download the complete assignment, including grading rubric from itsLearning. Submit the URL to the itsLearning assignment.

Augmented Reality

Augmented reality (AR) is a live direct or indirect view of a physical, real-world environment whose elements are augmented (or supplemented) by computer-generated sensory input such as sound, video, graphics or GPS data. Augmentation is conventionally in real-time and in semantic context with environmental elements, such as sports scores on TV during a match. With the help of advanced AR technology such as adding computer vision and object recognition, the information about the surrounding real world of the user becomes interactive and digitally manipulable. Artificial information about the environment and its objects can be overlaid on the real world.

Autonomy, a leading enterprise infrastructure company has a new technology that can change the way we look at and interact with physical objects. Called Aurasmsa, it works with smart phone and tablets to, in real time, turn static images or even objects into videos, games and interactive experiences. Aim your phone at a building and see a video about that building. Aim it at a picture in a newspaper and launch an interactive experience.

Just think of all the possibilities of using augmented reality in our day to day lives.

Assignment: Aurasma

Directions: Create your own Aurasmsa. Download the short tutorial from itsLearning with the step-by-step instructions on creating an Aurasmsa. If you do not have access to a smartphone or tablet, email Mrs. Rush for an alternative assignment.


If you are having problems viewing this page, opening videos, or accessing the URLs, the direct links are posted below. All assignments are submitted in itsLearning. If you have having problems, contact Mrs. Rush through the itsLearning email client.

The Future Of Video In Web Design:

15 superb websites with video backgrounds:

Augmented Reality vocab:

Aurasma Demo video:

How to Make a Micro-Documentary video:

Multimedia for Web Designers presentation: audiovideo.pdf



Movie icon:

Video camera icon:

Headphones icon:

Transcript of this lesson