Sound and Movies

Sound and Movie can be implemented as specialized Hyperlinks with the same format as standard Hyperlinks:

<a href="file_address"> link text</a>

The browser determines how to handle a file in a Hyperlink by examining the extension of the file name. The extension is the final portion of the filename and is preceded by a period (.). For instance, if the extension of a file name is .HTM or .HTML, the file is a hypertext document; if the extension is .MP3, .OGG, .AU, .SND, .AIF or .WAV the file is a sound file; if the extension is .AVI, .MOV, .MPG, .MP4, .OGV or .MPEG the file is a movie. The browser will download sound and movie files and use its internal player or launch a "helper" application which will play them. Some Windows® based computers do not have the proper software to play particular sounds and movies; also, the files tend to be large and take a long time to download, so be judicious in adding these files to your Web page. The following link will play a sound; depending on your browser and the helper application, the browser will either bring up a new window or play the sound within the existing window. You, as a web page designer, cannot control the browsers behavior.

Car Horn

To cause a sound or movie file to play immediately after the page loads, use the embed tag, or use the Audio tag.

<embed src="file_address" {alt="text" width="pixels" height="pixels" vspace="pixels" hspace="pixels" loop="true|false"" hidden="true|false" autostart="true|false" volume="percent" align="left|middle|right|top|bottom"}>

For example, below this sentence should be an embedded player that played a sound file when this page loaded. Whether the player appears and which player is used is highly dependent on the browser used and the plugins and/or helper applications installed. Some browsers will not play the clip.

Sorry, your browser doesn't play MP# files

The code for this is:

<embed src="Gong.mp3" alt="Bell Tone" vsapce="5" autostart="true" volume="90">
In case the user does not have the correct plugin, you can add <NOEMBED> tags. The set used after the Embed tag on this page is:
<noembed>Sorry, your browser doesn't have a plugin for WAV files</noembed>
Internet Explorer allows a background sound tag of the form:
<bgsound src="file_address">
Since the same function can be accomplished for all browsers using the embed tag with the attributes hidden="true" autostart="true" there is no reason to use the bgsound tag. NOTE: bgsound is not supported in HTML5.

Audio and Video tags

HTML5 has implimented new audio and video tags which use internal players built into the browser rather than add-on applications (e.g. Quicktime®). This would seem to simplify the implimentation of media in web pages, but the browser makers (bless their pointy little heads) engaged in a format war. Apple and Microsoft (Safari and Internet Explorer) support a set of proprietary formats (MP3 audio, MP4 video). Mozilla, Google and Opera (Firefox, Chrome and Opera) support an open source format (OGG audio, OGV video). So in order to use the new tags, you must specify both formats and store the media files in both formats on your server doubling the space requirements. Thanks guys!

The format for the tags are:

Audio

<audio attributes>
<source src="
filename.mp3">
<source src="
filename.ogg">
Warning notice for older browsers </audio>

video

<video attributes>
<source src="
filename.mp4">
<source src="
filename.ogv">
Warning notice for older browsers </video>

Attributes:

  

The button following the audio player is an example of using javascript to control the functions of the player.

TRICK to make your player truly universal, use an embed as the warning for older browsers. In this way, the audio will be played no matter what browser is used. As in the player above (music courtesy of Kim Briggs).

<audio controls>
<source src="http://kimbriggs.com/songs/a-quiet-party.mp3">
<source src="http://kimbriggs.com/songs/a-quiet-party.ogg">
<embed src="http://kimbriggs.com/songs/a-quiet-party.mp3" autostart="false">
</audio>


Next Lesson Next Page

HTML Home