May 11, 2001 > Tag of the Week
Sound of Music: Background Sound with CSS2
One of the goals of the aural extensions to the CSS2 standard is to bring as rich a rendering environment to spoken documents as there is for visually rendered documents. We've covered the basic properties over the past few weeks, and it's time to look into some of the properties that really enrich the listening experience on the Web.
Background Audio
Just as most conventional documents have a background color or image, aural documents can be outfitted with background sound that enhances the presentation of the document. This background sound can be associated with any element in the document, from the outer <body> tag to any individual element in the document. When the content of the affected element is spoken, the associated background sound is played.
You can use the play-during property to associate a background sound with an element. The value of this parameter is the URL of the audio file you wish to play. In its simplest form, you might use this property to play a musical background for your entire document:
BODY { play-during : url(harps.au) }
By default, all elements contained within an element whose play-during property is set to a certain sound share that same background sound. The sound does not restart as each element is rendered, but plays as a continuous audio stream as these contained elements are spoken. This makes sense; you wouldn't want your beautiful background music to restart as each paragraph in your document is spoken! If, for some reason, you are concerned that this sharing will not occur for an element, set the value of play-during to auto for that element.
Just as many background images are not the exact size of their owning element, it is highly unlikely that your background sound will be exactly the same length as the spoken content of its element. If the sound is too long, it stops when the element content stops. If the sound is too short, it plays once and then lets the element's content finish. If you want your background sound to repeat until the owning element's content is finished, add the keyword repeat to the play-during property after the URL. Thus, our harp example is best coded as:
BODY { play-during : url(harps.au) repeat }
This ensures that the harp sound will be exactly as long as your document's spoken content.
Mixing Backgrounds
In conventional HTML, background images overlay and obscure other background images behind them. Transparency notwithstanding, there is little you can do to integrate and blend conflicting background images.
With background audio, you can go one better. Normally, an element's background audio replaces the background audio of a containing element. If you add the mix keyword to the play-during property, the browser will mix the two background audio streams together. Thus, you might use:
BODY { play-during : url(harps.au) repeat }
B { play-during : url(drum-solo.au) repeat mix }
to make sure that your drum solo during bold passages mixes pleasantly with the background harp music.
|
Where Do You Stand?
Do you use background music on your site?
Let us know in this week's reader poll!
|
Finally, you can use the keyword none to remove any background sound from an element. Such an element would override any containing element's background sound, resulting in a background of silence.
As always, choosing appropriate background sound can make or break an aural Web page. Just as a garish background image makes a page difficult to read, annoying background sounds make a page difficult to listen to.
Chuck is the author of the best-selling HTML: The Definitive Guide and now, the fourth and expanded edition, HTML & XHTML: The Definitive Guide. He also writes on a variety of Internet and Web-related topics for a number of online magazines.
Previously in Tag of the Week
Content Cueing
CSS2 Aural Properties: Fact or Fiction?
Aural Style Sheets: Setting Volume and Speech Properties
|