 |
Nicht alle Surfer greifen mit einem herkömmlichen, visuell arbeitenden Anzeigegerät auf Ihre Website zu. Sehbehinderte z.B. verwenden oft sogenannte "Screenreader", um sich die Inhalte einer Seite vorlesen zu lassen. Oder stellen Sie sich vor, dass jemand während des Autofahrens im Web surft und dass sein Bordcomputer ihm dazu Webseiten-Texte vorliest. Damit das funktioniert, muss Ihr HTML-Code bestimmte Anforderungen erfüllen - Details dazu unter Behindertengerechtes Webdesign in unserem eBook.
Das jedoch ist nicht Thema dieses Artikels. Hier geht es darum, wie sich solche Vorlese-Geräte mit CSS steuern lassen. So können Sie z.B. festlegen, dass die Stimme weiblich klingen soll. Und für Ihre Naturgedichte-Sektion können Sie einstellen, dass die Stimme mit Vogelgezwitscher untermalt wird. Das wird auch als "aurales Webdesign" bezeichnet.
Inwiefern Ihre auralen Stylesheets dann von irgendwelchen Programmen unterstützt werden, ist eine andere Frage. Uns ist derzeit nur eine Applikation, emacspeak, bekannt, die die CSS-Aural-Spezifikationen unterstützt.
Aber zurück zum eigentlichen Thema: den CSS-Spezifikationen für die Sprachausgabe.
Eigenschaften festlegen
Das Setzen von Audio-Eigenschaften funktioniert wie das Festlegen visueller Eigenschaften. Ein Beispiel:
<style>
.person1 {
...
}
.person2 {
...
}
</style>
<P class="person1">Hallo, Person2. Wie geht es Dir?</P>
<P class="person2">Danke der Nachfrage, gut. Und Dir, Person1?</P>
Konkrete Angaben zu den Stimmen der beiden Sprecher haben wir hier noch nicht gemacht. Übrigens wird anstelle von Bezeichnern wie person1 oft etwas Persönlicheres gewählt, so z.B. paul oder maike.
Stimme modifizieren
Bevor wir uns mit den einzelnen Attributen beschäftigen, zunächst einige Beispiele. Viele davon sind selbsterklärend:
<style>
.paul {
voice-family: male;
richness: 60;
pitch: medium;
speech-rate: fast;
volume: 60;
}
.anke {
voice-family: female;
richness: 45;
pitch: low;
speech-rate: slow;
volume: 40
}
</style>
<P class="paul">Anke! Etwas Schreckliches ist passiert!</P>
<P class="anke">Kommt erst einmal wieder zur Ruhe! Dann kannst Du mir
davon erzählen. Aber langsam und der Reihe nach.</P>
Männlein oder Weiblein?
Steigen wir etwas tiefer in die Materie ein: zunächst einmal wollen wir festlegen, ob sich ein Sprecher eher männlich oder eher weiblich anhört. Das entsprechende Attribut heißt voice-family. Als Werte erlaubt sind male und female, eventuell auch andere Sprecher. Letztere werden jedoch durch das Sprachausgabe-Programm festgelegt, also beschränken wir uns hier einmal auf die beiden Superangaben für das Geschlecht.
Schnellsprecher
Jetzt geht es darum, die Geschwindigkeit des Vorlesens festzulegen. Vielleicht ist Ihr Sprecher ja gerade in Hektik und muss daher extrem schnell vorlesen? Setzen Sie die Eigenschaft speech-rate auf den Wert x-fast. Andere erlaubte Werte sind fast, medium, slow und x-slow.
Sprechhöhe
Wenn Sie zwei Männer in einem Dialog präsentieren wollen, wäre es schön, wenn die beiden Stimmen sich auch deutlich unterscheiden würden. Verwenden Sie hierzu die Attribute pitch und pitch-range.
pitch bezieht sich auf die allgemeine Sprechhöhe bzw. Frequenz. Erlaubt sind die Werte x-low, low, medium, high und x-high. Sie können hier auch Zahlen zwischen 0 und 100 eingeben, wenn Sie eine genauere Unterscheidung benötigen.
pitch-range dagegen akzeptiert nur Zahlen zwischen 0 und 50. Das Attribut bezieht sich auf die Lebhaftigkeit einer Stimme: 0 führt zu einem sehr monotonen Vorlesen, 100 dagegen produziert eine sehr stark betonende Stimme. 50 ist eine "Durchschnitts-Stimme".
Betonungen
Manche Teile eines Worts oder Satzes werden betont ausgesprochen, andere eher nicht. Mit der Werte zwischen 0 und 100 akzeptierenden Eigenschaft stress können Sie festlegen, wie deutlich diese Betonungen sein sollen. Sie werden bereits erraten haben, dass 0 für undeutliche Betonungen steht, 100 dagegen für überdeutliche.
Stimmvolumen
Das Attribut richness gibt an, wie "voll" eine Stimme klingen soll. Diese Eigenschaft ist schwer zu beschreiben, daher schlagen wir vor, dass Sie ein bisschen mit den Werten (zwischen 0 und 100 ist alles erlaubt) herumspielen und ein Gefühl dafür entwickeln.
Lautstärke
Lautstärke vermittelt Emotionen. Daher wäre es fatal, wenn es keine Möglichkeit gäbe, sie anzupassen. Zum Glück jedoch ist das nicht der Fall: indem Sie die Eigenschaft volume auf Werte zwischen 0 und 100 setzen, passen Sie die relative Lautstärke Ihres Sprechers an. "Relativ" deswegen, weil diese Skala auf vom Benutzer gemachte Angaben umgerechnet wird. Es gibt also keine Möglichkeit, die Lautstärke absolut auf z.B. einen Dezibel-Wert zu setzen.
Pausen setzen
Pausen sind - das weiß jeder gute Redner - ein machtvolles Instrument, um z.B. das Publikum in Spannung zu versetzen. Auch Sie haben als auraler Webdesigner die Möglichkeit, festzulegen, ob es nach oder vor dem Vorlesen eines Inhalts eine kurze oder lange Pause geben soll.
Die zugehörigen Eigenschaften sind pause-before, pause-after und pause. Letztere kombiniert beide Eigenschaften. Wenn nur ein Wert angegeben wird, bezieht der sich auf die Vorher- und auf die Nachher-Pause.
Erwartet werden zeitangaben, was meist auf Millisekunden hinausläuft.
Beispiel:
BODY {
voice-family: female;
volume: 50;
}
H1 {
voice-family: male;
volume: 60;
pause-before: 500ms;
pause-after: 250ms;
}
Dazu noch zwei Anmerkungen:
- Wie Sie sehen, müssen Sie nicht mit Klassen arbeiten, um aurale Attribute zu bestimmen. Sie können auch ein ganzes Tag wie hier im Beispiel umdefinieren.
- Die beiden letzten Pause-Angaben ließen sich auch zu
pause: 500ms 250ms; zusammenfassen.
Sounds einspielen
Hintergrund
In Ihren Artikeln beschreiben Sie, wie Sie durch die französische Dordogne gereist sind. Wie schön wäre es doch, wenn beim Vorlesen dieser Texte im Hintergrund eine Vogelkulisse zu hören sein würde...
Erfreulicherweise lassen die CSS-Spezifikationen Sie auch hier nicht im Stich. Mit der Eigenschaft play-during können Sie eine externe Sounddatei angeben, die während des Vorlesens vorgespielt wird.
Das sieht dann in etwa so aus:
BODY {
play-during: url("voegel.wav");
}
Einmischen
Wenn hinter der URL-Angabe noch das Schlüsselwort mix folgt, bedeutet das, dass eventuelle aus übergeordneten Elementen stammende Background-Sounds mit dem aktuellen Background-Sound zusammengemixt werden. Bezogen auf unser Dordogne-Beispiel hieße das z.B., dass während der gesamten Lesevorgänge eine Vogelgezwitscher-Datei gespielt würde, aber nur während bestimmter Passagen würden Windgeräusche in den Hintergrund eingespielt und zu den Vögeln dazugemischt.
Wiederholen
Folgt hinter der URL-Angabe ein repeat, so wird die Hintergrund-Musik solange wiederholt, wie vorgelesen wird. Anderenfalls wird die Sound-Datei nur einmal gespielt.
Die beiden Schlüsselwörter lassen sich beliebig kombinieren.
Ein Beispiel:
BODY {
play-during: url("voegel.wav");
}
.mit_wind {
play-during: url("wind.wav") mix repeat;
}
Andere Angaben
Wenn z.B. das übergeordnete Element schon Hintergrundgeräusche hat, müssen Sie die für das aktuelle (untergeordnete) nicht auch noch angeben. Wenn Sie jedoch ganz auf die play-during-Eigenschaft verzichten, wird das zum übergeordneten Element gehörende Sound-Sample neu gestartet, wenn das Vorlesen des aktuellen Elements beginnt.
Um das zu verhindern, setzen Sie das Attribut auf den Wert auto. Oder alternativ dazu auf none, wenn komplettes Silencium herrschen soll.
Beispiel:
BODY {
play-during: url("voegel.wav");
}
.irgendwas_anderes {
play-during: auto;
}
Effekte vor und nach dem Vorlesen
Mit den Eigenschaften cue-before und cue-after lassen sich Sounddateien angeben, die vor bzw. nach dem Vorlesen der entsprechenden Inhalte abgespielt werden.
Beispiel:
H1 {
cue-before: url("kuh1.wav");
cue-after: url("kuh2.wav");
}
Beide Eigenschaften lassen sich übrigens analog zu pause mit cue zusammen angeben.
Raumklang
In Zeiten von PCs mit Raumklang-Systemen wäre es unverständlich, wenn die CSS-Aural-Spezifikationen nicht wenigstens eine ungefähre räumliche Bestimmung der Klangquelle zuließen. Daher gibt es die Eigenschaften azimuth und elevation.
Horizontale Position
Die horizontale Position eines Sprechers wird mit der azimuth-Eigenschaft festgelegt. Erlaubt sind Angaben in Grad im Stil von azimuth: 50deg;, was wir jedoch nicht empfehlen. Praktischer ist, sich auf die vordefinierten Konstanten left-side, far-left, left, center-left, center, center-right, right, far-right, right-side und behind zu stützen.
Beispiel:
<style>
P {
volume: 100;
}
.eins {
azimuth: far-left;
}
.zwei {
azimuth: far-right;
}
</style>
<P class="eins">Es schallt von links!</P>
<P class="zwei">Es schallt von rechts!</P>
Horizontale Position
Analog zur horizontalen Position kann die vertikale Position mit dem Attribut elevation festgelegt werden. Akzeptiert werden Gradangaben und, wir präferieren diese, vordefinierte Werte: below (unter dem Zuhörer), level (gleiche Höhe wie Hörer) und above (über dem Hörer).
Beispiel:
<style>
.macht {
elevation: above;
volume: 100;
richness: 100;
pitch: x-low;
speech-rate: slow;
}
</style>
<P class="macht">Kriech zu Boden, erbärmliche Kreatur!</P>
Sprechweisen
Zum Schluss stellen wir Ihnen noch einige Angaben vor, die die Aussprache des Sprachprogramms verändern.
Sprach-Rendering
"Sprach-Rendering" heißt: entweder, der Text wird gar nicht gesprochen, normal gesprochen oder buchstabenweise vorgelesen. Die entsprechenden Werte für die Eigenschaft speak sind none, normal und spell-out.
Beispiel:
<style>
.anke {
voice-family: female;
}
.buchstabiert {
speak: spell-out;
}
</style>
<P class="anke">Ich habe jetzt einen Job beim <span class="buchstabiert">BKA</span></P>
Interpunktion
speak-punctuation gibt an, ob Satzzeichen wie Klammern oder der Semikolon wortwörtlich ausgesprochen werden oder ob sie als Pausen in den Vorlese-Fluss integriert werden. Die Eigenschaftswerte sind code für erstere Alternative und none für letztere.
Zahlen
speak-numeral gibt an, wie mit Zahlen verfahren wird. Der Wert digits bedeutet, dass die Zahl 237 als "Zwei Drei Sieben" vorgelesen wird. continuous dagegen bewirkt, dass 237 als "Zweihundertsiebenunddreißig" gesprochen wird.
Tabellen
Sie können auch festlegen, wie Tabellen vorgelesen werden. Mehr dazu in der entsprechenden W3C-Dokumentation.
Fazit
Schade, dass die CSS-beeinflusste Sprachausgabe noch von keinem Browser unterstützt wird. Interessante Effekte lassen sich damit jedenfalls definitiv erzielen. Es ist auch davon auszugehen, dass Sprachausgabe (genauso wie die Spracheingabe) eine große Zukunft hat. Daher lohnt es sich jetzt schon, sich mit Technologie wie den Aural-CSS zu beschäftigen.
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
