The spatial audio properties provide a way to tell several voices apart and it has similar effect as a surround system with three-dimensional sound stage.

Two properties are used to provide this effect, they are azimuth and elevation.

Azimuth property

The azimuth property contains following information:

  1. value: <angle>, [[left-side, far-left, left, center-left, center, center-right, right, far-right, right-side], behind], leftwards, rightwards or inherit;
  2. initial: center;
  3. applies to: all elements;
  4. inherited: yes;
  5. percentages: N/A;
  6. media: aural;
  7. computed value: normalized angle.

The value of azimuth property is specified in angles. The analog angle value may be expressed within the range "-360deg" to "360deg" with the value of "0deg" being referred to directly ahead in the center of the sound stage, "90deg" being to the right, "180deg" behind and "270deg" (equivalent to "-90deg") to the left.

The pre-defined keywords refer to the angles as follows:

  • left-side = "270deg", behind = "270deg";
  • far-left = "300deg", behind = "240deg";
  • left = "320deg", behind = "220deg";
  • center-left = "340deg", behind = "200deg";
  • center = "0deg", behind = "180deg";
  • center-right = "20deg", behind = "160deg";
  • right = "40deg", behind = "140deg";
  • far-right = "60deg", behind = "120deg";
  • right-side = "90deg", behind = "90deg".

Other two values named leftwards and rightwards move the sound to the left and to the right respectively, relative to the current angle. The leftward value subtract "20deg" from the current angle while the rightward adds "20deg".

Elevation property

The elevation property contains following information:

  1. value: <angle>, below, level, above, higher, lower or inherit;
  2. initial: level;
  3. applies to: all elements;
  4. inherited: yes;
  5. percentages: N/A;
  6. media: aural;
  7. computed value: normalized angle.

The value of elevation property is also specified in angles. The analog angle value may be expressed within the range "-90deg" to "90deg" with the value of "0deg" being referred to forward horizon, "90deg" means directly overhead and "-90deg" means directly below.

The pre-defined keywords refer to the angles as follows:

  • below = "-90deg";
  • level = "0deg";
  • above = "90deg".

Same as with the azimuth property the last two keywords higher and lower are relevant to the current elevation with the value higher adding "10deg" and the value lower subtracting "10deg".

Example

CSS spatial properties example:

 

›› go to examples ››