Adding Audio to Your Web Site Adventures in Information February 17, 1999 presented byEileen Flick,...

Adding Audio to Your Web Site

Adventures in Information

February 17, 1999presented byEileen Flick, ISD

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

Embedded vs anchored sounds <embed> tag features:

Launch sounds automatically Embed the player in the flow of a page When you leave a page, sound stops and file isn’t saved Supported by version 3+ of Netscape & IE

Ex: <embed src=“audio/song.mid” controls=“console” height=60 width=145 autostart=“true”></embed>

<A> 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: <A HREF=“audio/song.mid”>play the song</A> <META> tag sound:

Automatic launch, user has no control Client pull, goes in <HEAD> tag area -

EX: <META http-equiv=“refresh” content=“1”;url=audio/song.mid”> - page will refresh and sound will play after one second

Supported by Netscape and later versions of IE - use with caution <BGSOUND> supported only by IE - avoid this one!

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 <EMBED>,

<BGSOUND> and <META> 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

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, 3:1 compression produces best balance of quality and small file size.

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

Other software Kaboom (PC or Mac)

http://www.novadevcorp.com/products/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

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 @ 44/16 = 1.7MB 20 seconds @ 22/8 = 512K 20 seconds @ 11/8 = 288K

Compression Best to compress after digitizing More compression produces smaller files Higher compression can reduce quality Ranges from 1:1 (none) to 12:1 Samples

18 seconds @ 22KHz, 16-bit, 1:1 = 805K 18 seconds @22KHz, 8-bit, 3:1 = 131K 18 seconds @ 22KHz, 8-bit, 6:1 = 68K

Note: If you want to encode your sound file for Real Audio, you must use no compression

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

MP3 - What it’s all aboutMPEG Layer 3, known as MP3, is a digital audio format for quick-downloading

files that sound almost as good as CDs. Compresses at 12:1; a five-minute CD song takes about 50 megabytes of storage space, an MP3 file of the same time length, occupies only about 4~5MB.

20 second 44KHz 16-bit 1:1 = 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/

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

Real Audio Streaming technology Can be delivered live (as in a webcast) or

offline What you’ll 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

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

Audio Samples Real audio webcasts:

http://www.usc.edu/webcast/ http://www.npr.org

Quicktime 3: http://www.apple.com/quicktime/samples/showcase/index.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

Adding Audio to Your Web Site Adventures in Information February 17, 1999 presented byEileen Flick,...

Documents

Transcript of Adding Audio to Your Web Site Adventures in Information February 17, 1999 presented byEileen Flick,...