Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | previous | next |

29c. Sound of [web] Music

"Reading just text on a web page is so.... so... 1994!
I     want     to     hear   it
s       i       n       g       !!"


After this lesson you will be able to:


media type: digital audio
what it does well: historic events, narration, providing environmental cues, background music, grabbing attention
issue to consider rating comments
"hurdle" or barrier for creating media low high
Hardware needed to digitize sounds is commonly built into most newer computers and may be as simple as a microphone. Free or low coast shareware can be used to edit and modify sound, and many sites exist with downloadable audio files.
"breadth" of audience that can view media narrow wide
Most recent computers have built in ability to play back sound and it is typically built into most web browsers. Many people will have their volume turned down.
bandwidth consumption low high
Can be quite large but is much less than video. Small sound effect files can be small and some sound file formats (MIDI) are designed to be very small in size. Options exist to "stream" content but it may require special servers.

Sound is one of our most crucial human senses for receiving information and it can be used very effectively for web sites.

However, as you visit different web sites, the main time you come across sound is hearing some corny rendition of marching music, some vague familiar television show theme song, or tinker-toned Beethoven as soon as a web page loads. When a designer adds irrelevant graphics to a work, it is called "Eye Candy"; using sound for many web sites amounts to "Ear Candy".

"So, M. Opinionated, when is sound good?" Good question. Audio can be very useful for re-casting historic moments (speeches, special events, news, etc). It often is a less bandwidth alternative to video when the content is mostly spoken (e.g. classroom lecture). Obviously it might be used to learn about music and acoustics, to compare renditions of classic works, and simply to entertain-- the web can act as a radio. Sound may be used to set an environment (soft music for reading a poem).

Like video, sound must be converted analog to digital, from audio waves that travel through air, to numerical representations of wave frequencies. It can be done as easily as talking into a microphone plugged into the back of your computer, to high end digital recording in a sound studio. In the end, you end up with a computer file that can be played back through a speaker and, again travels through the air to your ears.

Sound files come in many different formats, which creates another layer of alphabet soup confusion. Some of the common file formats are WAVE (WAV), AIFF, AU, MIDI, MP3 etc. A comprehensive overview of the differences between them is beyond our tutorial, and we will just have to accept that we can have a sound file on a computer that can be sent over the Internet and played at the other end.

One format is of special interest, MIDI, because it generally makes for the smallest sound files. Rather than digitizing the sound waves itself, in MIDI format sounds are represented as more or less text characters representing the notes on different types of instruments, and when it is played back, the computer uses a built in sound library to play back the designated note. Therefore, the data that sent is very small. MIDI sounds tend to have a "toy-like" playback and are no where as rich as a CD audio.

Many sites offer sound in RealAudio format in which the sound files streams from a special web server to your web browser. This is most efficient for so called "web radio" stations, sites that offer real time audio news feeds, sites that promote musical events, etc (e.g. World Radio Network, RadioTower, Broadtcast.com, NPR, CNN). Because it requires special equipment, RealAudio is not part of this tutorial.

We also should mentioned the format known as MP3, or MPEG Audio Layer 3, a special form of high quality audio that can compress a very rich sound file into a much smaller file. It may be a music format that changes the music industry. You can find many sites such as MP3.com that offer MP3 music, but again, encoding content into this special format calls for special hardware and software (and touches on tricky legal issues of encoding other artist's content).

For more information on audio over the web, see the Web Developer's Virtual Library for Audio for the WorldWide Web

To include a sound file in a web page, we typically use the same <embed> tag that we saw in the previous lesson on web video:

 <embed src="muzak.wav" autoplay=true controller=false></embed>

which is the typical way to write a sound file that will be played automatically as soon as a web page is opened, and by having the controller invisible, to the person seeing your page, the music just starts playing magically. If you want to provide them the choice of playing the sound or not, you would have the controller visible and the autoplay set to false:

 <embed src="muzak.wav" autoplay=false controller=true></embed>

Again, if you are going to use music or sound in your web page, think carefully about the purpose of the content and if it will be reasonable to hear it every time a person goes to that page. You should never assume that the audio will work for every visitor (and some visitors are deaf), so consider providing text alternatives or suggestions for people that may not be able to hear the content.

Adding Audio

Note: If you do not have the working documents from the previous lessons, download them now.

In this lesson, we are going to add some audio content to our main volcano web page. To add some relevancy to the importance of Volcanoes, we will use content from a letter written by an observer of the volcano Vesuvius, which in the year 79 AD destroyed the city of Pompeii. Along with the text of the letter, we have an audio recording read by a starving actor pretending to be the writer, plus a photo of one of the remains of an actual victims of this event. In this treatment, we provide information in written, visual and audio formats!

The sound file we use is actually saved in the format of a QuickTime digital video, with no video, only the sound track, to take advantage of the wide support for QuickTime in web pages and the advanced file compression available for this format. Plus we can save it in the format that streams it from a web server. The file could also have been a WAV or AIF file.

  1. Go to the Lesson 29c Sound Studio to download a copy of the sound file. Save it as a file named pliny.mov inside your movies folder.
  2. Go to the Lesson 29 Image Studio to download a copy of the image file we will use in this lesson. Save it as a file called bodies.jpg inside your pictures folder.
  3. Create a new file in your text editor and name it pliny.html
  4. Enter the following HTML in this new file
    <title>Pliny's Words</title>
    <h1 align=center>Pliny the Younger's Observations</h1>
    In 79 AD, Pliny the Elder died during the eruption of 
    the volcano Vesuvius. His nephew, Pliny the Younger 
    escaped the destruction of Pompeii and left a written 
    account of the eruption. As you read the letter below, 
    listen to this audio version read by a well-known actor:
    <embed src="../movies/pliny.mov" width="180" height="16" 
           autoplay="false"  controller="true" 
    <!-- start of Volcano Web standard footers -->
    <SCRIPT LANGUAGE="JavaScript">
    <!-- hide  scripts from old browsers
    document.write('<p><hr><FONT FACE="helvetica,arial" size=-1><i>Volcano Web:</i> <b>');
    document.write(document.title + '</b><BR>');
    document.write('created by Lorrie Lava, ');
    document.write('<a href="mailto:lava@pele.bigu.edu?subject=' + document.title + '">');
    document.write('Volcanic Studies, <a href="http://www.bigu.edu/">');
    document.write('Big University</a><p>');
    // append a modification date only if server provides a valid date
    if (Date.parse(document.lastModified) > 0) {
    	document.write('<b>last modified: </b>' + document.lastModified + '<BR>');
    document.write('<b>URL: </b>' + document.location.href + '</FONT><P>');	
    // done hiding from old browsers -->
    <!-- end of Volcano Web standard footers -->
    NOTE: We have written a new web page with a title, some introductory text, a footer, and the <embed> tag to include a control that will allow the site visitor to play a QuickTime sound file.
  5. Save and Load this html file in your web browser. Verify that the sound file loads and can be played back with the QuickTime control bar.

Now we will add some more content, the text of the letter, inside a HTML table, with a right aligned image.

  1. Add this HTML after the end of the <embed>..</embed> tag:
    <table border=0 cellpadding=6 cellspacing=1 width=70%>
    <td><font size=+1 color=#FF9999>
    The carts that we had ordered brought were moving in
    opposite directions, though the ground was perfectly flat,
    and they wouldn't stay in place even with their wheels
    blocked by stones. In addition, it seemed as though the sea
    was being sucked backwards, as if it were being pushed back
    by the shaking of the land. Certainly the shoreline moved
    outwards, and many sea creatures were left on dry sand.
    Behind us were frightening dark clouds, rent by lightning
    twisted and hurled, opening to reveal huge figures of flame.
    These were like lightning, but bigger. At that point the
    Spanish friend urged us strongly: "If your brother and uncle
    is alive, he wants you to be safe. If he has perished, he
    wanted you to survive him. So why are you reluctant to
    escape?" We responded that we would not look to our own
    safety as long as we were uncertain about his. Waiting no
    longer, he took himself off from the danger at a mad pace.
    It wasn't long thereafter that the cloud stretched down to
    the ground and covered the sea. It girdled Capri and made it
    vanish, it hid Misenum's promontory. Then my mother began to
    beg and urge and order me to flee however I might, saying
    that a youngs man could make it, that she, weighed down in
    years and body, would die happy if she escaped being the
    cause of my death. I replied that I wouldn't save myself
    without her, and then I took her hand and made her walk a
    little faster. She obeyed with difficulty, and blamed
    herself for delaying me. <p> Now came the dust, though still
    thinly. I look back: a dense cloud looms behind us,
    following us like a flood poured across the land. "Let us
    turn aside while we can still see, lest we be knocked over
    in the street and crushed by the crowd of our companions."
    We had scarcely sat down when a darkness came that was not
    like a moonless or cloudy night, but more like the black of
    closed and unlighted rooms. You could hear women lamenting,
    children crying, men shouting. <img
    src="../pictures/bodies.jpg" alt="bodies buried in ash"
    width="358" height="135" align="right">Some were calling for
    parents, others for children or spouses; they could only
    recognize them by their voices. Some bemoaned their own lot,
    other that of their near and dear. There were some so afraid
    of death that they prayed for death. Many raised their hands
    to the gods, and even more believed that there were no gods
    any longer and that this was one last unending night for the
    world. Nor were we without people who magnified real dangers
    with fictitious horrors. Some announced that one or another
    part of Misenum had collapsed or burned; lies, but they
    found believers. It grew lighter, though that seemed not a
    return of day, but a sign that the fire was approaching. The
    fire itself actually stopped some distance away, but
    darkness and ashes came again, a great weight of them. We
    stood up and shook the ash off again and again, otherwise we
    would have been covered with it and crushed by the weight. I
    might boast that no groan escaped me in such perils, no
    cowardly word, but that I believed that I was perishing with
    the world, and the world with me, which was a great
    consolation for death. <p> At last the cloud thinned out and
    dwindled to no more than smoke or fog. Soon there was real
    daylight. The sun was even shining, though with the lurid
    glow it has after an eclipse. The sight that met our still
    terrified eyes was a changed world, buried in ash like snow.
    We returned to Misenum and took care of our bodily needs,
    but spent the night dangling between hope and fear. Fear was
    the stronger, for the earth was still quaking and a number
    of people who had gone mad were mocking the evils that had
    happened to them and others with terrifying
    prognostications. We still refused to go until we heard news
    of my uncle, although we had felt danger and expected more.
    <p> You will read what I have written, but will not take up
    your pen, as the material is not the stuff of history. You
    have only yourself to blame if it seems not even proper
    stuff for a letter. Farewell. </td>
    <font size=2>Pliny the Younger's Letter, text from the 
    <a href="http://www.iath.virginia.edu/pompeii/pliny.html">Pompeii Project</a><br>
    Pictures of Pompeii victims, from 
    <a href="http://www.geo.mtu.edu/~boris/VESUVIO_79.html">photos 
    taken in 1992 by Werner Keller</a>.</font>
    <font size=+2>If this historic account shows you<br>
    the impact of a volcano on human life, 
    <a href="index1.html">continue on ...</a></font>
    NOTE: There is nothing new in this section, so you can easily copy and paste it to your HTML. Note that we have included an image file inside the table and allowed the text to trap around it. Below the table are some links to related source materials as well as a link to our main Volcano web site.
  2. Save and Reload in your web browser
  3. The last thing we will do is build a link from our main Volcano Web page to draw new visitors to this new page. Open the HTML file index1.html in your text editor.
  4. After the line that reads:
    who died of asphyxiation after 
    observing the destruction of Pompeii by the
    79 A.D. eruption of Mount Vesuvius.
    add this line:
    <a href="pliny.html">"Hear" Pliny's account!</a>
  5. Save and Reload in your web browser

Check Your Work

Compare your web pages with this sample of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor. Compare your work to the HTML of the samples (look for something like Source from your browser's View menu).


Review topics for this lesson:
  1. What are examples of types of information that might be worth presenting as sound over the Internet?
  2. What are some of the limitations of placing sound in your web page?
  3. What is the HTML code for including an audio clip in your web page?
  4. How would you write the HTML that would embed a sound that would continuously loop?

More Information

Like you saw in our previous lesson on video, the QuickTime movie format we used here for the sound file may not work for everybody. You can use the same HTML code to play back a sound in WAV file format. However, keep in mind the QuickTime employs a great deal of effective compression to reduce the file size of a sound file; the 360k sound file in QuickTime format is nearly 10 times the size (3.2 MB) as a .WAV file!

We have not included the WAV file in the downloaded version of the tutorial, but you can find it from the Lesson 29c Sound Studio Once you download the sound file, you can simply substitute all HTML references to pliny.mov with the new file name, pliny.wav. Your mileage may vary, meaning it may not work as well as the QuickTime version.

Independent Practice

Try adding some sound to your own web pages. Before you use any sound files in a published web page, be sure to obtain permission from the person that created it.

More Information

You can always build a link to any media file by using our familiar hypertext link:

  Try out my latest <a href="new_riff.wav">guitar riff</a> 
  or <a href="trumpet.mid">trumpet call</a>

assuming we had a WAV file and a MIDI file with these names. The web browser will leave the page it was linked from and then try to load the sounds the best it can, in blank web page. After hearing the sound, you would have to press the browser back button to return to the page you came from. The implementation is not as seamless as embedding it in the page but it works.

Coming Next....

Stand back and brace yourself... a S H O C K W A V E! is coming

GO TO.... | Lesson Index | previous: "MovieTime!" | next: "Shockwave" |

Writing HTML: Lesson 29c: Sound of [web] Music
©1994-2002 Maricopa Community Colleges
Questions? Comments? Visit our feedback center

URL: http://www.mcli.dist.maricopa.edu/tut/tut29c.html

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.