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:
--Example of Picture Slide Show
--Nice Image Slideshow advertising the
--Sturtz and Copeland.com
2. See examples of Picture Slide Show with Music
- Example of today's webpage with music
- aliasshow.htm (Picture show without Music)
2. Using Automatic FTP from within Dreamweaver
- Many of you want to automatically ftp
your webfiles on to the web from within
- Since many of you are only working with
one computer, this probably isn't a bad idea.
- 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.
- 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.
- Here is the linkto the the website that I
and ftping to using Dreamweaver:
- In Dreamweaver, go to "Site" and select
"Manage Sites" . To create the genre site,
choose create "new site".
- 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
- 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.
20 second MP3 version of sound file
20 second wma version of sound file
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
- Windows Media Player 9
- RealPlayer 10
- QuickTime 6.5
- Macromedia Shockwave Player (includes Flash Player)
3. Popular Audio Compression Software:
- Media Cleaner Pro 5
- QuickTime 6.5
- CakeWalk Metro and Sonar Software
- RealSystem Producer Plus
- QuickTime Pro
- Cool Edit 2000
4. There are ways to reduce the size of an audio file so that it will download faster on the web:
Length of the audio clip. You should keep the audio sample as short as possible. Use just part
of a song.
Number of channels. A mono audio file requires half the disk space of a stereo file and is recommended for web audio.
Bit depth. Audio files for the web are most often saved at 8-bit instead of 16-bit files.
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
Nonstreaming Audio files must be downloaded from a web server in their entirety before they can begin playing on your computer.
Streaming Audio files begin playing almost immediately as they are slowly downloaded from the server.
See Shareware.com: Streaming Audio Tools
6. There are 8 common web audio formats
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
- Use the program Sound Studio for Mac to
edit and prepare sound files for the web
- Go to the Sound Studio page to download
- Instead of using ".wma" files for sound as you
would on a PC, use ".mp3" files for sound
on webpages on the Mac.
- You can download and install iTunes for Mac
to have access to other music editing tools.
8. What is your favorite MP3 software?
MusicMatch Jukebox 6
Sonique Media Player
Liquid Audio Player
9. Good example of Restaurant website with sound
- Calypso Cafe
- Dixie Kitchen
- Code for basic music playing in the background:
<bgsound src="jazz.wma" loop="1" >
- Code for the Calypso Cafe
<embed src="1lisbon.mp3" width="32"
height="32" hidden="TRUE" autostart="TRUE" loop="TRUE"></embed>
- Nice Image Slideshow advertising the
10. Linking and Playing audio files on the web
A simple link:
Play the Doors song
<a href="doors.wma">Play the Doors song.</a>
- 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 plays continuously
c. Background sound plays just twice
- 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
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
- TimeWarp MP3
- Time Warp--Simple Link
Time Warp with small console
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>
Time Warp saved for a
computer running with a 28 k. modem.
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
- Use Behaviors window and select "Play Sound"
- 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
- 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.
- Now select behavior on Mouse up, down, over,
out, or click or double-click
- Be Careful using this trick. It needs to be precisely
- If you use these advanced behaviors for sound,
inserted in your webpage.
- See Mouseover music example page
- See Mouseover Music Example with console bars
- See Mouseover Music Example without consoles
6. Sound recording using a microphone with Windows
Testing sound file
- Record simple voice recordings at lower resolution
than complex musical recording.
7. The Place of Audio files in websites?
- Music or MP3 sites
- Background sounds
- Special effects
- Flash presentations
- Recoded speeches
- Live press conferences and audio performances.
- Web radio
- Internet Chats