Above, Below, Around

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:

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