Adding Audio to Your Web Site

1
Adding Audio to Your Web Site

• Adventures in Information
• February 17, 1999
• presented byEileen Flick, ISD

2
What it takes

• Computer (Pentium or PowerMac recommended) with a
  sound card
• Plenty of hard drive space for uncompressed sound
• Source (CD, video tape, voice, etc)
• Input device (microphone, CD player, etc)
• connectors (1/8 stereo to RCA cord) for external
  devices
• Recording/editing software

3
Embedded vs anchored sounds

• tag features
• Launch sounds automatically
• Embed the player in the flow of a page
• When you leave a page, sound stops and file isnt
  saved
• Supported by version 3 of Netscape IE
• Ex controlsconsole height60 width145
  autostarttrue
• tag features
• Sounds downloaded to local drive, nothing plays
  until entire file is downloaded
• Player launched separately, easy to save files,
  supported by all browsers
• Ex play the song
• tag sound
• Automatic launch, user has no control
• Client pull, goes in tag area -
• EX io/song.mid - page will refresh and sound will
  play after one second
• Supported by Netscape and later versions of IE -
  use with caution
• supported only by IE - avoid this one!

4
Things to Keep in Mind

• While adding sound to web pages is fun, remember
  not all computers are created equal so
• Use embedded sound (automatic play) judiciously -
  this can be a real pain on slow connections
• This includes sound files using the ,
  and tags
• Keep it small best to keep non-streaming clips
  under 20 seconds
• Watch your formats! If necessary, provide
  multiple options (ex WAV and AIFF) so all can
  listen

5
When digitizing

• Check the sample rate
• 44.1 recommended - higher the setting, the better
  the quality
• Check compression
• If the sound file will be going on the Web as a
  Real Audio file, sound must be digitized with NO
  compression.
• For other file formats, 31 compression produces
  best balance of quality and small file size.

6
Software (commercial tools)

• SoundEdit (Mac) http//www.macromedia.com/
• Component of Macormedia Director Studio, also
  available as stand-alone app
• Saves files in a variety of formats
• Downside expensive, memory-intensive
• Upside available in computer user rooms at USC
• SoundForge (PC)http//www.soundforge.com
• Win 95
• Pro-level editing, saves in a variety of formats
• Downside expensive
• Not available at USC

7
Other software

• Kaboom (PC or Mac) http//www.novadevcorp.com/prod
  ucts/kaboom/index.html
• Records and saves sound files in a variety of
  formats
• 2 minute recording limit
• Limited compression settings
• GoldWave (PC) http//www.goldwave.com/
• Nice shareware app (under 50) offers extensive
  editing capabilities
• Simple interface

8
Sampling Rates Bit Depth

• Sampling Rate
• Higher the rate, better the quality, larger the
  file
• 44.1KHz - CD quality, music
• 22.0 KHz - good for voice, lower quality music
• 11 KHZ and below - okay for voice, grainy sound
• Bit Depth
• Higher the bit, better the quality
• 16-bit best for high-quality source (like a CD)
• 8-bit okay for voice, produces grainy sound
• Samples
• 20 seconds _at_ 44/16 1.7MB
• 20 seconds _at_ 22/8 512K
• 20 seconds _at_ 11/8 288K

9
Compression

• Best to compress after digitizing
• More compression produces smaller files
• Higher compression can reduce quality
• Ranges from 11 (none) to 121
• Samples
• 18 seconds _at_ 22KHz, 16-bit, 11 805K
• 18 seconds _at_22KHz, 8-bit, 31 131K
• 18 seconds _at_ 22KHz, 8-bit, 61 68K
• Note If you want to encode your sound file for
  Real Audio, you must use no compression

10
Sound formats

• Web-compatible formats
• .WAV - PC standard, good quality, large files,
  supports variable sampling rates and bit depths
• .AIFF - Mac standard, good quality, large files,
  supports variable sampling rates and bit depths
• .AU - UNIX standard, small files, okay quality,
  not as popular as it once was
• MIDI - usually produced using instruments
  connected to your computer, very small files,
  requires special plug-in or helper app (though
  Quicktime 3 can handle it)
• .MOV - Quicktime 3 now cross-platform, handles
  both audio and video, excellent quality, good
  compression, now streams
• MPEG - audio and video, MPG-1 earliest, poorest
  quality. MP-3 produces CD-quality, small files
• RM - Real audio/video, streams sound and video,
  produces very small files, quality varies
  depending on encoding settings

11
MP3 - What its all about

• MPEG Layer 3, known as MP3, is a digital audio
  format for quick-downloading files that sound
  almost as good as CDs. Compresses at 121 a
  five-minute CD song takes about 50 megabytes of
  storage space, an MP3 file of the same time
  length, occupies only about 45MB.
• 20 second 44KHz 16-bit 11 1.7MB Same
  file encoded to MP3 333K
• What you need to listen to MP3
• Player like WinAmp (PC) or MacAmp (Mac)
• Portable player, like the Rio from Diamond
  Multimedia
• What you need to create MP3
• Digitized sound an encoder to copy sound from a
  source (like a CD)
• Various shareware tools can do this
• MusicMatch Jukebox (PC) - can record sounds
  (ripper) encode them
• MPecker (Mac) - encodes already digitized sound
• MP3 on the Web http//www.mp3.com/

12
Streaming vs Non-Streaming

• Streaming (Real Audio, Shockwave Flash, Liquid
  Audio)
• Starts playing immediately
• Files delivered from servers make longer clips
  possible
• Requires special players or plug-ins, Real Audio
  needs the Real Server (available at USC)
• Non-streaming (WAV, AIFF, AU, etc)
• Downloads to your computer, then plays
• Files can be large and slow
• Uses standard helpers or plug-ins

13
Real Audio

• Streaming technology
• Can be delivered live (as in a webcast) or
  offline
• What youll need
• Lots of hard drive space
• Pentium PC or Power Mac, faster the better
• Real Producer for encoding
• Things to remember when encoding
• Choosing a low connection speed (14.4 voice)
  produces smallest file
• Choosing a high connection speed (ISDN) produces
  highest quality
• Quality will never be any better than the source
  file, so make sure the original is as good as
  possible

14
Using the Real Media Server at USC

• Important facts
• Files must be loaded on CWIS
• Users must have signed submitted the Real Media
  agreement
• For more information
• http//www.usc.edu/uscweb/authoring/RealMedia

15
Audio Samples

• Real audio webcasts
• http//www.usc.edu/webcast/
• http//www.npr.org
• Quicktime 3
• http//www.apple.com/quicktime/samples/showcase/in
  dex.html
• Shockwave
• http//www.shockrave.com/t/home_more.html
• Internet Underground Music Archive (IUMA)
• http//www.iuma.com/
• MP3 files
• http//www.mp3.com/
• Builder.com
• Make Some Noise tutorial http//builder.cnet.com/
  Authoring/Audio/index.html