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 Friday, March 24. Students
will start presenting draft versions of their
image websites on Monday, March 20th.

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?

1. Models for Image Websites:

 Lynda.com: Site of the Week

---Will Harris: Web Design Gallery

---Webby Awards: 2005 Winners by Category

 

2. Models for Image Slideshows in Image Websites:

--Advanced Slide Show Javascript code page

--Example of Picture Slide Show

--Nice Image Slideshow advertising the
Calypso Cafe

--Sturtz and Copeland.com

 

2. See examples of Picture Slide Show with Music

  1. Example of today's webpage with music
  2. aliasshow.htm (Picture show without Music)
  3. aliasshow2.htm
  4. aliasshow3.htm
  5. aliasshow4.htm

 

2. Using Automatic FTP from within Dreamweaver

  1. Many of you want to automatically ftp
    your webfiles on to the web from within
    Dreamweaver.

  2. Since many of you are only working with
    one computer, this probably isn't a bad idea.

  3. I like to use "Ws-ftp le" as a separate program
    because it forces me to keep track of what version of
    the webpage file I am working with. Because I
    have three different computers, I often fear
    saving an earlier version of the webpage file
    over a later version.

  4. To FTP from within Dreamweaver, you need
    to first create a local folder and remote server
    folder for your website. In this case, I
    created the genre folder on both the local
    and remote site.

  5. Here is the linkto the the website that I
    and ftping to using Dreamweaver:
    http://www.sewallprogram.com/~lewis/genre/index.htm

  6. In Dreamweaver, go to "Site" and select
    "Manage Sites" . To create the genre site,
    choose create "new site".

  7. You will now be asked a series of basic questions
    about your website.

    1. First choose the name of your website
    2. Now select "I don't want to use server technology"
    3. Now select "Edit local copies on my machine"
    4. See ftp settings for my genre website
    5. See Advanced settings for automatic ftp.
    6. Now select "Do not enable check in and
    check out."

  8. Now when you want to work in a specific
    website, select that site in the "Files" Window.
    When you save any files or images, Dreamweaver
    will automatically save them to the web.

 

2. Use Easy CDA Extractor or whatever CD ripper you normally use to convert CD music files
to wave, mp3, or wma files

3. Use Audacity to edit mp3 sound files for playing
on the web. To get Audacity to save your sound files
as MP3s, you need to also download Lame MP3
encoder
. When you first use Audacity to save as an
MP3 file, it will ask you where the " lame_enc.dll"
is saved. Save this file in the same Program folder
as your Audacity program.

4. Use blue.mp3 as an example of how to edit an mp3 file with Audacity (See blue.wma as example of
edited sound file)

4. Examples of sound files edited in Audacity and
then converted to "wma"-- windows media audio-- files.

  1. 20 second MP3 version of sound file
  2. 20 second wma version of sound file
  3. 20 second lower quality version of wma sound file.

2.Use Windows Media Encoder to create streaming audio and video files.

3. You can put either put ".wma" sound files on your webpages or ".mp3" sound files on your webpages. For PCs, I suggest you use Windows Media Encoder and create small ".wma" files to put on your pages.

4. Because Windows Media Player is the default music
player for Windows' PCs, using ".wma" sound files is
the best solution to putting sound on your webpage.

5. You don't want to have your sound files on your webpages open up a separate music player program, because you want the reader to stay on your webpage, not go to another program.

2. Popular Audio and Video Players for the Web

  1. Windows Media Player 9
  2. RealPlayer 10
  3. QuickTime 6.5
  4. Macromedia Shockwave Player (includes Flash Player)
  5. Winamp

3. Popular Audio Compression Software:

  1. Media Cleaner Pro 5
  2. QuickTime 6.5
  3. CakeWalk Metro and Sonar Software
  4. RealSystem Producer Plus
  5. QuickTime Pro
  6. Cool Edit 2000

4.  There are ways to reduce the size of an audio file so that it will download faster on the web:

  1. Length of the audio clip.  You should keep the audio sample as short as possible.  Use just part
    of a song.

  2. Number of channels.  A mono audio file requires half the disk space of a stereo file and is recommended for web audio.

  3. Bit depth.  Audio files for the web are most often saved at 8-bit instead of 16-bit files.

  4. Sampling rate.  Cutting the sampling rate in half will
    cut the file size in half.  Audio files that are voice-only can be reduced down to 8 Khz.  Music will sound acceptable at 22 Khz

5. Two audio formats for the web: Non-Streaming and Streaming

  1. Nonstreaming Audio files must be downloaded from a web server in their entirety before they can begin playing on your computer.

  2. Streaming Audio files begin playing almost immediately as they are slowly downloaded  from the server.

  3. See Shareware.com: Streaming Audio Tools

6. There are 8 common web audio formats

  1. Wav

  2. WMA
  3. MP3
  4. RealAudio
  5. MIDI
  6. AU
  7. RMF
  8. AIFF

7.  On CDs, the audio file is  a cda file.  You can convert long cda files to MP3 files, send them across the
      web, and then reconvert these files to Wav files and
      burn them on a CD.

8. You can't convert a normal CD music file into a
"wma" file.
In order to convert a song on a CD to
a streaming audio file, first convert it into "MP3"
or "WAV" file and then use windows media encoder
to convert the file into a "wma" file.

7. Adding Sound to your webpages on Macs

  1. Use the program Sound Studio for Mac to
    edit and prepare sound files for the web

  2. Go to the Sound Studio page to download
    this program


  3. Instead of using ".wma" files for sound as you
    would on a PC, use ".mp3" files for sound
    on webpages on the Mac.
  4. You can download and install iTunes for Mac
    to have access to other music editing tools.

 

8.  What is your favorite MP3 software?

  1. MusicMatch Jukebox 6

  2. Winamp.com

  3. Sonique Media Player

  4. Liquid Audio Player

9. Good example of Restaurant website with sound

  1. Calypso Cafe

  2. Dixie Kitchen

  3. Code for basic music playing in the background:

    <bgsound src="jazz.wma" loop="1" >

  4. Code for the Calypso Cafe

    <embed src="1lisbon.mp3" width="32"
    height="32" hidden="TRUE" autostart="TRUE" loop="TRUE"></embed>


  5. Nice Image Slideshow advertising the
    Calypso Cafe

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

    Autostart=true
    Hidden=true
    Loop=false

    Code for this trick:

    <a href="audio5.htm">Background sound plays just one<br>
    </a><br>
    Autostart=true<br>
    Hidden=true<br>
    Loop=false<br>

    b. Background sound p
    lays continuously

    Autostart=true
    Hidden=true
    Loop=true

    c. Background sound plays just twice

    Autostart=true
    Hidden=true
    Loop=2

  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:

CONTROLS=console

--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)

VOLUME=(0-100)

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
    controlled
  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: 
159462      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: 15 March, 2006
E-mail: cclewis@spot.colorado.edu
URL:    http://www.colorado.edu/AmStudies/lewis/Design/feel.htm

Digital Design Course homepage