Adding Background Sounds with the bgsound Element
Some Web sites provide background audio to create a particular “atmosphere” on the site. Various ways exist to add sound to a Web page, the simplest is the bgsound element.
The bgsound element has four key properties—src, loop, balance and volume. To change the property values via a script, assign a scripting name to the bgsound element’s id property.
The src property specifies the URL of the audio clip to play. Internet Explorer sup-ports a wide variety of audio formats.
The loop property specifies the number of times the audio clip will play. The value -1 (the default) specifies that the audio clip should loop until users browse a different Web page or click the browser’s Stop button. A positive integer indicates the exact number of times the audio clip should loop. Negative values (except -1) and zero values for this prop-erty cause the audio clip to play once.
The balance property specifies the balance between the left and right speakers. The value for this property is between -10000 (sound only from the left speaker) and 10000 (sound only from the right speaker). The default value, 0, indicates that the sound should be balanced between the two speakers.
The volume property determines the volume of the audio clip. The value for this property is between -10000 (minimum volume) and 0 (maximum volume). The default value is 0.
The XHTML document of Fig. 33.1 demonstrates the bgsound element and scripting the element’s properties. This example’s audio clip came from the Microsoft Developer Network’s downloads site,
This site contains many free images and sounds. [Note: Many of the examples in this chap-ter require an Internet connection to access certain audio or video files.]
The code in lines 10–12 specify the media source. The loop property specifies that the audio clip plays only once. The balance and volume attributes are omitted so they default to 0.
Function changeProperties lines 16–23 is called in line 49 when the Set Prop-erties button is clicked. Lines 18–19 read the new value for property loop from the form’s loopit text field, convert the value to an integer and set the new property value by assigning a value to audio.loop (where audio is the id of the bgsound element and loop is the scripting name of the property).
Lines 21–22 read the new value for the volume property from the form’s vol text field, convert the value to an integer and set the new property value by assigning a value to audio.volume (where volume is the scripting name of the property).
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<!-- Fig. 33.1: BackgroundAudio.html -->
<!-- Demonstrating the bgsound element -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head><title>The bgsound Element</title>
<bgsound id = "audio" src =
loop = "1"></bgsound>
var loop = parseInt( audioForm.loopit.value );
audio.loop = ( isNaN( loop ) ? 1 : loop );
var vol = parseInt( audioForm.vol.value );
audio.volume = ( isNaN( vol ) ? 0 : vol );
<h1>Background Music via the bgsound Element</h1>
This sound is from the free sound downloads at the
<a href =
Microsoft Developer Network</a> downloads site.
Use the fields below to change the number of iterations
and the volume for the audio clip<br />
Press <strong>Stop</strong> to stop playing the sound.
<br />Press <strong>Refresh</strong> to begin playing
the sound again.
<form name = "audioForm" action = "">
<p>Loop [-1 = loop forever]</p>
<input name = "loopit" type = "text" value = "1" />
<br />Volume [-10000 (low) to 0 (high)]
<input name = "vol" type = "text" value = "0" /><br />
<input type = "button" value = "Set Properties"
onclick = "changeProperties()" />
Fig. 33.1 Demonstrating background audio with bgsound
Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.