Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

Putting Streaming Audio and Music
on the Web


Assignment: Start working on your image website.
The Image website is due on Saturday, March 25.

Assignment:  (Do after Class)

1. Download and install Windows Media Encoder

2. Practice using Windows Media Encoder to convert
some of your favorite MP3 files into streaming audio files. Remember, you can select the quality and size of your streaming audio files in Media Encoder.

3. Using the HTML code below, practice embedding some of these streaming audio files into one of your webpages.

4. Go to one of your favorite streaming music pages on
the web and look at the source code for this page.  Can you tell how they embedded audio files into their webpage?

10. Linking and Playing audio files on the web

  1. A simple link:

    Play the Doors song

    <a href="doors.wma">Play the Doors song.</a>

  2. Playing a song as a background song:

    a. Background sound plays just once


    Code for this trick:

    <a href="audio5.htm">Background sound plays just one<br>

    b. Background sound p
    lays continuously


    c. Background sound plays just twice


  3. Embedding a music file and play console on a webpage:

    --Putting Music Consoles on Webpages

    1.Use Dreamweaver and select "Insert" and
    select "Media" and then select "Plugins.

    2. Select on the Sound object image and then
    select the properties and parameters of your
    sound file.

    3. Here are a set of properties and parameters for
    setting up your console and sound file:


--Big console (160 x 60 pixels)

--Small console (145 x 15 pixels)

LOOP=true | false |  number

AUTOSTART= true | false

HIDDEN=true (hides console from view)


STARTTIME=minutes: seconds  (02.15 for 2 min. and 15 secs.)

ENDTIME=minutes: seconds (03.25 for 3 min. and 25 secs.)

4. Examples of Audio file links: Rocky Horror Sounds Links

  1. TimeWarp MP3

  2. Time Warp--Simple Link

  3. Time Warp with small console

  4. Time Warp with regular console

    Code for this trick:

    <embed src="timewarp.wma" width="144" height="40" pluginspage="timewarp.wma" controls="console" autostart="false" loop="false" align="absmiddle"></embed>
    Time Warp with regular console<br>

  5. Time Warp saved for a
    computer running with a 28 k. modem.

  6. Time Warp set to play first
    part of opening of the song: 0:00 -- 0:45 seconds.

5. See adding sound to pages using Mouseover

  1. Use Behaviors window and select "Play Sound"

  2. Make sure in the Behaviors menu you select
    a newer version of Internet explorer, such as
    version 5 or 6. Earlier versions of web
    browsers don't have the same capabilities as
    later browsers

  3. If you use advanced Behaviors in your website,
    please put a note near these Behaviors that
    lets the reader know they will only work in
    a current version of their web browser.

  4. Now select behavior on Mouse up, down, over,
    out, or click or double-click

  5. Be Careful using this trick. It needs to be precisely
  6. If you use these advanced behaviors for sound,
    Dreamweaver will add javascript code that could
    conflict with other javascript code you have
    inserted in your webpage.

  7. See Mouseover music example page

  8. See Mouseover Music Example with console bars

  9. See Mouseover Music Example without consoles

6. Sound recording using a microphone with Windows
Media Encoder

  1. Testing sound file

  2. Record simple voice recordings at lower resolution
    than complex musical recording.

7. The Place of Audio files in websites?

  1. Music or MP3 sites
  2. Background sounds
  3. Special effects
  4. Flash presentations
  5. Recoded speeches
  6. Live press conferences and audio performances.
  7. Web radio
  8. Internet Chats





Good Web Design Sites
Award-winning Web Designs
Great Web Design Books
Sewall Class Web Designs

| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
2677      by Chris H. Lewis, Ph.D.

© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 17 March, 2006

Digital Design Course homepage