Dank dieser CSS-Eigenschaften, die zur Version 2.0 des CSS-Sprachstandards gehören, wird es möglich, HTML-formatierten Text für die Sprachausgabe auf Audio-Systemen umzusetzen. Die CSS-Eigenschaften zur Sound-Kontrolle für Sprachausgabe erlauben es, Sprecherstimmen auf vielfältige Weise zu beeinflussen und den Einsatz von begleitenden Geräuschen oder Musikpassagen zu kontrollieren.
Die hier vorgestellten Möglichkeiten sind jedoch nicht nur für Sehbehinderte eine Hoffnung. Sie sind auch interessant für schöngeistige Autoren, die Texte nicht nur schreiben, sondern auch für den Zweck des Vorlesens exakt formatieren wollen. Vor allem als Autorenanweisungen für Hör- und Bühnenstücke können diese Angaben sehr interessant sein.
Die computer-technische Umsetzung einer solchen akustischen Feinsteuerung von synthetischen Stimmen ist jedoch alles andere als trivial. "Ich hör ja gar nix" wird auch deshalb noch eine Weile lang das enttäuschende Erlebnis beim "Anhören" der Beispiele auf dieser Seite bleiben, denn die heute verbreiteten Browser sind rein bildschirmorientiert und besitzen keine Programm-Module für Sprachausgabe. Zwar gibt es mittlerweile Software zur Sprachausgabe von Web-Seiten, doch auch bei solchen Produkten ist man in der Regel noch nicht so weit, die hier vorgestellten CSS-Eigenschaften zu unterstützen.
Ein Problem bei der Sprachausgabe ist auch die Vielzahl der Landessprachen. Eine synthetische Stimme, die auf "Englisch" getrimmt ist, wird sich bei der Ausgabe eines deutschen Textes schauerlich anhören. Es ist deshalb auf jeden Fall empfehlenswert, in Dateien, die CSS-Eigenschaften für die Sprachausgabe enthalten, die verwendete Landessprache auszuweisen. Dies kann beispielsweise mit Hilfe des 
Universalattributs lang in einzelnen HTML-Elementen oder zentral im body-Element geschehen.
Sie können für ein HTML-Element oder einen Bereich angeben, in welcher Lautstärke er ausgegeben werden soll. Die Lautstärkeangabe ist eine relative Größe in Bezug auf die Grundlautstärke, die der Anwender eingestellt hat.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>volume</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="volume:silent">Text wird mit der Lautstärke <b>silent</b> gesprochen</p>
<p style="volume:x-loud">Text wird mit der Lautstärke <b>x-loud</b> gesprochen</p>
<p style="volume:20">Text wird mit der Lautstärke <b>20</b> gesprochen</p>
<p style="volume:100">Text wird mit der Lautstärke <b>100</b> gesprochen</p>
</body></html>
Erläuterung:
Mit volume: können Sie die relative Lautstärke bestimmen. Erlaubt sind Werte zwischen 0 (sehr leise) und 100 (sehr laut) oder einer der folgenden Angaben:
silent = Ton aus, jedoch eine Sprechpause in der Länge der Passage.
x-soft = sehr leise, entspricht Wert 0.
soft = leise, entspricht Wert 25.
medium = mittel, entpricht Wert 50.
loud = laut, entpricht Wert 75.
x-loud = laut, entpricht Wert 100.
Sie können bestimmen, wie ein Element oder ein Bereich ausgesprochen wird.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>speak</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="speak:normal">Das Wort "Buchstabieren" wird jetzt buchstabiert:</p>
<p style="speak:spell-out">Buchstabieren</p>
</body></html>
Erläuterung:
Mit speak: können Sie die Aussprache beeinflussen. Folgende Angaben sind erlaubt:
none = Ton aus und keine Sprechpause (Element wird quasi übergangen).
normal = Normale, sprachabhängige Aussprache.
spell-out = Buchstabierte Aussprache (sinnvoll z.B. für Abkürzungen).
Sie können eine Sprechpause vor einem Element erzwingen.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>pause-before</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<h1>Text mit Pausen</h1>
<p style="pause-before:300ms">Text mit 300ms Pause davor</p>
<p style="pause-before:600ms">Text mit 600ms Pause davor</p>
<p style="pause-before:1s">Text mit 1s Pause davor</p>
<p style="pause-before:2s">Text mit 2s Pause davor</p>
</body></html>
Erläuterung:
Mit pause-before: können Sie eine vorangehende Sprechpause erzwingen. Erlaubt ist eine Zeitangabe in Sekunden (s) oder Millisekunden (ms). Alternativ dazu können Sie auch Prozentwerte angeben. Dann ist die Sprechpause abhängig von der (ebenfalls einstellbaren) 
Sprechgeschwindigkeit.
Sie können eine Sprechpause nach einem Element erzwingen.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>pause-after</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<h1>Text mit Pausen</h1>
<p style="pause-after:200ms">Text mit 200ms Pause danach</p>
<p style="pause-after:400ms">Text mit 400ms Pause danach</p>
<p style="pause-after:1s">Text mit 1s Pause danach</p>
<p style="pause-after:3s">Text mit 3s Pause danach</p>
<p>Abschließender Text</p>
</body></html>
Erläuterung:
Mit pause-after: können Sie eine nachfolgende Sprechpause erzwingen. Erlaubt ist eine Zeitangabe in Sekunden (s) oder Millisekunden (ms). Alternativ dazu können Sie auch Prozentwerte angeben. Dann ist die Sprechpause abhängig von der (ebenfalls einstellbaren) Sprechgeschwindigkeit.
Sie können ein Element durch eine Sprechpause davor und eine Sprechpause danach abgrenzen.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>pause</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<h1>Text mit Pausen</h1>
<p style="pause:500ms">Text mit 500ms Pause davor und danach</p>
<p style="pause:1300ms">Text mit 1300ms Pause davor und danach</p>
<p style="pause:1s 2s">Text mit 1s Pause davor und 2s Pause danach</p>
<p>Abschließender Text</p>
</body></html>
Erläuterung:
Mit pause: können Sie ein Element durch Sprechpausen davor und danach abgrenzen. Wenn Sie einen Wert angeben, bedeutet dieser Wert sowohl die Sprechpause vor dem Element als auch nach dem Element. Sie können auch zwei Werte angeben, durch ein Leerzeichen getrennt. Dann bedeutet der erste Wert die Sprechpause vor dem Element und der zweite die Sprechpause danach. Erlaubt sind Zeitangaben in Sekunden (s) oder Millisekunden (ms). Alternativ dazu können Sie auch Prozentwerte angeben. Dann sind die Sprechpause abhängig von der (ebenfalls einstellbaren) Sprechgeschwindigkeit.
Sie können Elemente oder Bereiche mit einem Erkennungssignal einleiten. Das kann z.B. ein Geräusch oder eine Melodie sein.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>cue-before</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="cue-before:url(cue.wav)">Freuen Sie sich!</p>
</body></html>
Erläuterung:
Mit cue-before:url([Dateiname]) können Sie ein Erkennungssignal voranschicken. Wenn sich die Datei in einem anderen als dem aktuellen Verzeichnis befindet, müssen Sie als [Dateiname] relative Pfadangaben oder absolute URIs verwenden. Als Sound-Dateiformate kommen WAV, AU oder AI in Frage.
Sie können Elemente oder Bereiche mit einem Erkennungssignal abschließen. Das kann z.B. ein Geräusch oder eine Melodie sein.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>cue-after</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="cue-after:url(cue.wav)">Und jetzt folgt ein:</p>
</body></html>
Erläuterung:
Mit cue-after:url([Dateiname]) können Sie ein Erkennungssignal an ein Element anschließen. Wenn sich die Datei in einem anderen als dem aktuellen Verzeichnis befindet, müssen Sie als [Dateiname] relative Pfadangaben oder absolute URIs verwenden. Als Sound-Dateiformate kommen WAV, AU oder AI in Frage.
Sie können vor und nach einem Element oder Bereich das gleiche Erkennungssignal ausgeben, etwa ein Geräusch oder eine Melodie.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>cue</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="cue:url(cue.wav)">oh oh, so ein oh oh!</p>
</body></html>
Erläuterung:
Mit cue:url([Dateiname]) können Sie ein Element in zwei gleiche Erkennungssignale einschließen. Wenn sich die Datei in einem anderen als dem aktuellen Verzeichnis befindet, müssen Sie als [Dateiname] relative Pfadangaben oder absolute URIs verwenden. Als Sound-Dateiformate kommen WAV, AU oder AI in Frage.
Sie können für ein Element oder einen Bereich einen Hintergrund-Sound definieren, der so lange wiederholt wird, bis die Ausgabe des Elements oder Bereichs abgeschlossen ist. Das kann etwa eine Geräuschkulisse oder eine Melodie sein.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>play-druring</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="play-during:url(play_during.mid) mix">Während dieser Text gesprochen wird,
ertönt im Hintergrund ein flotter Ragtime als MIDI-Datei. Damit Sie in den Genuß
des gesamten Stücks kommen, müßte ich Ihnen jetzt eine lange Geschichte erzählen.
Aber ich denke, Sie gewinnen auch ohne eine solche Geschichte einen Eindruck davon,
wie Hintergrundmusik während der Sprachausgabe eines Textes wirkt.
Vielen Dank für Ihre Aufmerksamkeit!</p>
</body></html>
Erläuterung:
Mit play-during:url([Datei]) können Sie einen Hintergrund-Sound definieren. Damit ein echter Hintergrundeffekt zustande kommt, müssen Sie außerdem, durch ein Leerzeichen getrennt, das Wort mix dahinter notieren. Wenn Sie dieses Wort weglassen, übertönt der Hintergrund-Sound die Ausgabe des Inhalts. Wenn sich die Sound-Datei in einem anderen als dem aktuellen Verzeichnis befindet, müssen Sie als [Dateiname] relative Pfadangaben oder absolute URIs verwenden.
Hinter der Angabe der Datei können Sie noch eine der folgenden Angaben notieren:
mix = Falls das Elternelement ebenfalls Hintergrund-Sound hat, werden beide Sounds vermischt.
repeat = Wenn die Sound-Datei kürzer ist als es dauert, den Text des Elements zu sprechen, wird der Abspielvorgang so oft wiederholt, bis der Text zuende gesprochen ist.
auto = Falls das Elternelement ebenfalls Hintergrund-Sound hat, wird dieser nicht neu abgespielt, sondern spielt weiter ab.
Anstelle einer Sound-Datei können Sie auch einfach nur none angeben. Das ist sinnvoll, wenn das Elternelement Hintergrund-Sound abspielt. Für die Sprachausgabe des aktuellen Elements können Sie die Ausgabe dann unterbrechen.
Wenn das Sprachausgabesystem räumliches Hören (mindestens stereophon, möglichst Surround-Sound) unterstützt, können Sie die Herkunftsrichtung der Sprechstimme bestimmen.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>azimuth</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="azimuth:left-side">Diese Stimme hier sollte von links kommen.</p>
<p style="azimuth:left-side behind">Diese Stimme hier sollte von links hinten kommen.</p>
<p style="azimuth:center">Diese Stimme hier sollte ganz aus der Mitte kommen.</p>
<p style="azimuth:right-side behind">Diese Stimme hier sollte von rechts hinten kommen.</p>
<p style="azimuth:right-side">Diese Stimme hier sollte von rechts kommen.</p>
</body></html>
Erläuterung:
Mit azimuth: können Sie die räumliche Herkunftsrichtung der Sprechstimme für ein Element oder einen Bereich bestimmen. Sie können dazu entweder eine Gradangabe für die gedachte Richtung notieren oder ein erlaubtes Schlüsselwort. Gradangaben haben Werte zwischen -360 und 360 und müssen mit der Einheitenbezeichnung deg (degree = Grad) abgeschlossen werden. Folgende Schlüsselwörter sind erlaubt:
left-side = Von ganz links (entspricht 270deg).
left-side behind = Von ganz links hinten (entspricht 270deg).
far-left = Von weiter links (entspricht 300deg).
far-left behind = Von weiter links hinten (entspricht 240deg).
left = Von links (entspricht 320deg).
left behind = Von links hinten (entspricht 220deg).
center-left = Von Mitte links (entspricht 340deg).
center-left behind = Von Mitte links hinten (entspricht 200deg).
center = Von der Mitte (entspricht 0deg).
center behind = Von Mitte hinten (entspricht 180deg).
center-right = Von Mitte rechts (entspricht 20deg).
center-right behind = Von Mitte rechts hinten (entspricht 160deg).
right = Von rechts (entspricht 40deg).
right behind = Von rechts hinten (entspricht 140deg).
far-right = Von weiter rechts (entspricht 60deg).
far-right behind = Von weiter rechts hinten (entspricht 120deg).
right-side = Von ganz rechts (entspricht 90deg).
right behind = Von ganz rechts hinten (entspricht 90deg).
Wenn Sie mit Gradangaben arbeiten, können Sie die genannten Angaben als Richtwerte für die exakt gewünschte Richtung verwenden. Anstelle des Schlüsselwortes behind können Sie auch die Schlüsselworte leftwards und rightwards benutzen. Mit leftwards richten Sie die Stimmherkunft weiter links aus (um 20deg gegen den Uhrzeigersinn), mit rightwards weiter rechts (um 20deg im Uhrzeigersinn).
Wenn das Sprachausgabesystem räumliches Hören (möglichst Surround-Sound) unterstützt, können Sie die Herkunftsrichtung der Sprechstimme zwischen oben und unten bestimmen.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>elevation</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="elevation:below">Diese Stimme sollte von unten kommen.</p>
<p style="elevation:higher">Diese Stimme sollte von weiter oben kommen.</p>
</body></html>
Erläuterung:
Mit elevation: können Sie die vertikale Herkunftsrichtung der Sprechstimme bestimmen. Sie können dazu entweder eine Gradangabe für die gedachte Richtung notieren oder ein erlaubtes Schlüsselwort. Gradangaben haben Werte zwischen -90 (von ganz unten) und 90 (von ganz oben) und müssen mit der Einheitenbezeichnung deg (degree = Grad) abgeschlossen werden. Folgende Schlüsselwörter sind erlaubt:
below = Von unten (entspricht -90 deg).
level = Von der Mitte (entspricht 0 deg).
above = Von oben (entspricht 90 deg).
higher = Von weiter oben (entspricht 10 deg relativ zur aktuellen Position).
lower = Von weiter unten (entspricht -10 deg relativ zur aktuellen Position).
Sie können die Schnelligkeit der gesprochenen Wiedergabe beeinflussen.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>speech-rate</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="speech-rate:fast">Das ist ein ziemlich schnell gesprochener Text.
Hoffentlich verstehen Sie alles, was da gesagt wird,
auch wenn es nicht von Belang ist.</p>
<p style="speech-rate:x-slow">Das ist ein gaaannnz langsam gesprochener Text. Gute Nacht!</p>
</body></html>
Erläuterung:
Mit speech-rate: können Sie die Sprechgeschwindigkeit bestimmen. Erlaubt sind folgende Angaben:
x-slow = Ganz langsam.
slow = Langsam.
slower = Etwas langsamer als normal.
medium = Normal.
faster = Etwas schneller als normal.
fast = Schnell.
x-fast = Ganz schnell.
Anstelle der Schlüsselwörter können Sie auch numerische Werte angeben. Ein numerischer Wert bedeutet die mittlere Anzahl Wörter pro Minute. Probieren Sie als Anhaltspunkt Werte um 100.
Sie können die Art der Stimme beeinflussen. Dies entspricht etwa dem Beeinflussen von Schriftarten bei visueller Darstellung. Ob die Angabe interpretiert werden kann, hängt neben der interpretierenden Software von den Hardware-Fähigkeiten des Sprachausgabesystems ab.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>voice-family</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="voice-family:female">Ich bin die universelle Frau. Mein Herz ist meine Familie.</p>
<p style="voice-family:male">Ich bin der universelle Mann. Mein Herz ist meine Frau.</p>
</body></html>
Erläuterung:
Mit voice-family: können Sie die Art der Sprechstimme festlegen. Folgende generische Angaben werden vom W3-Konsortium z.B. vorgeschlagen:
male = Männerstimme.
female = Frauenstimme.
child = Kinderstimme.
Daneben können Sie auch spezifische Angaben notieren, etwa MeineEhefrau. Die entsprechende Stimme muss dem Sprachausgabesystem in digitaler Form bekannt sein.
Sie können die Stimmhöhe der Aussprache bestimmen.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>pitch</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="pitch:x-low">Diese Stimme spricht so tief wie möglich zu Ihnen.
Lassen Sie sich trotzdem nicht einschüchtern.</p>
<p style="pitch:x-high">Diese Stimme spricht so hoch wie möglich zu Ihnen.
Schnatterdischnatterdischnatterdischnatt.</p>
</body></html>
Erläuterung:
Mit pitch: können Sie die Sprechhöhe festlegen. Erlaubt ist entweder die Angabe der mittleren Sprechhöhe als Frequenz (in hz für Hertz oder khz für Kilohertz) oder eine der folgenden Angaben:
x-low = Ganz tief.
low = Tief.
medium = Normal.
high = Hoch.
x-high = Ganz hoch.
Sie können die Modulation der Aussprache beeinflussen.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>pitch-range</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="pitch-range:20">Dies ist ein ziemlich öder Text,
deshalb wird der mit ziemlich monotoner Stimme gesprochen.</p>
<p style="pitch-range:80">Obwohl auch dies ein ziemlich öder Text ist,
wird er dennoch mit sehr angeregter Stimme vorgetragen.</p>
</body></html>
Erläuterung:
Mit pitch-range: können Sie die Sprechweise bestimmen. Normale Sprechweise entspricht einem Wert von 50. Ein tieferer Wert bedeutet eine monotone, modulationsarme Stimme, ein hoher Wert eine angeregte, modulationsreiche Stimme.
Sie können die Emphatik der Stimme beeinflussen.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>stress</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="stress:10">Ich habe alle Zeit der Welt. Deshalb bin ich auch
ganz gelassen und spreche nur mit einem Stress-Wert von 10.</p>
<p style="stress:90">Immerzu ist alles gleich vorbei. Nie kommt man zu etwas.
Alles ist grausam. Deshalb rede ich auch so hastig.
Ein Stress-Wert von 90 wurde mir vorgegeben, stellen Sie sich das mal vor!</p>
</body></html>
Erläuterung:
Mit stress: können Sie festlegen, wie hastig die Stimme ist. Ein Wert von 50 ist normal. Ein höherer Wert bedeutet eine hastige, aufgeregte Stimme, ein niedriger Wert eine in sich ruhende, selbstsichere Stimme.
Sie können die Gewichtigkeit der Stimme beeinflussen.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>richness</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="richness:85">Ich bin reich. Ich bin schön.
Deshalb rede ich laut und klar, mit einer Stimmgewalt von 85.</p>
<p style="richness:15">Ich bin arm. Ich bin häßlich.
Deshalb hab ich auch so eine dünne Stimme. Ihre Gewalt hat nur einen Wert von 15.</p>
</body></html>
Erläuterung:
Mit richness: können Sie die Stimmgewalt festlegen. Normalwert ist 50. Ein höherer Wert bedeutet eine gewaltige, beherrschende Stimme, ein niedriger Wert eine dünne, unsichere Stimme.
Sie können bestimmen, dass bei einem Textbereich alle darin vorkommenden Satzzeichen wie Punkt, Komma, Ausrufezeichen usw. explizit genannt werden, also z.B. "Dies ist ein Satz - Punkt".
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>speak-punctuation</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="speak-punctuation:code">Hören Sie mal! - Oder sind Sie schwerhörig?
Hier - und nur hier gibt's was zusätzlich auf die Ohren:
nämlich exklusiv ausgesuchte, explizit ausgesprochene Satzzeichen.</p>
</body></html>
Erläuterung:
Mit speak-punctuation: haben Sie Einfluss auf die Aussprache von Satzzeichen. Folgende Angaben sind erlaubt:
code = Satzzeichen mit aussprechen.
none = Satzzeichen nicht mit aussprechen (Normaleinstellung).
Sie können bestimmen, in welcher Form größere Zahlen, z.B. 4256, ausgesprochen werden.
Beispiel:
Anzeigebeispiel: So sieht's aus und hört sich's an
<html><head><title>speak-numeral</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p>Rosi's Telefonnummer lautet <b style="speak-numeral:digits">32168</b>.</p>
<p>Mit ihrem Gewerbe hat Rosi schon <b style="speak-numeral:continuous">32168</b> Dollar verdient.</p>
</body></html>
Erläuterung:
Mit speak-numeral: können Sie festlegen, wie Zahlenfolgen ausgesprochen werden. Erlaubt sind folgende Angaben:
digits = ziffernweise, 456 also etwa als "vier fünf-sechs".
continuous = als Zahl, 456 also etwa "vierhundertsechsundfünfzig".
© 2005 
Impressum
SELFHTML/Navigationshilfen 
volume (Lautstärke)
