Multimedia
Adding sound or music
Sound can be a great way to enhance a page, or it can be an annoying part of a page depending on how you use it. If you must add background music I suggest using a midi (musical instrument digital interface) format as it's already compressed and will load quickly. If you are going to be recording from CD you can use the Windows CD player to do so, you will then save the file in .wav format. Note however, wave files are generally very large so I suggest using Real Audio or MP3 file formats. You will need encoders to change files from .wav to .mp3 or .ra. An encoder is just basically an application that will allow you to either record a sound and then save it in a specific sound format or let you open an existing sound file and then convert and save it as another type of sound format.
Check out my links page for an MP3 encoder site or for a Real Audio encoder, as well as a shareware editor to record and edit a wav file. For other encoders just search the web, a good place to look for different applications are Tucows, a brilliant share and freeware site. The various sound files you can use on your pages are: wave sound (*.wav), midi sequencer (*.mid), realmedia (*.ra; *.ram), AIFF sound (*.aif; *.aifc; *.aiff), AU sound (*.au; *.snd) and mpeg layer three (*.mp3).
A background sound is played once the HTML page is loaded by the browser. The HTML tag <BGSOUND> specifies the filename to play, which is generally a .wav or .mid file for window systems. The following is an example of playing a .wav sound file:
<BGSOUND SRC="sound.wav" LOOP="1">
SRC defines the location and name of the sound file you want to play.
The LOOP attribute specifies the number of times to play the sound. If you set LOOP equal to -1, the sound file will play in a continues loop.
One of the problems of using the <BGSOUND> tag is that it is only supported by Internet Explorer. To use sound that will play in both Netscape Navigator and Internet Explorer, use the <EMBED></EMBED> tags. It's format is shown below.
<EMBED SRC="sound.wav" BORDER="0" WIDTH="145" HEIGHT="60" AUTOSTART="TRUE" LOOP="TRUE" VOLUME="100" CONTROLLER="true"></EMBED>
SRC defines the location and name of the sound file you want to play.
The BORDER, WIDTH and HEIGHT attributes define the size of the object. In short what this means is, if you set these values an object will be displayed on the browser window, more or less something like the following:
To hide this, one can use the HIDDEN attribute, or you can set the WIDTH and HEIGHT attribute equal to 1. Note that HIDDEN is not set equal to something, by just adding the attribute will enable the property. Look at the following example:
<EMBED SRC="sound.wav" HIDDEN></EMBED>
The best method to hide the control bar however is to use the CONTROLLER attribute by setting it equal to FALSE, the default value is TRUE. Do not use the CONTROLLER and HIDDEN attribute at the same time, since this can cause problems with playing the sound file. I have also found that when using the HIDDEN attribute the sound file would not start playing in Netscape Navigator, so I had to hide the control bar by setting CONTROLLER equal to FALSE.
Using AUTOSTART in the above example where
AUTOSTART is set equal to true, the file will automatically start
playing. Use this attribute for background sound which should start immediately once it is
downloaded. Set AUTOSTART equal to false if you don't want the sound to
start playing automatically.
You can also use LOOP where you want the sound to repeat over and over.
By editing a short sound and using the LOOP attribute you can create
continuous audio from a very short audio cut. To illustrate this click here to listen to an audio cut,
it will only play once. After you have listened to the music file close the new window it
opened in and then click here
to listen to that same audio cut but in a loop, once again just close the new window it
opened in to return to this screen when you are done.
Once again check out my links page for You can choose from several midi files at The Midi Farm. It is best to use either a WAVE, MIDI or MP3 files for your background music or sound. Some of the sound files are rather troublesome to start playing automatically and once you got them to play they aren't always hidden, for example a realmedia (.ra) file, opens a plug-in player. Click here for an example of a realmedia player, note however you need the realplayer plug-in to be able to listen to this file, if you don't have the required plug-in you can download it from the Real Player web site.
Working with Video
You can capture video from various sources like a web cam or VCR, taking into consideration you have a video card or video port installed on your computer. Your video files will be either AVI, MOV or MPEG files, and you can link to it using the standard <A></A> tag. Take note that video files are large, so alternatively you can use the real encoder to convert your files to RM files and then stream the video, this just means the video is played as it is downloaded, which could also be a problem if you have a slow connection since the video will then play choppy, basically playing faster than what your computer can download.
The most common method to place video on your web page is by embedding the video as follows:
<IMG SRC="sample.jpg" DYNSRC="sample.avi" LOOP="1" START="fileopen" WIDTH="240" HEIGHT="180" ALT="Sample Video">
Some browsers such as Internet Explorer or Netscape
Navigator support video embedded on the HTML page. The <IMG> tag
is extended to include DYNSRC which specifies the location of the video
file.
LOOP specifies how many times to play, and
START specifies how the movie will be activated, and can be either MOUSEOVER
or
FILEOPEN. With MOUSEOVER the movie
will start playing as soon as a user moves their mouse cursor over the movie, while FILEOPEN
starts playing the movie as soon as the page has loaded.
Browsers that do not support embedded video need the SRC statement so a
graphic image is displayed if the movie file is not found or is not supported. The
SRC attribute is just like the ALT attribute, only difference is
it displays a specified picture if the browser has a problem with the movie file, while ALT
displays a text message for when the browser has a problem with the picture. Of course you
don't have to put in either SRC or ALT, it's just a
better coding method in that you are considering users who might be surfing with graphics
turned off, or who has a browser that doesn't support graphics or video.
WIDTH and HEIGHT obviously just specifies the width and height of the movie file.
Quick time movies or .mov files however will not work by embedding the movie file on the HTML page. The reason for this is that quick time movie files need the quick time plug-in to work. The <EMBED></EMBED> tags allows media file types other than those supported by the browser natively, to be handled with an external application or plug-in. In this case, the external application will be QuickTime Player and the plug-in will be the QuickTime plug-in. The <EMBED></EMBED> tags itself has yet to be specified as an HTML standard. Therefore, browsers support various attributes in various versions. The list of <EMBED></EMBED> attributes is long and twisted, so I will document the <EMBED></EMBED> attributes specific to QuickTime. You can download the quick time plug-in from the Apple web page. To place a quick time movie on your HTML page you will use the <EMBED></EMBED> tags, and will look something like this:
<EMBED WIDTH="199" HEIGHT="255" SRC="sample.mov" AUTOPLAY="true" BGCOLOR="#000000" CONTROLLER="true" LOOP="palindrome" PLUGINSPAGE="http://www.apple.com/quicktime/download/"></EMBED>AUTOPLAY can either be set to TRUE or FALSE. When set to TRUE, the AUTOPLAY attribute causes the movie to start playing as soon as the QuickTime Plug-In estimates that it will be able to play the entire movie without waiting for additional data.
The BGCOLOR attribute specifies the background color for any space that is not taken by the movie. For example, if a 160x120 movie was embedded in a space of 200x120, there would be 40 pixels of undefined color space in the width. Specifying the hex value of the background color will fill the undefined space with the value chosen.
The CONTROLLER attribute sets the visibility of the movie controller, and can either be TRUE or FALSE. By default, CONTROLLER is TRUE. If CONTROLLER is set to FALSE, the movie controller will not display. The movie controller is the bar at the bottom of the movie area with the play, stop, rewind and various other movie control buttons, and looks more or less like this:
The HEIGHT and WIDTH attribute specifies the height and width of the embedded file in pixels. If the movie controller is visible, an additional 16 pixels will need to be added to the HEIGHT attribute unless the HIDDEN attribute is specified. The height and width of the movie can be found by choosing "Get Info..." in the "Movie" menu within the QuickTime Player. If you supply a height that is smaller than the actual height of the movie, the movie will be cropped to fit the height. If you supply a height that is greater than the height of the movie, the movie will be centered inside this height, and the same goes for width. Note, never specify a height of less than 2 as this can cause problems with some browsers.
LOOP is either TRUE, FALSE or PALINDROME. By default, LOOP is set to FALSE. When set, the LOOP attribute makes the movie play continuously. Setting LOOP to PALINDROME causes the movie to play alternately forwards and backwards.
The PLUGINSPAGE attribute allows you to specify a URL from which the user can fetch the necessary plug-in if it is not installed. This attribute is handled by your browser. If your browser cannot find the plug-in when loading your page, it will warn the user and allow them to bring up the specified URL, from which one could download QuickTime which includes the QuickTime Plug-In. Set this attribute to: "http://www.apple.com/quicktime/download/" which will point to the latest version of the QuickTime plug-in.
For more information about QuickTime or other versions of the QuickTime plug-in go to the Apple web site.
And that is more or less video and sound with HTML. At this stage you should be able to call yourself an HTML webmaster and be able to create a fairly impressive web page. I have added an HTML tester of sorts that will allow you to enter HTML code on the one side and view the result in the opposite side. This only allows you to try HTML tags within the <BODY></BODY> tags though, but it's a great way to try out all those HTML ideas you have and to quickly see what it will look like in your browser. Try linking to pictures from other web sites or practice drawing tables, anything you want as long as it's within the body of an HTML document. Click here to go to my HTML tester.
 |
Click here to go to the personal homepage example, for this section of the tutorial. |
[Next Section - Uploading Files] [Back To Index Page]
