One of the more clever aural features in the CSS2 standard is the ability to position sound anywhere above, below, and around the listener. Last week, we covered the "above and below" part; this week we'll handle the "around" features.
The azimuth
Property
While the elevation property moves a sound up and down, the azimuth property moves it around the listener. Together, these two properties let you control the position of a sound using a spherical coordinate system. Like the elevation property, the azimuth accepts a value in degrees or any one of several keywords that define preset positions around the listener. Angular positions are expressed as a numeric value in the range -360 to 360, followed by the unit deg. Straight ahead of the listener is defined as zero degrees, or 0deg when written as a value for the azimuth property. Positive value move around the listener in a clockwise fashion; negative values move around in a counter-clockwise fashion.
With a little thought, it becomes apparent that 90deg is to the right, 180deg is directly behind, and 270deg is to the left of the listener. Using the reverse direction, -270deg, -180deg, and -90deg correspond to the same positions, respectively. Of course, you can use any and all values in between these primary positions to position a sound in just the right spot.
Keyword Values
If geometry was never your strong suit, there are a number of handy keywords that make positioning easier. They are:
left-side
- Completely left, equivalent to
270deg
. far-left
- Not quite as far left, equivalent to
300deg
. left
- A bit closer to center, equivalent to
320deg
. center-left
- Approaching the front of the listener, equivalent to
340deg
. center
- Right in front, equivalent to
0deg
. center-right
- Slightly to the right, equivalent to
20deg
. right
- More to the right, equivalent to
40deg
. far-right
- Even further to the right, equivalent to
60deg
. right-side
- Hard to the right, equivalent to
90deg
.
All of these positions place the sound in front of the listener, shifting from left to right. You can add the keyword behind
to select the same position, left to right, but behind the listener. Specifically, left-side
and right-side
stay the same, while the other positions flip behind the listener:
behind far-left | 240deg |
behind left | 220deg |
behind center-left | 200deg |
behind center | 180deg |
behind center-right | 160deg |
behind right | 140deg |
behind far-right | 120deg |
If all this isn't enough, you can also use the leftwards
and rightwards
keywords, which shift the azimuth to the left or right of the containing element's azimuth. More accurately, they move the sound 20 degrees clockwise (rightwards
) or counterclockwise (leftwards
) from the current azimuth. This is important to note, since a sound at 180 degrees moved leftwards
winds up at 160 degrees, which is actually to the right of the listener.
Aural Positioning
Appearances notwithstanding, positioning sounds is pretty easy. Need a sound above and to the right? Try:
.above-right { elevation : above; azimuth : right }
Keep in mind that as the elevation increases (or decreases) the azimuth is less apparent to the listener.
Also remember that being able to fine-tune the position of every sound in your document doesn't mean that you must do so. Like the ransom-note font usage that emerged when authors were first able to choose from more than two fonts for their document, placing sounds all around the listener may be cool but will ultimately prove annoying. Think long and hard about how you want your document to sound and place your audio elements in a consistent manner. Used wisely, aural positioning, like every other feature in HTML and CSS2, will enhance your documents and invite your listeners to visit your pages more often.
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
Audio in CSS2: Spatial Positioning
Sound of Music: Background Sound with CSS2
Content Cueing