Voice Reader Web 20: Hilfe und Anleitungen

Inhalt


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 Mini Player
So sieht der Mini Player aus. Hier wurde in der Konfiguration des Players die Farbe "blau" gewählt.
Rich Rich Player
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 Tab. In diesem wird der Player angezeigt.

Beispielseiten:

embedded_mini_blue.html
embedded_rich_blue.html
embedded_mini_black.html
embedded_rich_black.html
embedded_mini_grey.html
embedded_rich_grey.html

Beispielseiten:

hover_mini_blue.html
hover_rich_blue.html
hover_mini_black.html
hover_rich_black.html
hover_mini_grey.html
hover_rich_grey.html

Beispielseiten:

popup_mini_blue.html
popup_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:

<link href="http://vrweb.../player/styles/black/player_skin.css" rel="stylesheet" type="text/css" />
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:

hover_rich_black_scale.html


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:

  1. Erstellen Sie eine Grafik für Ihr Vorlese-Icon.
  2. Speichern Sie diese Grafik auf Ihrem Web-Server, sodass sie öffentlich zugänglich ist.
  3. Die URL, die auf diese Grafik zeigt, geben Sie in das Eingabefeld "Eigenes Icon" ein.
  4. 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

Wenn Sie diese Möglichkeit nutzen wollen, gehen Sie bitte folgendermaßen vor:

  1. Erstellen Sie zunächst ein HTML-Snippet, das Ihr Vorlese-Icon darstellt.
  2. Wenn das Snippet auf zusätzliche Ressourcen wie Grafiken oder Stylesheets zugreift, stellen Sie bitte sicher, dass diese Ressourcen öffentlich abrufbar sind.
  3. Kopieren Sie das Snippet in das Textfeld "Eigenes Icon".
  4. 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:

<style type="text/css">
 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>
wird daraus folgendes Vorlese-Icon:
 

Beispielseiten:

custom_icon_snippet.html

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

<html>
 <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:


<html>
 <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:


<html>
 <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"


<html>
 <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.html

Elemente 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"):


<html>
 <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:


<html>
 <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"


<html>
 <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:

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

1: <html>↵
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

1: <html>↵
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:

  1. 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.
  2. Ä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:

embedded_mini_black_img.html


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:

z-index_test.html


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.

Beispielseite:

hover_rich_load_dynamically.html