Voice Reader Web 20: Hilfe und Anleitungen
Inhalt
- Player Versionsvergleich
- Player Stil
- Player Integration
- Player Farbe
- Playergröße
- Icon Form
- Sprache für Icon und User Interface (UI)
- Icon Farbe
- Eigenes Icon
- Start des Players über selbst definierte Links
- Vorlesesprache
- Vorlesen mehrsprachiger Webseiteninhalte
- Stimme
- Erweiterte Sprecherauswahl
- Kodierung der Webseitentexte
- Vorlesegeschwindigkeit
- Tonhöhe
- Einfaches Parsen
- Vorlesen einschränken auf Elemente (nach Element-Name)
- Vorlesen einschränken auf Elemente (nach Element-Klasse)
- Vorlesen einschränken auf Elemente (nach Element-ID)
- Elemente vom Vorlesen ausschließen (nach Element-Name)
- Elemente vom Vorlesen ausschließen (nach Element-Klasse)
- Elemente vom Vorlesen ausschließen (nach Element-ID)
- Behandlung von HTML-Zeilenumbrüchen (<br>-Tags)
- Markup für das Buchstabieren
- Aussprachehinweise
- Benutzerdefinierte Hervorhebung des Textes
- Wortweise Markierung
- Optische Textvergrößerung
- Tastaturkürzel
- Markierung vorlesen
- Ihr Voice Reader Web 20 Snippet
- Das Script auf dem eigenen Server hosten
- Mehrere Player auf derselben Webseite
- Schwarz-Weiß-Modus
- Debug-Modus
- Kodierung bei Nicht-UTF-8-Webseiten
- Z-Index definieren
- Ladekontrolle Player: bei Bedarf / sofort
- Dynamisches Laden des Skripts
- Alle Beispielseiten
Player Versionsvergleich
Diese Tabelle zeigt die Unterschiede der verschiedenen Voice Reader Web Player Versionen. Je nach Konfiguration und Auswahl stehen die genannten Features zur Verfügung:
Features und Auswahlmöglichkeiten | Voice Reader Web 15 | Voice Reader Web 20 - Standardkonfiguration | Voice Reader Web 20 - Dynamische Konfiguration |
---|---|---|---|
ARIA Unterstützung (Barrierefreiheit) | ✔ | ✔ | |
Dynamisches Laden des Skripts | ✔ | ||
Unterstützung mehrerer Player auf derselben Seite | ✔ | ✔ | |
Ladekontrolle Player: Laden bei Bedarf / sofort (standardmäßig) | ✔ | ✔ | |
Benutzerdefinierte Markierung / keine Markierung (standardmäßig) | ✔ | ✔ | |
Wortweise Markierung beim Vorlesen | ✔ | ✔ | |
Optische Textvergrößerung / keine Textvergrößerung (standardmäßig) | ✔ | ✔ | |
Vorleseunterstützung für mehrsprachige Webseiteninhalte | ✔ | ✔ | |
Markup für das Buchstabieren | ✔ | ✔ | |
Erweiterte Auswahlmöglichkeit einer Sprecherstimme | ✔ | ✔ |
Player Stil
Sie können zwischen den Stilen "Rich" und "Mini" wählen. Der Mini Player benötigt minimalen Platz auf Ihrer Webseite und ist insbesondere für Webseiten interessant, die größtenteils von mobilen Geräten aus aufgerufen werden. Der Rich Player bietet dagegen mehr Funktionen.
Mini | So sieht der Mini Player aus. Hier wurde in der Konfiguration des Players die Farbe "blau" gewählt. |
Rich | So sieht der Rich Player aus. Es wurde bei diesem Beispiel die Farbe "blau" gewählt. |
Player Integration
Der Player kann auf drei verschiedene Arten in Ihre Seite eingebunden werden. Bitte klicken Sie auf die folgenden Vorlese-Icons, um die zugehörige Ansicht zu sehen:
Eingebettet: | Schwebend: | Als Pop-up: |
---|---|---|
Klicken Sie bitte auf das Vorlese-Icon, damit der zugehörige Player angezeigt wird. |
Klicken Sie bitte auf das Vorlese-Icon, damit der zugehörige Player angezeigt wird. |
Klicken Sie bitte auf das Vorlese-Icon, damit der zugehörige Player angezeigt wird. |
Hier wird der Player auf der Seite genau an der Stelle eingebettet, an der Sie den JavaScript-Code eingefügt haben. Er wird somit Bestandteil der Webseite. | Beim Klicken auf das Vorlese-Icon erscheint ein über dem Webseiten-Inhalt schwebender Player. Dieser kann auf der Seite beliebig verschoben und platziert werden. | Beim Klicken auf das Vorlese-Icon des Pop-up Players öffnet sich, je nach verwendetem Browser, ein neues Fenster oder ein neuer |
Beispielseiten:embedded_mini_blue.htmlembedded_rich_blue.html embedded_mini_black.html embedded_rich_black.html embedded_mini_grey.html embedded_rich_grey.html |
Beispielseiten:hover_mini_blue.htmlhover_rich_blue.html hover_mini_black.html hover_rich_black.html hover_mini_grey.html hover_rich_grey.html |
Beispielseiten:popup_mini_blue.htmlpopup_rich_blue.html popup_mini_black.html popup_rich_black.html popup_mini_grey.html popup_rich_grey.html |
Player Farbe
Wählen Sie hier die Farbe für den Player aus, in der er auf Ihrer Webseite erscheinen soll.
Die Player Farbe wird durch die JavaScript Variable "vrweb_player_color" und durch einen Skin-Stylesheet definiert:
Oder
<link href="http://vrweb.../player/styles/blue/player_skin.css" rel="stylesheet" type="text/css" />
Beispielseiten:
embedded_rich_black.html
embedded_rich_blue.html
embedded_rich_grey.html
hover_rich_black.html
hover_rich_blue.html
hover_rich_grey.html
hover_rich_red.html
popup_rich_black.html
popup_rich_blue.html
popup_rich_grey.html
Playergröße
Die Größe des Players kann mit dem zusätzlichen Parameter "vrweb_scale_player" geändert werden.
Beispielseiten:
Icon Form auswählen
Hier können Sie das Vorlese-Icon auswählen, das auf Ihrer Webseite angezeigt werden soll. Per Klick auf das Icon wird
sich später der Benutzer Ihre Webseite vorlesen lassen können.
Beispielseiten:
icon_form_00.html
icon_form_01.html
icon_form_02.html
icon_form_03.html
icon_form_04.html
icon_form_05.html
Sprache für Icon und User Interface (UI)
Wählen Sie hier die Sprache für das Vorlese-Icon. Die Sprachauswahl legt an dieser Stelle außerdem die Sprache der Benutzeroberfläche des Players fest.
Beispielseiten:
embedded_rich_black_german.html
embedded_rich_black_english.html
Icon Farbe
Wählen Sie hier die Farbe für das Vorlese-Icon aus, in der es auf Ihrer Webseite erscheinen soll.
Beispielseiten:
hover_rich_black.html
hover_rich_blue.html
hover_rich_grey.html
hover_rich_red.html
Eigenes Icon
In das Textfeld "Eigenes Icon" können Sie die URL zur Ihrem eigenen Vorlese-Icon eintragen.
Individuelle Grafik verwenden
Wenn Sie eine eigene Grafik verwenden möchten, gehen Sie bitte wie folgt vor:
- Erstellen Sie eine Grafik für Ihr Vorlese-Icon.
- Speichern Sie diese Grafik auf Ihrem Web-Server, sodass sie öffentlich zugänglich ist.
- Die URL, die auf diese Grafik zeigt, geben Sie in das Eingabefeld "Eigenes Icon" ein.
- Bitte beachten Sie, dass diese URL mit »http://« beginnen muss.
Beispiel: http://www.mypage.com/read_icon.png
Beispielseiten:
custom_icon_url.html
own_icon.html
embedded_mini_black_no_icon.html
Individuelles HTML-Snippet verwenden
Sie können das Vorlese-Icon weiter individualisieren, indem Sie ein eigenes HTML-Snippet verwenden. Anstelle einer Grafik wird dann dieses Snippet in den Vorlese-Link eingefügt.
Wenn Sie diese Möglichkeit nutzen wollen, gehen Sie bitte folgendermaßen vor:
- Erstellen Sie zunächst ein HTML-Snippet, das Ihr Vorlese-Icon darstellt.
- Wenn das Snippet auf zusätzliche Ressourcen wie Grafiken oder Stylesheets zugreift, stellen Sie bitte sicher, dass diese Ressourcen öffentlich abrufbar sind.
- Kopieren Sie das Snippet in das Textfeld "Eigenes Icon".
- Bitte beachten Sie, dass Ihr Snippet keine weiteren <a>-Elemente beinhalten sollte, weil das Snippet selbst in ein <a>-Element eingesetzt wird.
Beispiel: Wenn Sie den folgenden Text in das Textfeld "Eigenes Icon" einfügen:
span#individual_example {color:green; background-color:#ccc; padding:5px;}
span#individual_example:hover {text-decoration:underline; background-color:transparent;}
</style>
<span id="individual_example">Individuelles Vorlese-Icon</span>
Beispielseiten:
Start des Players über selbst definierte Links
Hier wird definiert, ob der Player per Klick auf einen Link gestartet wird.
Beispielseiten:
own_icons_and_content.html
embedded_rich_black_function_call.html
hover_rich_black_function_call.html
Vorlese-Sprache
Wählen Sie hier die Sprache, in der Ihre Webseitentexte verfasst wurden. In dieser Sprache wird Voice Reader Web 20 Ihre Webseitentexte vorlesen, sofern diese Vorlese-Sprache freigeschaltet wurde.
Beispielseiten:
embedded_rich_black_german.html
embedded_rich_black_english.html
Vorlesen mehrsprachiger Webseiteninhalte
Mit Voice Reader Web 20 ist es möglich, mehrsprachige Inhalte auf einer Webseite jeweils in der entsprechenden Sprache vorlesen zu lassen. Spezifizieren Sie die Vorlesesprache für die einzelnen HTML-Tags mit Hilfe des HTML-Attributs „lang“, z.B. "<h2 lang='en-gb'>", "<p lang='es-es'>", usw.
Beispielseiten:
hover_rich_blue_multilingual.html
Stimme
Hier können Sie das Geschlecht Ihrer Vorlese-Stimme auswählen. In vielen Sprachen stehen sowohl männliche als auch weibliche Stimmen zur Verfügung.
Beispielseiten:
embedded_rich_black_male.html
embedded_rich_black_female.html
Erweiterte Sprecherauswahl
Über die erweiterte Sprecherauswahl haben Sie die Möglichkeit eine gezielte Sprecherstimme auszuwählen.
Beispielseiten:
hover_rich_blue_multilingual.html
Kodierung der Webseitentexte
Für die korrekte Interpretation eines Webseitentextes muss deren Kodierung berücksichtigt werden.
Dieser Parameter wird automatisch durch Voice Reader Web 20 korrekt erkannt und muss nicht mehr manuell ausgewählt werden.
Vorlesegeschwindigkeit
Hier legen Sie die Vorlesegeschwindigkeit in Prozent fest. Die Standardgeschwindigkeit entspricht dem Wert 100.
Zulässige Werte liegen zwischen 50 (langsam) und 150 (schnell).
Beispielseiten:
embedded_rich_black_speed.html
Tonhöhe
Diese Angabe bestimmt die Tonhöhe für die Vorlesestimme in Prozent. Der Wert 100 entspricht der Standardtonhöhe. Zulässig sind
Werte zwischen 50 (halbe Tonhöhe) und 150 (hohe Tonhöhe).
Beispielseiten:
embedded_rich_black_pitch.html
Einfaches Parsen
Wird die Option "Einfaches Parsen" aktiviert, dann werden nur Inhalte innerhalb von <read>-Tags vorgelesen. Ihre Webseite wird in diesem Fall nicht geparst, es werden lediglich alle Nicht-Text-Inhalte zwischen den Tags <read> und </read> entfernt und der verbliebene Inhalt an den Vorleser geschickt. Diese Option ist für Seiten gedacht, deren HTML-Code nicht dem Standard entspricht und die deshalb vom HTML-Parser des Voice Reader Web 20 Servers nicht verarbeitet werden können. Bitte beachten Sie, dass die Parameter für das Einschränken und Ausschließen von Elementen (d.h. alle sonstigen HTML-Parser-Einstellungen) nicht mehr funktionieren, sobald Sie die Option "Einfaches Parsen" aktivieren. Versuchen Sie Ihre HTML-Seiten auf jeden Fall zuerst standardmäßig zu parsen, indem Sie die Option "Einfaches Parsen" deaktivieren und die für Ihre Seite passenden HTML-Parameter für das Einschränken und Ausschließen von Elementen setzen.
Beispiel
<head>...</head>
<body>
<read>
<p>Dieser Text wird vom Voice Reader Web 20 vorgelesen,
weil er innerhalb der Tags 'read' steht.</p>
</read>
<p>Dieser Text wird nicht vorgelesen. </p>
</body>
</html>
Vorgelesen wird:
Dieser Text wird vom Voice Reader Web 20 vorgelesen, weil er innerhalb der Tags 'read' steht.
Beispielseiten:
hover_rich_simple_parse.html
hover_rich_blue_simple_parse.html
Vorlesen einschränken auf Elemente (nach Element-Name)
Normalerweise wird der gesamte Text einer Webseite vorgelesen. Sie können das Vorlesen jedoch auf bestimmte HTML-Elemente beschränken und beispielsweise nur Texte innerhalb von <p>-Elementen vorlesen lassen. Tragen Sie dazu den Namen der Elemente in das Feld ein (z.B. "p" oder "div"). Sie können außerdem eigene Elemente in Ihre Webseite einbauen (z.B. "<read>") und den Namen dieses Elements in das Feld eintragen (z.B. "read"). Beachten Sie aber, dass Ihre Webseite dann möglicherweise nicht mehr dem (X)HTML-Standard entspricht. Standardkonform können Sie das Vorlesen auf Elemente einer bestimmten Klasse beschränken (s. "Vorlesen einschränken auf Elemente (nach Elementklasse)"). Sie können außerdem Kombinationen von Elementname und -klasse angeben, so dass z.B. nur Text aus <div>-Elementen mit dem Attribut "read" vorgelesen werden. Mehrere Elementnamen trennen Sie bitte mit Komma (z.B. readelementsname = "h1,div,p").
Beispiel
Nach Einstellung, dass alles innerhalb von 'h1, div, p' vorgelesen wird:
<head>...</head>
<body>
<h1>Überschrift.</h1>
<p>Dieser Text wird vom Voice Reader Web 20 vorgelesen. Er liest
alles, was innerhalb von den Tags 'div', 'h1', 'p' steht.</p>
<div>Das hier wird auch vorgelesen.</div>
Dieser Text wird nicht vorgelesen.
</body>
</html>
Vorgelesen wird:
Überschrift.
Dieser Text wird vom Voice Reader Web 20 vorgelesen. Er liest alles, was innerhalb von den Tags 'div', 'h1', 'p' steht. Das hier wird auch vorgelesen.
Vorlesen einschränken auf Elemente (nach Element-Klasse)
Normalerweise wird der gesamte Text einer Webseite vorgelesen. Sie können das Vorlesen jedoch auf HTML-Elemente beschränken, die ein bestimmtes Klassenattribut haben (z.B. nur Text innerhalb von <div class="read">-Elementen). Tragen Sie dazu in dieses Feld den Namen des Attributs ein (z.B. "read"). Falls Sie keinen Elementnamen angeben, werden alle Elemente mit dem entsprechenden Attribut vorgelesen (also z.B. <p class="read">-Elemente und <div class="read">-Elemente). Sie können außerdem Kombinationen von Elementname und -klasse angeben, so dass z.B. nur Text aus <div>-Elementen mit dem Attribut "read" vorgelesen werden (s. auch "Vorlesen einschränken auf Elemente (nach Elementname)"). Mehrere Elementnamen trennen Sie bitte mit Komma (z.B. readelementsclass = "read,title,headline").
Beispiel
Nach Einstellung, dass alles innerhalb der Klassen "read" und "public" vorgelesen wird:
<head>...</head>
<body>
<h1 class="read">Überschrift.</h1>
<p class="read">Dieser Text wird vom Voice Reader Web 20 vorgelesen.
Er liest alles, was innerhalb von den Tags der Klasse "read"
und "public" steht.</p>
<p class="public">Das hier wird auch vorgelesen.</p>
<p>Dieser Text wird nicht vorgelesen.</p>
</body>
</html>
Vorgelesen wird:
Überschrift. Dieser Text wird vom Voice Reader Web 20 vorgelesen. Er liest alles, was innerhalb von Tags der Klasse "read" und "public" steht. Das hier wird auch vorgelesen.
Vorlesen einschränken auf Elemente (nach Element-ID)
Normalerweise wird der gesamte Text einer Webseite vorgelesen. Sie können das Vorlesen jedoch auf Elemente mit bestimmten IDs beschränken ("id"-Attribut).
Geben Sie hierfür einfach in das Feld "Element-ID" die entsprechenden IDs ein (durch Kommata voneinander getrennt; z.B. "title,info_field,result") und Voice Reader Web 20 beschränkt das Vorlesen auf die Inhalte der zugehörigen Elemente.
Beispiel
Inhalt von "Element-ID": "title,bottom"
<head>...</head>
<body>
<h1 id="title">Überschrift.</h1>
<p id="text">Dieser Text wird nicht von Voice Reader Web 20 vorgelesen, weil er keine gültige ID besitzt.</p>
<p id="bottom">Das hier wird auch vorgelesen.</p>
</body>
</html>
Vorgelesen wird:
Überschrift. Das hier wird auch vorgelesen.
Beispielseiten:
embedded_hover_popup_rich.htmlElemente vom Vorlesen ausschließen (nach Element-Name)
Dieser Parameter bewirkt das Gegenteil des Parameters readelementsname. Alle HTML-Elemente mit einem bestimmten Namen werden dabei vom Vorlesen ausgeschlossen. Beachten Sie bitte, dass die "exclelement"-Parameter Vorrang vor den "readelement"-Parametern haben. Es werden also zunächst HTML-Elemente mit einem bestimmten Namen oder mit einer bestimmten Klasse entfernt, bevor aus dem verbliebenen Inhalt Elemente entsprechend den "readelementName"- oder "readelementClass"-Parametern ausgewählt werden. Mehrere Elementnamen trennen Sie bitte mit Komma (z.B. exclelementsName = "h1,div,p").
Beispiel
Nach Einstellung, dass nur all das, was zwischen "h1", "p" steht, vorgelesen wird (also kein Vorlesen der Inhalte von "div"):
<head>...</head>
<body>
<h1>Überschrift.</h1>
<p>Dieser Text wird vom Voice Reader Web 20 vorgelesen. Er liest alles, was innerhalb von Tags "h1", "p" steht.</p>
<p>Das hier wird auch vorgelesen.</p>
<div>Dieser Text wird nicht vorgelesen.</div>
</body>
</html>
Vorgelesen wird:
Überschrift. Dieser Text wird vom Voice Reader Web 20 vorgelesen. Er liest alles, was innerhalb von den Tags 'h1', 'p' steht. Das hier wird auch vorgelesen.
Elemente vom Vorlesen ausschließen (nach Element-Klasse)
Dieser Parameter bewirkt das Gegenteil des Parameters readelementsclass, alle HTML-Elemente einer bestimmten Klasse werden dabei vom Vorlesen ausgeschlossen. Beachten Sie bitte, dass die "exclelement"-Parameter Vorrang vor den "readelement"-Parametern haben. Es werden also zunächst HTML-Elemente mit einem bestimmten Namen oder mit einer bestimmten Klasse entfernt, bevor aus dem verbliebenen Inhalt Elemente entsprechend den "readelementName"- oder "readelementClass"-Parametern ausgewählt werden. Mehrere Elementnamen trennen Sie bitte mit Komma (z.B. exclelementsClass = "noread,title,headline").
Beispiel
Nach Einstellung, dass alles, was innerhalb von "h1", "p" steht, vorgelesen wird, wenn diese Tags nicht der Klasse "dont_read" angehören:
<head>...</head>
<body>
<h1>Überschrift.</h1>
<p>Dieser Text wird vom Voice Reader Web 20 vorgelesen. Er liest alles,
was innerhalb von den Tags "h1", "p" steht.</p>
<p>Das hier wird auch vorgelesen.</p>
<p class="dont_read">Dieser Text wird nicht vorgelesen.</p>
</body>
</html>
Vorgelesen wird:
Überschrift. Dieser Text wird vom Voice Reader Web 20 vorgelesen. Er liest alles, was innerhalb von den Tags "h1", "p" steht. Das hier wird auch vorgelesen.
Elemente vom Vorlesen ausschließen (nach Element-ID)
Dieser Parameter bewirkt das Gegenteil des Parameters readelementsid: Normalerweise liest Voice Reader Web 20 den kompletten Inhalt einer Webseite vor, doch mit dem Ausschließen von Elementen mit einer bestimmten ID, werden alle bis auf diese Inhalte vorgelesen.
Beispiel
"Element-ID" beinhaltet folgende IDs: "title,bottom"
<head>...</head>
<body>
<h1 id="title">Überschrift.</h1>
<p id="text">Dieser Text wird nun von Voice Reader Web 20 vorgelesen, weil sich seine ID nicht in der Ausschlussliste befindet.</p>
<p id="bottom">Das hier wird nicht vorgelesen.</p>
</body>
</html>
Vorgelesen wird:
Dieser Text wird nun von Voice Reader Web 20 vorgelesen, weil sich seine ID nicht in der Ausschlussliste befindet.
Behandlung von HTML-Zeilenumbrüchen (<br>-Tags)
Wenn Sie möchten, dass Voice Reader Web 20 HTML-Zeilenumbrüche wie ein Satzende interpretiert, können Sie dies erreichen, indem Sie
die Option „Satzende“ auswählen. Es werden ausschließlich Zeilenumbrüche erfasst, die durch das HTML-Tag <br> erzeugt wurden.
Alternativ können Sie im JavaScript Snippet diesen Parameter über folgende Variable definieren:
vrweb_brhandling='1';
Beispielseiten:
embedded_rich_black_brhandling.html
embedded_rich_black_no_brhandling.html
Markup für das Buchstabieren
In Fällen, in denen Voice Reader Web 20 eine Zeichenfolge buchstabiert vorlesen soll (z.B. Postleitzahlen, Telefonnummern, Abkürzungen usw.), kann dies mit Hilfe des Befehls <spell></spell> erreicht werden. Der umschlossene Text wird dann buchstaben- bzw. zahlenweise gelesen.
Der Befehl unterstützt optional die Angabe einer bevorzugten Buchstabiergeschwindigkeit. Diese kann über das Attribut speed angegeben werden. Die gültigen Werte hierfür sind "normal" und "slow", siehe folgendes Beispiel:
- normal: (Standard) Buchstabiert den umschlossenen Text ohne Sprechpausen. Wird das Attribut nicht angegeben, ist diese Geschwindigkeit der Standardwert.
- slow: Buchstabiert den umschlossenen Text mit kurzen Sprechpausen zwischen den einzelnen Zeichen.
Bitte beachten Sie: Der Befehl <spell></spell> ist nur für kurze Phrasen ausgelegt. Sowohl Start- als auch End-Tag müssen daher in derselben Code-Zeile stehen.
Beispiel
2: <head>...</head>↵
3: <body>↵
4: <p>Bei Fragen rufen Sie bitte unsere Zentrale unter↵
5: <spell speed="slow">089 / 89 666 4 - 0</spell> an.</p>↵
6: </body>↵
7: </html>
Vorgelesen wird:
Bei Fragen rufen Sie bitte unsere Zentrale unter [Pause] null [Pause] acht [Pause] neun [Pause] Schrägstrich [Pause] acht [Pause] neun [Pause] sechs [Pause] sechs [Pause] sechs [Pause] vier [Pause] Bindestrich [Pause] null [Pause] an.
Aussprachehinweise
Soll eine Textphrase anders als geschrieben vorgelesen werden oder wird sie von Voice Reader Web 20 anders als gewünscht gelesen, ist normalerweise eine Wörtebuchänderung notwendig. Mit dem Befehl <pronounce like=""></pronounce> kann dies auch lokal ohne Wörterbuchänderung erreicht werden. Das unbedingt mit anzugebende Attribut like enthält dabei den Text, der anstelle der umschlossenen Phrase vorgelesen werden soll. Phonetische Alphabete werden dabei nicht unterstützt.
Alternativ kann das oben beschriebene Verhalten auch mit dem Befehl <span data-vrweb-pronounce=""></span> erreicht werden. Hierbei entspricht das Attribut data-vrweb-pronounce dem Attribut like von oben.
Bitte beachten Sie: Im Befehl <pronounce like=""></pronounce> dürfen nur kurze Phrasen verwendet werden. HTML-Tags dürfen nicht enthalten sein.
Beispiel
2: <head>...</head>↵
3: <body>↵
4: <p>Bei weiteren Fragen zu <pronounce like="Voice Reader">VR</pronounce> Web↵15
5: rufen Sie bitte unsere Zentrale unter↵
6: <pronounce like=", 0 8 9, 89, 666, 4, Durchwahl 0,">089 / 89 666 4 - 0</pronounce> an.</p>↵
7: </body>↵
8: </html>
Vorgelesen wird:
Bei weiteren Fragen zu Voice Reader Web 20 rufen Sie bitte unsere Zentrale unter null [Pause] acht [Pause] neun [Pause] neunundachtzig [Pause] sechshundertsechsundsechzig [Pause] vier [Pause] Durchwahl null [Pause] an.
Beispielseiten:
hover_rich_blue_pronounce.html
hover_rich_blue_span_pronounce.html
embedded_rich_black_pronounce.html
embedded_rich_black_span_pronounce.html
Benutzerdefinierte Hervorhebung des Textes
Hier können Sie für das Hervorheben des gerade vorgelesenen Textes eine eigene Klasse angeben, die Sie auf Ihrer Webseite definieren müssen.
Beispielseiten:
embedded_rich_black_custom_highlighting.html
embedded_rich_black_no_highlighting.html
embedded_rich_black_img.html
Wortweise Markierung
Bitte aktivieren Sie diese Option, wenn das aktuell vorgelesene Wort im Text zusätzlich optisch hervorgehoben werden soll. Diese Funktion kann zusammen mit der optischen Markierung von Sätzen aktiviert werden.
Beispielseite:
embedded_rich_black_highlight_words.html
Optische Textvergrößerung:
Wenn Sie möchten, dass der gerade vorgelesene Text am unteren Rand des Fensters für den Webseitenbesucher zusätzlich in groß angezeigt werden soll, aktivieren Sie diese Funktion.
Beispielseiten:
embedded_rich_black_subtitles.html
embedded_rich_black_custom_subtitles.html
Tastaturkürzel
Sie können den Besuchern Ihrer Webseite zusätzlichen Komfort durch Verwendung von Tastaturkürzeln zur Steuerung des Players anbieten. Zur Verfügung stehen Ihnen folgende Steuerungsmöglichkeiten: Vorlesen starten, Vorlesen unterbrechen, zwischen Wiedergabe und Pause umschalten, Vorlesen stoppen, einen Satz vorspringen, einen Satz zurückspringen, Player schließen. Wir haben Ihnen im Konfigurationsmenü bereits mögliche Tastenkombinationen vorgeschlagen, sollten Sie diese ändern wollen, überschreiben Sie einfach die eingegebenen Vorschläge.
Geben Sie dazu einfach einen Buchstaben in das Textfeld des betreffenden Befehls ein, um später im Voice Reader Web 20 Player auf Ihrer Webseite den Befehl mit ebendieser Taste ausführen zu können. Zusätzlich können Sie das Kommando mit einer Kombination der Modifikatortasten Strg, Umschalt und Alt versehen. Über die Funktion "Auf Standard zurücksetzen" erhalten Sie unsere Vorschläge zurück.
Beispielseiten:
embedded_rich_black_shortcuts.html
Markierung vorlesen
Wenn Sie die Option "Vorlesen von markiertem Text aktivieren" auswählen, können die Besucher Ihrer Webseite selbst bestimmen, welche Textabschnitte vorgelesen werden sollen. Hierfür muss vom Webseitenbesucher lediglich mit der Maus ein betreffender Textabschnitt markiert werden. Der Player liest diesen dann vor.
Probieren Sie es aus und markieren Sie einen Textabschnitt auf dieser Hilfeseite.
Beispielseiten:
marked_rich_grey.html
marked_rich_blue.html
marked_rich_black.html
marked_mini_black.html
marked_mini_blue.html
marked_mini_grey.html
embedded_marked_rich_black.html
embedded_rich_black_selection.html
Ihr Voice Reader Web 20 Snippet
In diesem Feld erscheint der HTML-Code, den Sie in Ihre HTML-Seite kopieren müssen. Kopieren Sie den Code genau an die Stelle,
wo der Voice Reader Web-Link (Icon und Text) erscheinen soll.
Um den Code zu kopieren, klicken Sie einfach in den Bereich unter "Snippet". Der gesamte Text wird nun markiert (sollte der Text nicht
automatisch markiert werden, dann setzen Sie die Markierung bitte mit "Strg+A"). Sie können den Code nun von hier per Copy-and-Paste
in den HTML-Code Ihrer Webseite kopieren.
Das Script auf dem eigenen Server hosten
Falls Sie keine externen Ressourcen in Ihre Webseite integrieren möchten, können Sie alle notwendigen Dateien auf einem eigenen Server hosten.
Gehen Sie für diesen Fall wie folgt vor:
- Laden Sie die ZIP-Datei http://vrweb15.linguatec.org/VoiceReaderWeb15User/player20.zip herunter und entpacken Sie diese auf ihrem Server zusammen mit den enthaltenen Unterverzeichnissen. Die ZIP-Datei beinhaltet alle notwendigen JavaScripte, Bilder und CSS-Dateien.
- Ändern Sie den Pfad zu den CSS- und JavaScript-Datei im Code Snippet für Ihr Vorlese-Icon und Player.
Beispiel
<link href="http://your_host_name/player20/styles/blue/player_skin.css" rel="stylesheet"/>
...
<script type="text/javascript" src="http://your_host_name/player20/scripts/readpremium20.js"></script>
Mehrere Player auf derselben Webseite
Es können mehrere Player auf derselben Webseite verwendet werden. Die Zweite und Dritte der folgenden Beispielseiten zeigen die Art und Weise der Implementierung, damit auch der vom Benutzer markierte Text vorgelesen wird.
Beispielseiten:
own_icon.html
embedded_marked_rich_black.html
embedded_rich_black_selection.html
Schwarz-Weiß-Modus
Falls auf Ihrer Webseite der Schwarz-Weiß-Modus unterstützt werden soll, verwenden Sie bitte den zusätzlichen Parameter "vrweb_player_style = 'img';" und den abweichenden CSS-Dateinamen in Ihrem Voice Reader Web 20 Snippet.
Beispielseiten:
Debug-Modus
Bei aktiviertem Debug-Modus können Sie das Lesen des Textes in Echtzeit verfolgen. Dies kann zu Analysezwecken hilfreich sein. Der Debug-Modus wird mit dem Parameter "vrweb_debug = '1';" aktiviert. Damit werden auf der Webseite die einzelne Sätze farbig hervorgehoben und eine detaillierte Ausgabe auf der Konsole aktiviert.
Beispielseiten:
embedded_rich_black.html
embedded_rich_black_iso-latin.html
Kodierung bei Nicht-UTF-8-Webseiten
Für die korrekte Interpretation eines Webseitentextes muss deren Kodierung berücksichtigt werden. Sofern Sie auf Ihrer Websete eine andere Kodierung als UTF-8 verwenden, muß diese Kodierung im Meta-Tag definiert werden. Im folgenden Beispiel wird die Kodierung ISO-8859-1 verwendet.
Beispielseiten:
embedded_rich_black_iso-latin.html
Z-Index definieren
Die Eigenschaft des Z-Indexes gibt an, in welcher Reihenfolge Elemente auf dem Ausgabemedium dargestellt werden. Durch die Definition des Z-Indexes im StyleSheet des DIV-Elementes "vrweb_player_main" wird die Z-Reihenfolge des Players bestimmt. Die folgende Beispielseite zeigt das Verhalten der Elemente mit unterschiedlichen Z-Indizes. Da der Player in diesem Beispiel mit dem Z-Index 400 definiert wurde, wird er von den beiden Farbflächen mit den Z-Indizes 500 und 1000 überlagert und liegt selber über den beiden Farbflächen mit den Z-Indizes 10 und 100. (Bewegen Sie den Player über die Farbflächen, um das Verhalten nachzuvollziehen.)
Beispielseiten:
Ladekontrolle Player: bei Bedarf / sofort (standardmäßig)
Bitte aktivieren Sie diese Funktion, wenn der Player nur auf Anfrage geladen werden soll. Der Player wird dann nicht sofort starten, sondern erst wenn die "Play"-Schaltfläche angeklickt wird.
Beispielseite:
embedded_rich_black_no_instant_start.html
Dynamisches Laden des Skripts
Sie können diese Funktion nutzen, wenn Sie nur einen Player auf Ihrer Webseite haben. Es erlaubt das Skript für den Player erst dann zu laden, wenn das Player-Icon angeklickt wurde (und nicht generell mit dem Laden der Webseite). Um diese Funktion aktivieren zu können, ist ein zusätzliches Skript und ein Platzhalter zu erzeugen (der identisch aussieht wie das Player Icon, welches auf der Webseite verwendet wird). Siehe folgende Beispielseite.