CSS - Médias auditifs
Un document Web peut être rendu par un synthétiseur vocal. CSS2 vous permet d'attacher des fonctionnalités de style sonore spécifiques à des éléments de document spécifiques.
Le rendu sonore des documents est principalement utilisé par les malvoyants. Certaines des situations dans lesquelles un document peut être consulté au moyen d'un rendu auditif plutôt que visuel sont les suivantes.
- Apprendre à lire
- Training
- Accès Web dans les véhicules
- Divertissements à domicile
- Documentation industrielle
- Documentation médicale
Lors de l'utilisation de propriétés auditives, le canevas se compose d'un espace physique tridimensionnel (son entoure) et d'un espace temporel (on peut spécifier des sons avant, pendant et après d'autres sons).
Les propriétés CSS permettent également de faire varier la qualité de la parole synthétisée (type de voix, fréquence, flexion, etc.).
Voici un exemple -
<html>
<head>
<style type = "text/css">
h1, h2, h3, h4, h5, h6 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("../audio/pop.au");
}
p {
azimuth:center-right;
}
</style>
</head>
<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>Il produira le résultat suivant -
Il dirigera le synthétiseur vocal pour qu'il prononce les en-têtes d'une voix (sorte de police audio) appelée "paul", sur un ton plat, mais d'une voix très riche. Avant de parler des en-têtes, un échantillon sonore sera lu à partir de l'URL donnée.
Les paragraphes avec la classe «heidi» sembleront provenir de l'avant gauche (si le système audio est capable de produire un son spatial) et les paragraphes de la classe «peter» de la droite.
Nous allons maintenant voir les différentes propriétés liées aux médias auditifs.
le azimuth jeux de propriétés, d'où le son doit provenir horizontalement.
le elevation ensembles de propriétés, d'où le son doit provenir verticalement.
le cue-after spécifie un son à jouer après avoir prononcé le contenu d'un élément pour le délimiter des autres.
le cue-before spécifie un son à jouer avant de prononcer le contenu d'un élément pour le délimiter des autres.
le cue est un raccourci pour définir le cue-before et le cue-after.
le pause-after spécifie une pause à observer après avoir prononcé le contenu d'un élément.
le pause-before spécifie une pause à observer avant de prononcer le contenu d'un élément.
le pause est un raccourci pour définir une pause avant et une pause après.
le pitch spécifie la hauteur moyenne (une fréquence) de la voix parlée.
le pitch-range spécifie la variation du pas moyen.
le play-during spécifie un son à jouer comme arrière-plan pendant que le contenu d'un élément est prononcé.
le richness spécifie la richesse ou la luminosité de la voix qui parle.
le speak spécifie si le texte sera rendu auditif et si oui, de quelle manière.
le speak-numeral contrôle la façon dont les chiffres sont prononcés.
le speak-punctuation spécifie la manière dont la ponctuation est prononcée.
le speech-rate spécifie le taux de parole.
le stress spécifie la hauteur des "pics locaux" dans le contour d'intonation d'une voix.
le voice-family spécifie la liste prioritaire des noms de famille de voix.
le volume fait référence au volume médian de la voix.
La propriété azimut
La propriété azimut définit la provenance horizontale du son. Les valeurs possibles sont listées ci-dessous -
angle- La position est décrite en termes d'angle compris entre -360 ° et 360 ° . La valeur 0deg signifie directement devant au centre de la scène sonore. 90deg est à droite, 180deg derrière et 270deg (ou, de manière équivalente et plus pratique, -90deg ) à gauche.
left-side- Identique à «270deg». Avec «derrière», «270deg».
far-left- Identique à «300deg». Avec «derrière», «240deg».
left- Identique à «320deg». Avec «derrière», «220deg».
center-left- Identique à «340deg». Avec «derrière», «200deg».
center- Identique à «0deg». Avec «derrière», «180deg».
center-right- Identique à «20deg». Avec «derrière», «160deg».
right- Identique à '40deg'. Avec «derrière», «140deg».
far-right- Identique à «60deg». Avec «derrière», «120deg».
right-side- Identique à «90deg». Avec «derrière», «90deg».
leftwards- Déplace le son vers la gauche et par rapport à l'angle actuel. Plus précisément, soustrait 20 degrés.
rightwards- Déplace le son vers la droite, par rapport à l'angle actuel. Plus précisément, ajoute 20 degrés.
Voici un exemple -
<style type = "text/css">
<!--
h1 { azimuth: 30deg }
td.a { azimuth: far-right } /* 60deg */
#12 { azimuth: behind far-right } /* 120deg */
p.comment { azimuth: behind } /* 180deg */
-->
</style>La propriété d'élévation
La propriété d'élévation définit d'où le son doit provenir verticalement. Les valeurs possibles sont les suivantes -
angle- Spécifie l'élévation sous forme d'angle, entre -90 ° et 90 ° . 0deg signifie à l'horizon avant, ce qui signifie vaguement au niveau de l'auditeur. 90deg signifie directement au-dessus et -90deg signifie directement en dessous.
below - Identique à «-90deg».
level - Identique à «0deg».
above - Identique à «90deg».
higher - Ajoute 10 degrés à l'élévation actuelle.
lower - Soustrait 10 degrés de l'élévation actuelle.
Voici un exemple -
<style type = "text/css">
<!--
h1 { elevation: above }
tr.a { elevation: 60deg }
tr.b { elevation: 30deg }
tr.c { elevation: level }
-->
</style>La propriété cue-after
La propriété cue-after spécifie un son à jouer après avoir prononcé le contenu d'un élément pour le délimiter des autres. Les valeurs possibles incluent -
url - L'URL d'un fichier son à lire.
none - Rien ne doit être joué.
Voici un exemple -
<style type = "text/css">
<!--
a {cue-after: url("dong.wav");}
h1 {cue-after: url("pop.au"); }
-->
</style>La propriété cue-before
Cette propriété spécifie un son à jouer avant de prononcer le contenu d'un élément pour le délimiter des autres. Les valeurs possibles sont -
url - L'URL d'un fichier son à lire.
none - Rien ne doit être joué.
Voici un exemple -
<style type = "text/css">
<!--
a {cue-before: url("bell.aiff");}
h1 {cue-before: url("pop.au"); }
-->
</style>La propriété cue
La propriété cue est un raccourci pour définir cue-before et cue-after . Si deux valeurs sont données, la première valeur est cue-before et la seconde est cue-after . Si une seule valeur est donnée, elle s'applique aux deux propriétés.
Par exemple, les deux règles suivantes sont équivalentes -
<style type = "text/css">
<!--
h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
h1 {cue: url("pop.au") }
-->
</style>La propriété pause-after
Cette propriété spécifie une pause à observer après avoir prononcé le contenu d'un élément. Les valeurs possibles sont -
time - Exprime la pause en unités de temps absolues (secondes et millisecondes).
percentage- Fait référence à l'inverse de la valeur de la propriété speech-rate . Par exemple, si le taux de parole est de 120 mots par minute (c'est-à-dire qu'un mot prend une demi-seconde ou 500 ms), une pause après 100% signifie une pause de 500 ms et une pause après 20% signifie 100 ms .
La propriété pause-before
Cette propriété spécifie une pause à observer avant de prononcer le contenu d'un élément. Les valeurs possibles sont -
time - Exprime la pause en unités de temps absolues (secondes et millisecondes).
percentage- Fait référence à l'inverse de la valeur de la propriété speech-rate . Par exemple, si le taux de parole est de 120 mots par minute (c'est-à-dire qu'un mot prend une demi-seconde ou 500 ms), une pause avant de 100% signifie une pause de 500 ms et une pause avant de 20% signifie 100 ms .
La propriété pause
Cette propriété est un raccourci pour définir une pause-avant et une pause-après . Si deux valeurs sont données, la première valeur est pause-before et la seconde est pause-after.
Voici un exemple -
<style type = "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>La propriété pitch
Cette propriété spécifie la hauteur moyenne (une fréquence) de la voix parlée. La hauteur moyenne d'une voix dépend de la famille de voix. Par exemple, la hauteur moyenne d'une voix masculine standard est d'environ 120 Hz, mais pour une voix féminine, elle est d'environ 210 Hz. Les valeurs possibles sont -
frequency - Spécifie la hauteur moyenne de la voix parlée en hertz (Hz).
x-low, low, medium, high, x-high - Ces valeurs ne correspondent pas à des fréquences absolues car ces valeurs dépendent de la famille de voix.
La propriété pitch-range
Cette propriété spécifie la variation du pas moyen. Les valeurs possibles sont -
number- Une valeur comprise entre «0» et «100». Une plage de hauteur de «0» produit une voix plate et monotone. Une plage de pas de 50 produit une flexion normale. Les plages de hauteur supérieures à 50 produisent des voix animées.
La propriété play-pendant
Cette propriété spécifie un son à jouer en arrière-plan pendant que le contenu d'un élément est prononcé. Les valeurs possibles peuvent être l'une des suivantes -
URI - Le son désigné par ce <uri> est joué comme arrière-plan pendant que le contenu de l'élément est prononcé.
mix- Lorsqu'il est présent, ce mot clé signifie que le son hérité de la propriété play-during de l'élément parent continue de jouer et que le son désigné par l' URI est mélangé avec lui. Si mix n'est pas spécifié, le son d'arrière-plan de l'élément remplace celui du parent.
repeat- Lorsqu'il est présent, ce mot-clé signifie que le son se répétera s'il est trop court pour remplir toute la durée de l'élément. Sinon, le son est lu une fois, puis s'arrête.
auto - Le son de l'élément parent continue de jouer.
none - Ce mot-clé signifie qu'il y a silence.
Voici un exemple -
<style type = "text/css">
<!--
blockquote.sad { play-during: url("violins.aiff") }
blockquote q { play-during: url("harp.wav") mix }
span.quiet { play-during: none }
-->
</style>La Propriété Richesse
Cette propriété spécifie la richesse ou la luminosité de la voix parlée. Les valeurs possibles sont -
number- Une valeur comprise entre «0» et «100». Plus la valeur est élevée, plus la voix portera. Une valeur inférieure produira une voix douce et mélodieuse.
La propriété speak
Cette propriété spécifie si le texte sera rendu auditif et si oui, de quelle manière. Les valeurs possibles sont -
none - Supprime le rendu auditif afin que l'élément ne nécessite pas de temps pour le rendu.
normal - Utilise des règles de prononciation dépendant de la langue pour rendre un élément et ses enfants.
spell-out - Épelle le texte une lettre à la fois.
Notez la différence entre un élément dont la propriété 'volume' a la valeur 'silent' et un élément dont la propriété 'speak' a la valeur 'none'. Le premier prend le même temps que s'il avait été prononcé, y compris toute pause avant et après l'élément, mais aucun son n'est généré. Ce dernier ne nécessite aucun temps et n'est pas rendu.
La propriété speak-numeral
Cette propriété contrôle la façon dont les chiffres sont prononcés. Les valeurs possibles sont -
digits- Énoncez le chiffre sous forme de chiffres individuels. Ainsi, "237" est prononcé "Deux trois sept".
continuous- Énoncez le chiffre comme un nombre entier. Ainsi, «237» est dit «Deux cent trente sept». Les représentations de mots dépendent de la langue.
La propriété speak-ponctuation
Cette propriété spécifie la manière dont la ponctuation est prononcée. Les valeurs possibles sont -
code - Les ponctuations telles que les points-virgules, les accolades, etc. doivent être prononcées littéralement.
none - La ponctuation ne doit pas être prononcée, mais rendue naturellement par diverses pauses.
La propriété speech-rate
Cette propriété spécifie le taux de parole. Notez que les valeurs de mots clés absolues et relatives sont autorisées. Les valeurs possibles sont -
number - Spécifie le taux de parole en mots par minute.
x-slow - Identique à 80 mots par minute.
slow - Identique à 120 mots par minute.
medium - Identique à 180 - 200 mots par minute.
fast - Identique à 300 mots par minute.
x-fast - Identique à 500 mots par minute.
faster - Ajoute 40 mots par minute au taux de parole actuel.
slower - Soustrait 40 mots par minute du taux de parole actuel.
La propriété de stress
Cette propriété spécifie la hauteur des "pics locaux" dans le contour d'intonation d'une voix. L'anglais est une langue stressée, et différentes parties d'une phrase se voient attribuer un stress primaire, secondaire ou tertiaire. Les valeurs possibles sont -
number- Une valeur comprise entre «0» et «100». La signification des valeurs dépend de la langue parlée. Par exemple, un niveau de «50» pour une voix d'homme anglophone standard (hauteur moyenne = 122 Hz), parler avec une intonation et une emphase normales aurait une signification différente de «50» pour une voix italienne.
La propriété de la famille vocale
La valeur est une liste hiérarchisée de noms de famille de voix séparés par des virgules. Il peut avoir les valeurs suivantes -
generic-voice- Les valeurs sont des familles de voix. Les valeurs possibles sont «homme», «femme» et «enfant».
specific-voice - Les valeurs sont des instances spécifiques (par exemple, comédien, trinoïdes, carlos, lani).
Voici un exemple -
<style type = "text/css">
<!--
h1 { voice-family: announcer, male }
p.part.romeo { voice-family: romeo, male }
p.part.juliet { voice-family: juliet, female }
-->
</style>La propriété volume
Le volume fait référence au volume médian de la voix. Il peut avoir les valeurs suivantes -
numbers- Tout nombre compris entre «0» et «100». «0» représente le niveau de volume sonore minimum et 100 correspond au niveau de confort maximum.
percentage - Ces valeurs sont calculées par rapport à la valeur héritée, puis sont coupées dans la plage «0» à «100».
silent- Pas de son du tout. La valeur «0» ne signifie pas la même chose que «silencieux».
x-soft - Identique à «0».
soft - Identique à «25».
medium - Identique à «50».
loud - Identique à «75».
x-loud - Identique à «100».
Voici un exemple -
<style type = "text/css">
<!--
P.goat { volume: x-soft }
-->
</style>Paragraphes avec classe goat sera très doux.