Copyright © tutorialspoint.com

CSS - Aural Media

previous next


Advertisements

A web document can be rendered by a speech synthesizer. CSS2 allows you to attach specific sound style features to specific document elements.

Aural rendering of documents is mainly used by the visually impaired. Some of the situations in which a document can be accessed by means of aural rendering rather than visual rendering are the following.

When using aural properties, the canvas consists of a three-dimensional physical space (sound surrounds) and a temporal space (one may specify sounds before, during, and after other sounds).

The CSS properties also allow you to vary the quality of synthesized speech (voice type, frequency, inflection, etc.)

Here is one example:

<style tyle="text/css">
<!--
h1, h2, h3, h4, h5, h6 {
    voice-family: paul;
    stress: 20;
    richness: 90;
    cue-before: url("ping.au")
}
p.heidi { azimuth: center-left }
p.peter { azimuth: right }
-->
</style>

This will direct the speech synthesizer to speak headers in a voice (a kind of audio font) called "paul", on a flat tone, but in a very rich voice. Before speaking the headers, a sound sample will be played from the given URL.

Paragraphs with class heidi will appear to come from front left (if the sound system is capable of spatial audio), and paragraphs of class peter from the right.

Now we will see various properties related to aural media.

The azimuth property:

This property sets where the sound should come from horizontally. The possible values are:

Here is one example:

<style tyle="text/css">
<!--
h1   { azimuth: 30deg }
td.a { azimuth: far-right }          /*  60deg */
#12  { azimuth: behind far-right }   /* 120deg */
p.comment { azimuth: behind }        /* 180deg */
-->
</style>

The elevation property:

This property sets where the sound should come from vertically. The possible values are:

Here is one example:

<style tyle="text/css">
<!--
h1   { elevation: above }
tr.a { elevation: 60deg }
tr.b { elevation: 30deg }
tr.c { elevation: level }
-->
</style>

The cue-after property:

This property specifies a sound to be played after speaking an element's content to delimit it from other. The possible values are:

Here is one example:

<style tyle="text/css">
<!--
a {cue-after: url("dong.wav");}
h1 {cue-after: url("pop.au"); }
-->
</style>

The cue-before property:

This property specifies a sound to be played before speaking an element's content to delimit it from other. The possible values are:

Here is one example:

<style tyle="text/css">
<!--
a {cue-before: url("bell.aiff");}
h1 {cue-before: url("pop.au"); }
-->
</style>

The cue property:

This property is a shorthand for setting cue-before and cue-after. If two values are given, the first value is cue-before and the second is cue-after. If only one value is given, it applies to both properties.

For example the following two rules are equivalent:

<style tyle="text/css">
<!--
h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
h1 {cue: url("pop.au") }
-->
</style>

The pause-after property:

This property specifies a pause to be observed after speaking an element's content. The possible values are:

The pause-before property:

This property specifies a pause to be observed before speaking an element's content. The possible values are:

The pause property:

This property is a shorthand for setting pause-before and pause-after. If two values are given, the first value is pause-before and the second is pause-after.

Here is the example:

<style tyle="text/css">
<!--
/* pause-before: 20ms; pause-after: 20ms */
h1 { pause : 20ms }  
/* pause-before: 30ms; pause-after: 40ms */
h2{ pause : 30ms 40ms }  
/* pause-before: ?; pause-after: 10ms */
h3 { pause-after : 10ms }
-->
</style>

The pitch property:

This property specifies the average pitch (a frequency) of the speaking voice. The average pitch of a voice depends on the voice family. For example, the average pitch for a standard male voice is around 120Hz, but for a female voice, it's around 210Hz. The possible values are:

The pitch-range property:

This property specifies variation in average pitch. The possible values are:

The play-during property:

This property specifies a sound to be played as a background while an element's content is spoken. Possible values could be any of the followings:

Here is the example:

<style tyle="text/css">
<!--
blockquote.sad { play-during: url("violins.aiff") }
blockquote q   { play-during: url("harp.wav") mix }
span.quiet     { play-during: none }
-->
</style>

The richness property:

This property specifies the richness, or brightness, of the speaking voice. The possible values are:

The speak property:

This property specifies whether text will be rendered aurally and if so, in what manner. The possible values are:

Note the difference between an element whose 'volume' property has a value of 'silent' and an element whose 'speak' property has the value 'none'. The former takes up the same time as if it had been spoken, including any pause before and after the element, but no sound is generated. The latter requires no time and is not rendered

The speak-numeral property:

This property controls how numerals are spoken. The possible values are:

The speak-punctuation property:

This property specifies how punctuation is spoken. The possible values are:

The speech-rate property:

This property specifies the speaking rate. Note that both absolute and relative keyword values are allowed. The possible values are:

The stress property:

This property specifies the height of "local peaks" in the intonation contour of a voice. English is a stressed language, and different parts of a sentence are assigned primary, secondary, or tertiary stress. The possible values are:

The voice-family property:

The value is a comma-separated, prioritized list of voice family names. It can have following values:

Here is the example:

<style tyle="text/css">
<!--
h1 { voice-family: announcer, male }
p.part.romeo  { voice-family: romeo, male }
p.part.juliet { voice-family: juliet, female }
-->
</style>

The volume property:

Volume refers to the median volume of the voice. It can have following values:

Here is the example:

<style tyle="text/css">
<!--
P.goat  { volume: x-soft }
-->
</style>

Paragraphs with class goat will be very soft.

previous next

Copyright © tutorialspoint.com