May 18, 2001 > Tag of the Week
Audio in CSS2: Spatial Positioning
Conventional documents are laid out on a two-dimensional surface: a rendered page. Whether on your display or on a sheet of paper, elements of any Web document wind up at some specific (x,y) location on the page. Audio does this one better, as we'll see this week.
When you "lay out" an audio document, you get to place sound in a three-dimensional volume: the space surrounding the listener's head. Most of us are familiar with stereo music, which places sounds to the right and left of a listener, and more advanced audio systems that place sound all around the listener. The aural properties of CSS2 let you take advantage of these more advanced audio capabilities if your listener's aural browser supports them.
Sounds are placed around a listener using two values: azimuth and elevation. If you place the listener at the center of a circle, the azimuth is the angle around that circle at which the sound is produced. An azimuth of 0 degrees is directly in front of the listener; 90 degrees is to his or her right, 180 degrees is directly behind, and 270 degrees is to the left.
Once the azimuth is set, the height of the sound is determined by the elevation. Again, this is a value expressed as an angle. An elevation of 0 degrees is on the listener's horizon. The maximum elevation is 90 degrees, directly overhead, and the minimum elevation is -90 degrees, directly below the listener.
Controlling Elevation
As you might expect, there are two CSS2 properties, azimuth and elevation, to manage the spatial positioning of sounds in your aural document. You can assign these properties to any and all elements in your document, making different elements appear to be positioned in different spots as the document is read.
The elevation property accepts both numeric and keyword values in a fairly straightforward manner. We'll cover elevation now and move on to the much fancier azimuth property next week.
To set a specific elevation, provide a value in degrees. Within CSS2, degree values must have deg after the numeric value. Thus, to place a sound halfway up, you might say:
B : { elevation : 45deg }
Similarly, a sound slightly below the listener could be obtained with
I : { elevation : -15deg }
For the geometrically challenged, there are a few keywords that make life easier. If you specify the above or below keywords, you get the same effect as if you had used the values 90deg and -90deg, respectively.
If you would prefer relative positioning, you can use the higher and lower keywords with the elevation property. These keywords place the affected element 10 degrees higher or lower than the containing element. This is handy for lifting certain sounds above the general level of the surrounding sounds without having to compute a specific elevation for each element.
Finally, keep in mind that increasing elevation diminishes the effect of azimuth changes. When a sound moves directly overhead, you cannot tell if it is in front of you or behind you. Like all layout tools, sound placement requires some thought and attention to detail to make things just right. Next week, we'll see just how clever you can be, as we work through the various features of the azimuth property.
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
Sound of Music: Background Sound with CSS2
Content Cueing
CSS2 Aural Properties: Fact or Fiction?
