Copyright © tutorialspoint.com
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 sets where the sound should come from horizontally.
The elevation property sets where the sound should come from vertically.
The cue-after specifies a sound to be played after speaking an element's content to delimit it from other.
The cue-before specifies a sound to be played before speaking an element's content to delimit it from other.
The cue is a shorthand for setting cue-before and cue-after
The pause-after specifies a pause to be observed after speaking an element's content.
The pause-before specifies a pause to be observed before speaking an element's content.
The pause is a shorthand for setting pause-before and pause-after.
The pitch specifies the average pitch (a frequency) of the speaking voice.
The pitch-range specifies variation in average pitch.
The play-during specifies a sound to be played as a background while an element's content is spoken.
The richness specifies the richness, or brightness, of the speaking voice.
The speak specifies whether text will be rendered aurally and if so, in what manner.
The speak-numeral controls how numerals are spoken.
The speak-punctuation specifies how punctuation is spoken.
The speech-rate specifies the speaking rate.
The stress specifies the height of "local peaks" in the intonation contour of a voice.
The voice-family specifies prioritized list of voice family names.
The volume refers to the median volume of the voice.
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> |
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> |
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> |
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> |
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> |
This property specifies a pause to be observed after speaking an element's content. The possible values are:
This property specifies a pause to be observed before speaking an element's content. The possible values are:
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> |
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:
This property specifies variation in average pitch. The possible values are:
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> |
This property specifies the richness, or brightness, of the speaking voice. The possible values are:
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
This property controls how numerals are spoken. The possible values are:
This property specifies how punctuation is spoken. The possible values are:
This property specifies the speaking rate. Note that both absolute and relative keyword values are allowed. The possible values are:
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 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> |
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.
Copyright © tutorialspoint.com