Introduction to HTML
Playing Audio Files
Copyright © 2000 - 2002 Randy D. Ralph.  All rights reserved.
  Images & Video Forms   Course Contents  
In place May 27, 2000.

Contents: Audio File Formats Inline Audio Background Audio

Inline Audio:

There are two (2) ways to place inline audio files in HTML.  The first (shown directly below) uses a simple hypertext reference anchor to an audio file.  The second uses the <EMBED> command (see discussion below).

Hypertext Reference Anchor -

Sounds can be included on webpages using simple hypertext reference anchors which point to audio files.  See also the discussion on Anchors & Links.

The general form of the inline audio link would be:

<a href="URL">Link_Text</a>

Where URL is the full path to the audio file to be played and Link_Text is the visible clickable link.

Example: 

Play <a href="../sounds/midi/hohoane.mid"><i>The Irish 
Ho Hoane</i></a>.

Yields -

Play The Irish Ho Hoane.

When the link is followed the browser will use either default built-in or external audio plug-ins to play the sound in an audio console window.  This technique will work with any audio file type recognized by the browser and its associated plug-ins.

Click on the link above to demonstrate the action.

Background Audio:

There are four (4) methods of playing background audio files on a webpage:

<BGSOUND> <EMBED> <META> FRAMES

<BGSOUND>

This command specifies an audio file to be played in the background while viewing a web document.

Acceptable audio file formats are .wav, .au and .mid files.

The <BGSOUND> command must be placed within the <HEAD> Document Segment.

Example: 

<HEAD>
  <BGSOUND src="../hohoane.mid"
           balance =  0
           delay   = 10 
           loop    = -1
           volume  = -500>
</HEAD>

Hear it work.

The <BGSOUND> command functions in the Internet Explorer browser.  It may produce no result in the Netscape browser.  However both methods shown here can be placed in the same HTML file to ensure that either browser will play the background audio file.  In this case the <BGSOUND> command is enclosed within <NOEMBED> </NOEMBED> tags in the <HEAD> Document Segment.

Example: 

<HEAD>
  <NOEMBED>
    <BGSOUND src="stooges.au">
  </NOEMBED>
</HEAD>
<BODY>
  <EMBED src="stooges.au">
<BODY>

Hear it work.

Command Parameters:

balance = value

Determines how sound output will be balanced in the right and left stereo output channels.  Acceptable values lie in the range from -10000 (left channel only) to 10000 (right channel only).  A value of zero balances stereo output equally between the left and right output channels.

delay = seconds

Specifies the number of seconds of delay before the specified audio file will begin playing in the background.

loop = # of repetitions / value

Specifies the number of times the background audio file will play.  Values of "-1" or "infinite" will cause the playback to loop continuously.

src = URL

Specifies the URL of the audio file to be played.

volume = level

Controls the volume on the output device for playback of the background audio file.  Acceptable values for volume level lie in the range from zero (full volume) to -10000 (sound off).

<EMBED>

This command can be used to specify an audio file to be embedded within an HTML document.  The hidden command parameter controls whether or not the audio file playback control panel will be visible to the user and the autostart command parameter controls whether or not the playback will begin automatically.

Background
<EMBED> 		Inline
<EMBED>
hidden=true
autostart=true 		hidden=false
autostart=false
           or true

Acceptable audio file formats are .aif, .au, .mid and .wav types.

Embedded files may halt loading of a web page when a firewall is in place since embedded files can incorporate viruses.  For this reason the <EMBED> command is generally placed towards the end of the HTML file just before the closing </BODY> statement at the end of the the Body Segment.

Users of the Internet generally do not like automatic playback of audio files.  The <EMBED> method of playing background audio is preferrable to the <BGSOUND> method because it can be set up to present a console to the user providing control over playback options.  (See the command attributes at right.)

Example: 

<EMBED src="mozart01.wav"
       autostart = false
       controls  = console
       hidden    = false
       volume    = 75
       width     = 145
       height    = 25
       loop      = true>

Hear it work.

The <EMBED> command functions in the Netscape browser.  It may produce no result in the Internet Explorer browser.  However both methods shown here can be placed in the same HTML file to ensure that either browser will play the background audio file.  In this case the <BGSOUND> command is enclosed within <NOEMBED> </NOEMBED> tags in the <HEAD> Document Segment.

Example: 

<HEAD>
  <NOEMBED>
    <BGSOUND src="sheba.au">
  </NOEMBED>
</HEAD>
<BODY>
  <EMBED src="sheba.au">
<BODY>

Hear it work.

Command Parameters:

align = right / left / center (middle)

Controls the alignment of the playback console for the embedded audio file within the web page at the point of placement.

autostart = false / true

Specifies whether or not the playback of the audio file will start automatically or must be prompted by the user.  A value of "true" enables the autostart feature.

controls = value

The parameter specifies the look and action of the playback console that will be displayed to the user.

Acceptable values are:

console displays a complete playback
console with all controls
available.
pausebutton displays only the pause
control button.
playbutton displays only the play
control button.
smallconsole displays a reduced playback
console with play, stop and
volume controls.
stopbutton displays only the stop
control button.
volumelever displays only a volume
control slide.

height = pixels

Controls the height of the console display in pixels.  Height and width parameters need to be matched to the size of the console or control buttons displayed.

hidden = true / false

Controls whether or not the console is hidden.  A value of "true" hides the console from view.

hspace / vspace = pixels

Controls the horizontal and vertical space (in pixels), respectively, to require as a standoff for the playback console if placed within text.

loop = # of repetitions / true

Specifies the number of repetitions for playback of the audio file.  A value of "true" causes playback to loop continuously while the page is viewed.

src = URL

Specifies the URL of the audio file to be embedded for playback.

volume = value / %

Controls the volume of playback on the output device.  The range of acceptable values is from 1 (sound off) to 100 (full volume) with a default value of 50.  Alternatively, volume may be expressed as a percentage in the range from 1% (sound off) to 100% (full volume) with a default value of 50%.

width = pixels

Controls the width of the console display in pixels.  Height and width parameters need to be matched to the size of the console or control buttons displayed.

<META>

Audio files can be played from within a web page dynamically through the use of the META refresh command within the document Head Segment.

The refresh CONTENT tag can be used to direct that an audio file be loaded.

The audio file loaded on refresh is handled by the browser built-in or external plug-ins.  It will play automatically in the backgroud with any playback control console associated with the plug-in.

Hear it work.

Command Syntax:

<META HTTP-EQUIV="refresh"; CONTENT="n; URL=AUDIO_URL">

Where n is the number of seconds elapsed after the web page finishes loading before the META refresh begins and AUDIO_URL is the URL to the audio file to be played using the META refresh.

The META refresh must be included within the <HEAD> document segment.

Example: 

<HEAD>
  <META HTTP-EQUIV="refresh"; 
        CONTENT="10; URL=samba.wav">
</HEAD>

Note that placement of the double quotes is critical.

Frames

Within framed HTML documents each frame is a container for HTML code independent of all other frames displayed on the website.  Content of a frame can be dynamically changed without affecting the content of other frames.  Therefore, it is possible to use any of the background audio placement techniques discussed above to apply a background sound to a frame from within the HTML code loaded into that frame.

See an Example.
(Control Panel frame MUSIC option.)

Methods of Placement:

Any of the methods listed above can be used within HTML code loaded into a frame in a framed web document.  In fact, since each frame within a framed website is independent of all others it is theoretically possible to use several approaches to placing audio files within a framed website.  A single approach, however, would be preferrable since multiple playback requests, particularly for background playback, from a single website could cause erratic browser behavior.

Contents: Audio File Formats Inline Audio Background Audio

  Images & Video Forms   Course Contents  

You are here:  NetStrider   »   Tutorials   »   HTML   »   AUDIO   «