Roadmap of the Web | Tools and Process | Your First Page | Lists | Hyperlinks and Anchors
Images and Backgrounds | Tables | Frames | CSS and The DOM | Animation | Image Maps | Meta Tags and Keywords
FTP | Forms | Audio and Multimedia | Website Promotion | Intro to Javascript |
Special Characters | Color Hex Codes | Glossary

Audio and Multimedia



Audio and Multimedia are a key ingredient to providing content on the web and although the big fat pipe does exist in some areas - some forethought should be given as to how you serve that information. Due to bandwith limitations for the majority of users you don't want to force feed a users browser with a monster size 5 MB audio or multimedia file . Neither should you introduce New Media or Multimedia files that require certain plug ins or players without first pointing the way to software which you can obtain. Therefore your first document of a website should always be a regular old HTML document which provides them with a pathway to your multimedia website and perhaps another pathway to a regular HTML website. A common example of this are FLASH based websites which are very cool in multimedia content but require a special browser plug-in to view. In most current browsers the plug-ins are now part of the software system however in older browsers it is required that you download the player or plug in and then install it on your system and then configure the MIME TYPE so your browser knows which player or plug in it should use to view the file. Lots of folks out there might click ion your site and get a big blank screen if you don't point them in the proper direction and some viewers with older computers may not be able to load the plug ins at all therefore forceing them to bypass your otherwise very cool site.

Many programs mentioned in this section are for Mac Users. Windows users will have to search for similar programs.

Audio and the web.

The first thing we need to do is get some audio on our machines which means we can either download public domain free sound clips from the web, record our own audio or rip some audio from a CD track as long as we have copyright permissions from the artist. Audio files come in a wide range of file type. The .aiff, .wav ,and .mid (midi) are the safest file types to use and can be played on the majority of home computers. Real Audio and .mp3's are becoming also very popular file types although you need special players to hear these file types.

So lets start with downloading some audio.

The Sun Sounds library is a public domain sound library full of sound effects and sound clips from television , radio and other modern culture sources. These files are Ulaw audio files (.au) which will play on many computers but to be safe we should convert them to either .aiff or .wav files.

I went to The Sun Sounds and downloaded a sound file (humpback.au) for the sounds of a humpback whale and put it in a new folder I called sounds located in my Website folder.

How you do this is... first you must capture the sound to your harddrive. Simply clicking on the link to the sound usually launches a web browser audio player but usually wont save it to your HD. There are two ways to capture this on a Mac. The first is similar to how we captured images on the web. Click and hold on the link until a pop up list come up comes up and choose Save this Link (in Netscape) , give it a name and save it to a folder on your harddrive. Make sure you save it as Source NOT as Text

The other way is to go into your Preferences in Netscape and under the Navigator Applications menu ...find the Ulaw audio MIME Type and edit its settings to save it to disk instead of letting it use a player. This configures all Ulaw audio programs to automatically save to my harddrive. I can always switch it back to a player or plugin later on.





So I configured my browser to automatically download the file and now I need to convert the file to an .aiff. There are a great number of file conversion programs available on the web. I chose to go tohttp://www.tucows.com search thru Mac programs under Multimedia and Audio until I found SoundApp - a shareware conversion utilty which works super slick.

I downloaded SoundApp and now I can launch SoundApp to convert the humpback.au file into an .aiff file type by going File to Convert and then point to the folder and choose the humpack.au file. Then in the pull down window choose the type of file you want to change it to - in our case an .aiff file. It will automatically as you to name a folder to put it in. Save it.. then open this folder and move the new humpback.aiff file into your sounds folder (and discard the folder you pulled it out of).Be aware that SoundApp puts the actual humpback.aiff file in a folder. It is the actual humpback.aiff file which must end up in your sounds folder not the folder that houses this file.



Now if I view my sounds folder as a list I can see how large my humpback.aiff file is. It grew in size to 1 MB. A fairly large file. I can probably reduce the file size to help ease bandwith constraints.



So this time I download one of my favorite all time sound programs - Soundhack.

This program was written by Tom Erbe and is available at

ftp://music.calarts.edu/pub/SoundHack/

it's manual is available at

http://www.gmeb.fr/SoftwareCompetition/SoundHackDoc.html/SndHckDoc.html

SH0881.hqx (latest version at this time). Be aware that when you download this program you get two versions. Use the one that says NF not the version that says FPU unless you have an older Mac with a floating point unit. The FPU version will crash most Macs.

I install and open up SoundHack NF.



Then I open up the humpback.aiff file and its information displays in a small window. I know that if I convert the file to 8 bit instead of 16 I should be able to halve my file size.



So I use SoundHacks Save a copy as and choose .aiff ( I could at this time choosen any one of several other file types) and save a copy called humpback2.aiff to my sound folder. SoundHack converts the file which you can see as it does it.





Now if I return to my sounds folder I can see that the file size of humpback2.aiff has indeed been reduced considerably. I listen to it and see there is not much of a quality difference so I will choose to use this new humpback2.aiff file for my webpage.



So now we go back to our HTML document and we can simply make a hyperlink to this file which will launch the file when the viewer so desires.

<a href="sounds/humpback2.aiff">Listen to the humpback whales</a>

Click toListen to the humpback whales

Now your browser should launch what ever player is assigned the .aiff MIME type and after it downloads you will hear some whale sounds. ( Make sure your volume is on)

Another way we can use sound is to embed the sound in a webpage so it starts to play automatically when someone enters your webpage. This is best done with smaller files as someone may already click into one of your other pages if a large file hasn't finished downloading.

I have another file I downloaded that is of an alley cat yowling. This file I called cathowl.aiff and placed it in my sounds folder.

Now by writing

<EMBED SRC="sounds/cathowl.aiff" AUTOSTART=TRUE HIDDEN=TRUE VOLUME=60 LOOP=true>

I can create a page that plays the cathowl automatically. The variable AUTOSTART allows it to play when the page is called. HIDDEN=TRUE hides any play buttons. VOLUME=60 is a default setting. You can boost or cut this back if the sound file is too soft or loud. LOOP=True plays the file over and over. Loop=False would play it once.

To view this in action Click here

By writing a similar peice of code I can make it play only once and in any newer broswers play and stop buttons will appear incase I want to play the sound again. (But these controls may only appear in current browsers)

<EMBED SRC="sounds/cathowl.aiff" AUTOSTART=TRUE WIDTH=100 HEIGHT=10 VOLUME=60 LOOP=false>

Here I replace the HIDDEN variable with a width and height variable and switch LOOP to false. To view this in action Click here If you don't see the control bar you might want to download a newer browser.

So coool !!

But what if you want to record your own sounds or grab a CD track from a friends band that they said you could use.

Well SoundHack allows you to IMPORT CD TRACK. Simply pop a CD in your CD rom drive then open SoundHack and IMPORT CD Track - point to your desktop then the CD then the track and it will import the file and convert it to .aiff or whatever other type of file you might want.

And if you don't have a CD rom drive... you can plug a cassette deck or CD deck directly into your Microphone inputs on your Mac. But now we need to let our computer know we intend to use the microphone input so we must configure our Sound Control Panel



Set your Sound Control Panel input to Sound In. This is the input source for your mic input. If you have a video card or other sound input card you could also choose these if you wanted to input audio through these devices instead.



Next you need to have the proper connecting cables to convert your standard RCA type cables into a stereo 1/8 inch mini plug if you are inputing a standard cassette deck or CD player. These are available at your local Radio Shack or Musical Supply Store.

Or you need a condenser type microphone for a home computer or a better quality condenser microphone if you are going to record voice or sounds via a mic.


In SoundHack pull open the menu that says Create New.



I am going to use a microphone to record a voice message but I could also play a casssette or CD and record part of an audio recording. You need to now set the parameters of your recording. 44K, 16 bit, stereo is your standard CD quality recording but can result in a large file size.



From experience I know that I can reduce my sample rate to 22k or 11k and not lose significant quality for voice...also by reducing to 8 bit and mono I can save significantly on file size. So I set my parameters Save the changes and give the name welcome.aiff to the file I am about to record.



I test my mic input to see if I'm getting signal represented by the green line in SoundHacks input meter.



I hit record and start recording. Hit stop when finished and my new welcome.aiff sound file appears. I listen to it and it is of okay sound quality so I make sure it is in my sounds folder.



Now I can hyperlink to it or embed it like we did the cathowl.aiff. This time I will choose to embed the file as a welcoming message to a website.
Click here to see this in action

There's many different programs out there that allow you to create music or record audio. Look through the download sites until you find some. Soundmachine is another mac recording program that works much like SoundHack. keep looking around until you find your favorites. There are also many high powered multitracking programs like Digidesign ProTools oe Macromedia's Sound Edit 16 which allow for incredible flexibilty and editing features.

http://quicktime.apple.com or many other software companies.Also keep in mind that movie and video clips can take up considerable file size. In order to fit them on the web you may have to sacrifice some quality by reducing bit rate, window size and by using different compression schemes until you get a small enough file size.

Quicktime or AVI movies can be embedded or hyperlinked the same way as sound is. Make sure to include the proper file extensions so that browsers can recognize the MIME type.

Flash (view source) requires some additional embed code - Object embed for activeX browser

Also if you choose to use other multimedia products like Macromedia's Flash make sure you include links to the companies player or plug ins download page. Also make sure to announce on your page that they may need to configure the proper player for whatever MIME type you will be using. Real Audio and MP3's for audio often times require these special players. Beatnik is also a really cool user interactive audio program.

For more information on playing and recording MP3's visit http://www.mp3.com and for information on recording and playing Real Audio Files visit http://www.realaudio.com.

Multimedia is a fascinating area of the web. Remember to check your multimedia with a phone modem connection to see how the rest of the world will view or hear it.

There are all kinds of new emerging technologies like Beatnik which requires special players and plug ins. Make sure your viewers know what they are supposed to be seeing and where to get the appropriate software.

The big fat pipe is coming but it's not everywhere yet and to those of you who insist on using only Flash or other advanced multimedia software to build your websites without clueing in the rest of the world with a HTML introduction page are missing the whole point.
Roadmap of the Web | Tools and Process | Your First Page | Lists | Hyperlinks and Anchors
Images and Backgrounds | Tables | Frames | CSS and The DOM | Animation | Image Maps | Meta Tags and Keywords
FTP | Forms | Audio and Multimedia | Website Promotion | Intro to Javascript |
Special Characters | Color Hex Codes | Glossary


This website sponsored by
www.maineinfo.net
P.O. Box 17891
Portland, Maine 04112