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

• Launch.com
• Napster.com
• SonicNet.com
• Farmclub.com
• Listen.com
• Classical Archives
• CNN.com Audio
• SHOUTcast - HOME
• Streaming Audio and Video
• QuickTime--Streaming Audio and Video
• Shareware.com: Streaming Audio Tools

• RealNetworks.com
• RealAudio.com
• Real.com
• WindowsMediaPlayer
• Apple QuickTime Pro 5.0
• Liquid.com
• Free Midis And Wavs For Your Page