Table of Contents
Audio on the Web
Without a doubt, what makes the World Wide Web so exciting is multimedia. Surf the Web and you'll find graphics, animations, video, music, and sound being used to deliver an experience more exciting than print and more interactive than television. Most computers that hook up to the Internet today are capable of playing audio.
There are many different kinds of audio being delivered over the Web. We'll discuss the subtle differences between them later. For now, we'll look at the two main categories: digital audio and MIDI. To choose the right one for your Web page, you'll need to understand the basics.
Return to top of page
Digital Audio
Digital audio is sound that has been converted into numerical data. Once sound waves are transformed into digital or numerical data, computers can be used to store, modify, transmit, and play back audio.
Web browsers use two different methods to receive and playback digital audio:
One method is where the entire digital audio file is downloaded, stored locally on your computer, then played back. You won't hear any sound until the entire file has been received. The advantage to this method is all Web browsers are equipped to handle it without modification. The disadvantage is because digital audio files tend to be quite large, download could take a long time.
The second method, referred to as streaming audio, begins playing the audio file as soon as it arrives and continues to play it as it is downloading. The advantage to this method is audio playback is almost instantaneous. The disadvantage is most Web browsers will require an additional program to be installed -- in the form of a plug-in or helper application -- to play streaming audio. We'll cover streaming audio with .mp3 or RealAudio later in this tutorial.
Return to top of page
MIDI Music
MIDI stands for Musical Instrument Digital Interface. The MIDI standard predates the Web by nearly a decade, though you'd think it was created with the Internet in mind. Because MIDI files contain no digital audio and are analogous to musical scores, they're very compact and well-suited to online delivery. Entire musical pieces, even symphonies, can be transmitted over slow modem connections within seconds.
MIDI files can easily be embedded in Web pages. Once a computer receives a MIDI file, it's up to an on-board music synthesizer in the computer to play back the file. Since MIDI has become a standard technology built into all multimedia computers, it's a safe bet that most, if not all, Web users will be able to play them back. This fact contributes the popularity of MIDI on the Web. There are literally thousands of MIDI files or "scores" available in every conceivable musical style. Whatever your preference -- classical, country, pop, jazz, rock -- it's available.
Return to top of page
Where to Get Sound Files
Before you can put sound into your Web pages, you must first get your hands on sound files. There are two ways to do this: Either you will create your own, or you will find digital audio or MIDI files that are ready to go. Let's take a closer look at each of these.
Creating Digital Audio Most computers that are multimedia-ready include the necessary hardware and software to record digital audio. Recording audio on your computer is no more difficult than recording it with a cassette recorder. Most audio recording applications use a cassette-like interface complete with virtual fast-forward, rewind, and record buttons. Digital audio can be stored in various formats including wavefile (.wav), mpeg audio layer 3 (.mp3), Unix Audio (.au), Real Audio (.ra/.ram), and Audio Interchange File Format (.aiff) common on Macintosh systems.
Because of differences in software and hardware standards, you'll need to check your computer's documentation to see what audio applications came bundled with the system.
Creating MIDI Files Although most multimedia computers come ready to play MIDI files, you'll most likely need to get hold of a special application to record your own. Fortunately, there are many to choose from, and many are available as shareware.
Recording MIDI, for the most part, requires some musical skill. You won't be hooking up a microphone to your computer to record MIDI; the music will need to be either played on a piano-like keyboard, or in some cases, your computer keyboard. Software known as a MIDI sequencer will convert the notes you play into a MIDI file.
To learn more about creating MIDI files, check out these websites:
Desktop Music Primer http://www.midi.org MidiSoft Home Page
Return to top of page
Online Sources for Digital Audio and MIDI Files
Creating your own sound files is not the only way to get audio files for your Web pages. There are literally hundreds of thousands of digital audio and MIDI files on AOL and on the Web. You only need to know how to find them. Please respect copyrights and avoid downloading audio from P2P file sharing networks such as KaZaA.
The following list of websites that feature digital audio (WAV files) and MIDI files is but a mere drop in the bucket of what's available...
General Audio Search:
Yahoo Audio Search: http://audio.search.yahoo.com/
AltaVista Audio Search: http://www.altavista.com/audio/default
MIDI and MP3:
Midi file search: http://www.midisite.co.uk/
Midi and MP3 file search: http://www.mididb.com/search/
Lycos MP3 Search: http://entertainment.lycos.com/music/
Return to top of page
Adding Sound and Music to Your Web Pages
Now that you have some sound files handy, let's add them to your web pages. Background Audio Digital audio and MIDI files are easily added to any Web page with the <.embed> tag. This will do as its name implies: embed the file into the Web page so it's delivered to visitors along with the page. Special attributes of the tag let you control various parameters of the audio playback.
We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use <tag> and not <.tag>.
Background sound or music is created by forcing the audio files to begin playing as soon as the page is loaded. The following example code will do just that:
<.EMBED SRC="URL/sample.wav" HIDDEN="true" LOOP="true">
To use this code, you would replace "sample.wav" with the full URL and file name of the audio file you wish to embed. This file should be one of these types:
WAV -- Windows standard digital audio file
MP3 -- MPEG layer 3 encoded
AU -- Unix Audio
AIFF -- Mac Audio
MIDI -- MIDI cross-platform musical instrument digital file
These file types are playable on all the major Web browsers running on both Windows-based and Mac computers.
This code can be placed anywhere within the <.body> tag container in your Web page. We recommend placement near the top of your page so background sound will play while graphics are loading. Let's take a closer look at the attributes we have used:
AUTOSTART="true" -- the autostart attribute will determine whether the sound should begin playing automatically or wait for some user response. By setting it to true, as we did here, the sound will play as soon as it has been downloaded from the server.
HIDDEN="true" -- the hidden attribute tells the browser not to display the audio control panel. The control panel consists of a start and stop button along with a slider audio control. Setting hidden to true hides the control, and setting it to false will display the control. Caution: If autostart is set to false and hidden is set to true, there will be no way for the music to play since there would be no control panel displayed for the user to initiate the sound.
One additional attribute can be added to this code to make the music or sound clip play more than once. By adding the loop attribute to the <.embed> tag, we can control the number of times the sound repeats. The following example illustrates how to code a background sound clip that repeats three times:
<.EMBED SRC="URL/sample.wav" AUTOSTART="true" HIDDEN="true" LOOP="3">
When a Web page that includes this code is loaded, the file sample.wav will play three times, then stop. The only way to get the sound to play again would be to reload the page.
Return to top of page
Linking to Audio
Background audio is only one way to add digital audio and MIDI files to your Web pages. You may also want to give visitors to your website a choice of music to play or give then control over whether audio plays or not. This is easily accomplished with the <.A HREF>*** tag. This tag will let you have as many audio selections on your Web as you wish while giving your visitors the option to choose which clips to play.
You should already be familiar with the <.A HREF> tag from coding hyperlinked text and graphics.
Example 1 - Text Link
To create a text link to a sound file, you'd use the following code:
<.A HREF="URL/sample.wav">Play selection #1<./A>
This code will create a link from the text "Play selection #1" to whatever audio file (digital or MIDI) you reference with the section "URL/sample.wav."
When a user clicks on the link, the browser will launch the appropriate
player (this can be a separate player application or another Web page) to
play the file.
Example 2 - Graphic Link
Creating a link to a sound file from a graphic is similar to the above example. In this case, we substitute an image for the text as follows:
<.A HREF="URL/sample.wav"><.IMG SRC="URL/image.gif" HEIGHT=100 WIDTH=100
ALT="Click to play sound"><./A>
Of course, you'd substitute your graphic and its location for "URL/image.gif" and change the height, width, and alt attributes as appropriate.
Example 3 - An Audio Jukebox
This next example is a fun and versatile addition to your Web pages. It lets any number of audio selections be added to your page while taking up very little real estate, or space, on the page. The Jukebox uses a drop-down selection box to permit a viewer to choose an audio file to play. The sound file will begin to download as soon as the user clicks on a selection.
The Audio Jukebox uses a set of HTML tags you might not be familiar with, the forms tags.
Here's the sample Jukebox code:
Choose a sound file to play:
<.FORM NAME="choice">
<.SELECT NAME= "music"
onChange="top.location=document.choice.music.options[document.choice.music.selectedIndex].value">
<.OPTION VALUE="URL/sample1.wav">Selection #1
<.OPTION VALUE=" URL/sample2.mid">Selection #2
<.OPTION VALUE=" URL/sample3.wav">Selection #3
<.OPTION VALUE=" URL/sample4.mid">Selection #4
<.OPTION VALUE=" URL/sample5.wav">Selection #5
<.OPTION VALUE=" URL/sample6.mid">Selection #6
<./SELECT>
<./FORM>
You only need to change the <.option> tag to customize this code for your own use. Change the value of each selection by substituting the "URL/sample" with the URL and file name of each digital audio or MIDI file you wish to include. Remember to change the "Selection #" text by substituting it with a name or label for the file.
There are six audio selections in the above example, but you're free to use as few or as many as you'd like.
Return to top of page
Sreaming sound with RealAudio or MP3
These days, real audio and .mp3 files are very popular. Using these on your page will require a few extra steps but don't let that worry you. It's still very easy. Let's look at what can be done:
Linking Real Audio Files:
You must create a metafile (which is nothing more than a one line text file saved with the .rpm (or .ram) extension instead of .txt) in notepad pointing to the .rm (or .ra) file. You'll name it the same as the .rm (or .ra) file and give it the .rpm (or .ram) extension, then point your link in the .rpm file to the .rm file.
For example if the .rm file is named eagle.rm You'd create a .rpm file in notepad with only one line as follows:
http://ServerName/~yourid/eagle.rm
This one line you would then save as eagle.rpm and upload both eagle.rm and eagle.rpm to your web space. Of course you'll replace 'ServerName' with the real name of your server. It should be the same as the first part of your URL. For example, www.pcrobin.com
Next, in your html, you would then place a link to the .rpm file.
Note that .rm may be .ra instead and that .rpm may be .ram instead.
Linking MP3 Files
:
You must create a metafile (which is nothing more than a one line text file saved with the .rpm (or .ram) extension instead of .txt) in notepad pointing to the .mp3 file. You'll name it the same as the .mp3 file (not necessary but makes life easier) and give it the .rpm (or .ram) extension, then point your link in the .rpm file to the .mp3 file. For example if the .mp3 file is named eagle.mp3, You'd create a .rpm file in notepad with only one line as follows:
http://ServerName/~yourid/eagle.mp3
This one line you would then save as eagle.rpm and upload both eagle.mp3 and eagle.rpm to your web space. Remember to replace 'ServerName' with the real name of your server. It should be the same as the first part of your URL. For example, www.pcrobin.com
Next, in your html, you would then place a link to the .rpm file.
Embedding RealAudio Files:
You must create a metafile (which is nothing more than a one line text file saved with the .rpm extension instead of .txt) in notepad pointing to the .rm file. You'll name it the same as the .rm file and give it the .rpm extension, then point your link in the .rpm file to the .rm file. For example if the .rm file is named eagle.rm You'd create a .rpm file in notepad with only one line as follows:
http://ServerName/~yourid/eagle.rm
This one line you would then save as eagle.rpm and upload both eagle.rm and eagle.rpm to your web space. Again, replace ServerName with the name of your server.
Next, in your html, you would then place the following:
<.embed src="http://ServerName/~yourid/eagle.rpm"
type="audio/x-pn-realaudio-plugin" align="top" border="0" width="300"
height="134" autostart="true" console="Clip1">
For other types of consoles you can find some great info at the real audio site that will give you exact embed sizes on the Plug-in Tutorial page.
If you want to link to the files, provide a link to the .rpm file rather than embedding it in the page.
(NOTE: .ra & .rm files are interchangeable as are .rpm and .ram)
Embedding MP3 Files:
You must create a metafile (which is nothing more than a one line text file saved with the .rpm extension instead of .txt) in notepad pointing to the .mp3 file. You'll name it the same as the .mp3 file and give it the .rpm extension, then point your link in the .rpm file to the .mp3 file. For example if the .mp3 file is named eagle.mp3, You'd create a .rpm file in notepad with only one line as follows:
http://ServerName/~yourid/eagle.mp3
This one line you would then save as eagle.rpm and upload both eagle.mp3 and eagle.rpm to your web space.
In your html, you would then place the following:
<.embed src="http://ServerName/~yourID/eagle.rpm"
type="audio/x-pn-realaudio-plugin" align="top" border="0" width="300"
height="134" autostart="true" console="Clip1">
For other types of consoles you can find some great info at the real audio site that will give you exact embed sizes on the Plug-in Tutorial.
There's one other option we should cover here. You can force Crescendo to be the player of choice by using the following code from the Crescendo authoring information page.
<.OBJECT ID=Crescendo
CLASSID="clsid:0FC6BF2B-E16A-11CF-AB2E-0080AD08A326"
HEIGHT=55 WIDTH=200>
<.PARAM NAME="Song" VALUE="yourmidifile.mid">
<.EMBED TYPE="music/crescendo" SONG="yourmidifile.mid"
PLUGINSPAGE="http://www.liveupdate.com/dl.html"
HEIGHT=55 WIDTH=200>
<./OBJECT>
Remember to insert the name of your file where we've used "yourmidifile.mid" above.
Return to top of page
Having problems with your HTML? Remember, we add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use <tag> and not <.tag>.
Click here to return to our main page.
Copyright © 2001 PCRobin.com - All Rights Reserved
