Voice Reader Web 20: Help and Instructions

Table of contents

• Player Versions Comparison
• Player Form
• Player Integration
• Player Colour
• Player Size (Scale)
• Icon Form
• Language for Icon and User Interface (UI))
• Icon Colour
• Custom Icon
• Starting the Player via self-defined Links
• Reading Language
• How to proceed for reading Multilingual Content on Webpages
• Voice
• Advanced Speaker Selection
• Text Code of the Website
• Speed of the Voice Output
• Pitch of the Voice Output
• Simple Parsing
• Restricting Voice Output to Elements (by Element Name)
• Restricting Voice Output to Elements (by Element Class)
• Restricting Voice Output to Elements (by Element ID)
• Excluding Elements from Voice Output (by Element Name)
• Excluding Elements from Voice Output (by Element Class)
• Excluding Elements from Voice Output (by Element ID)
• Handling of HTML Line Breaks (<br>-tags)
• Spell Markup
• Pronunciation Modification
• Highlighting Text
• Highlighting Words
• Visual Text Enlargement
• Keyboard Shortcuts
• Read Selection
• Your Voice Reader Web 20 Snippet
• Hosting the Script on your own Server
• Several Players on the same Page
• Black and White Mode
• Debug Mode
• Encoding of Non-UTF-8-Websites
• Defining the Z-Index
• Player Starting Control: on demand / instantly
• Dynamic loading of the Script
• List of all Sample Pages

Player Versions Comparison

This table indicates the differences between the Voice Reader Web Player versions. Depending on the selection and configuration the following features are available:

Feature	Voice Reader Web 15	Voice Reader Web 20 - Standard Configuration	Voice Reader Web 20 - Dynamic Configuration
ARIA Accessibility		✔	✔
Dynamic loading of the script			✔
Support for several players on the same page	✔	✔
Player Loading Control: Loading on demand/ instantly (by default)		✔	✔
Custom highlighting / no highlighting (by default)		✔	✔
Highlighting the word while reading		✔	✔
Custom subtitles / no subtitles (by default)		✔	✔
Option for reading multilingual content on webpages		✔	✔
Spell Markup		✔	✔
Advanced selection of a specific speaker voice		✔	✔

Player Form

You can choose between our Mini or Rich Player. The Mini Player requires minimal space on your website and is especially interesting for websites that are mostly accessed from mobile devices. The Rich Player requires more space but also offers more features.

Mini	This is the appearance of the Mini Player. For the configuration in this example the color "blue” has been selected.
Rich	This is the appearance of the Rich Player. It provides more features. For the configuration in this example the color "blue” has been selected.

Player Integration

You can choose out of three types of players. To test the performance of each player just click the corresponding read-icon below:

Embedded player	Hovering player	Pop-up player
To start the player please click on the icon	To start the player please click on the icon	To start the player please click on the icon
This type of player will appear on your website exactly where you will paste the generated JavaScript code. It will thus become a part of the website.	After clicking on the 'Read' icon, a hovering player will appear which can be placed and moved around everywhere on the page.	Depending on the browser you use, the player will appear either in a new window or in a new tab.
Sample pages: embedded_mini_blue.html embedded_rich_blue.html embedded_mini_black.html embedded_rich_black.html embedded_mini_grey.html embedded_rich_grey.html	Sample pages: hover_mini_blue.html hover_rich_blue.html hover_mini_black.html hover_rich_black.html hover_mini_grey.html hover_rich_grey.html	Sample pages: 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 Color

Select the player color here.
The color will be defined with Javascript variable "vrweb_player_color" and with the help of Skin-Stylesheet:

Sample pages:

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

Player Size (Scale)

The size of the player can be adjusted with the corresponding parameter "vrweb_scale_player".

Sample pages:

hover_rich_black_scale.html

Icon Form

Here you can select which read icon will be displayed on your website. When visitors of your site click on it, they will hear the natural-sounding voice output of the text.

Sample pages:

icon_form_00.html
icon_form_01.html
icon_form_02.html
icon_form_03.html
icon_form_04.html
icon_form_05.html

Language for Icon and User Interface (UI)

Here you can select in which language the Voice Reader Web 20 Icon and the User Interface (UI) should appear on your website. The language of the icon also defines the language of the Voice Reader Web 20 audio player.

Sample pages:

embedded_rich_black_german.html
embedded_rich_black_english.html

Icon Color

Select the color of the icon here. The icon will then appear in this color on your website.

Sample pages:

hover_rich_black.html
hover_rich_blue.html
hover_rich_grey.html
hover_rich_red.html

Custom Icon

The text field "Custom Icon" enables you to create an individual "Read"" icon.

Using an Individual Image

If you want to use your own image, follow these steps:

1. Create your individual image for the "Read" icon.
2. Save this image on your webserver. Be sure that it has public access.
3. Insert the URL leading to the image into the "Custom Icon" field.
4. Please ensure that this URL starts with »http://«.

Example: http://www.mypage.com/read_icon.png

Sample pages:

custom_icon_url.html
own_icon.html
embedded_mini_black_no_icon.html

Using Individual HTML Code

You can further individualize your read icon by using your own HTML code. This HTML code will be inserted into the link instead of the image.

If you want to use this option, follow these steps:

1. First, create the HTML code that you want to use as your read icon.
2. If your code uses additional images or stylesheets, make sure that they are accessible to the public.
3. Copy your HTML code into the text field "Custom Icon".
4. Keep in mind that your code should not contain any <a>-elements, as the code itself stays inside an <a>-element.

Example: If you enter the following text in the text field for "Custom Icon",

you will create the following read icon on the web page:

Sample page:

custom_icon_snippet.html

Starting the Player via self-defined Links

Here it is defined that the reading will be starting when the user is clicking onto a link.

Sample pages:

own_icons_and_content.html
embedded_rich_black_function_call.html
hover_rich_black_function_call.html

Reading Language

Select the reading language of your website here. This is the language that Voice Reader Web 20 will use for generating voice output. The language needs to be enabled in your Voice Reader Web 20 User Account.

Sample pages:

embedded_rich_black_german.html
embedded_rich_black_english.html

How to proceed for reading Multilingual Content

Voice Reader Web 20 supports the reading of multilingual content on a webpage. The reading language of the particular HTML-tags on the webpage can be specified via the HTML-attribute "lang", for example "<h2 lang='en-gb'>", "<p lang='es-es'>", etc.

Sample page:

hover_rich_blue_multilingual.html

Voice

Here you can select the desired voice and gender for the voice output. In many languages female and also male voices are available.

Sample pages:

embedded_rich_black_male.html
embedded_rich_black_female.html

Advanced Speaker Selection

The advanced speaker selection enables you to select as specific speaker name for the voice output.

Sample page:

hover_rich_blue_multilingual.html

Text Code of the Website

For the correct interpretation of a webpage, its text coding needs to be considered. Voice Reader Web 20 recognizes this parameter automatically. So it doesn't need to be selected manually anymore.

Speed of Voice Output

This is where you define the speed of the voice output as a percentage. The standard speed is 100, while values can be selected between 50 (slow) and 150 (fast).

Sample pages:

embedded_rich_black_speed.html

Pitch of Voice Output

This setting defines the pitch of the voice as a percentage. 100 represents the standard pitch. Values between 50 (low) and 150 (high) are available.

Sample pages:

embedded_rich_black_pitch.html

Simple Parsing

If the "Simple Parsing" option is activated, the voice output includes only the text between <read> tags. Your website is thus not parsed - all non-text content between the tags <read> and </read> is removed, with the rest sent for voice output. This option is designed for pages with non-standard HTML code, which the Voice Reader Web Server HTML parser is unable to process. Please note that the parameters for restricting and excluding elements (i.e. all other HTML parser settings) are ignored when the "Simple Parsing" option is selected. Whatever the case, you should first attempt to parse your HTML pages as standard, by deactivating "Simple Parsing" and selecting the appropriate HTML parameters for restricting and excluding elements.

Example

Sample Pages:

hover_rich_simple_parse.html
hover_rich_blue_simple_parse.html

Restricting Voice Output to Elements (by Element Name)

Ordinarily, the entire text of a website is read aloud. However, you can restrict voice output to certain HTML elements, and for example, only have text appearing within <p> elements read out. Enter the name of the element in the field (e.g. "p" or "div"). You can also incorporate your own elements within your website (e.g. "<read>") and then enter the name of this element in the field (e.g. "read"). Please note however, that your website may no longer correspond to the X(HTML) standard. You can also limit voice output to elements from a certain class (see "Restricting voice output to elements (by element class)" Furthermore, you can enter combinations of element names and classes, so that, for example, text is only read from <div> elements and those with the "read" attribute. Multiple element names are separated using a comma (e.g. readelementsName = “h1,div,p”).

Example

Restricting Voice Output to Elements (by Element Class)

Ordinarily, the entire text of a website is read aloud. However, you can limit voice output to HTML elements with a certain class attribute (e.g. only text between <div class="read"> elements). Enter the name of the attribute in this field (e.g. “read”). If you do not give an element name, all elements with the attribute in question are read out (e.g. <p class="read"> elements and <div class="read"> elements). Combinations of element names and classes can also be entered, so that, for example, text is only read from <div> elements and those with the "read" class attribute (see also "Restricting voice output to elements (by element name)") Multiple element names are separated using a comma (e.g. readelementsClass = “read,title,headline”).

Example

Restricting Voice Output to Elements (by Element ID)

Ordinarilly the complete text of a website is read by Voice Reader Web 20, but you can restrict reading to elements with specific ids ("id"-attribute).

You just have to type these ids into the field "Element id" (separated by commas; e.g. "title,info_field,result") to restict Voice Reader Web 20 reading to the according elements.

Example

Sample Page:

embedded_hover_popup_rich.html

Excluding Elements from Voice Output (by Element Name)

This parameter has the opposite effect of the readelementsName parameter, as it specifies that all HTML elements with a certain name are excluded from voice output. Note that the "exclelement" parameter has priority over the "readelement" parameter. Thus all HTML elements with a certain name or class are excluded, before the remaining elements are selected according to the "readelementName" and "readelementClass" instructions. Multiple element names are separated by commas (e.g. exclelementsName = “h1,div,p”).

Example

Excluding Elements from Voice Output (by Element Class)

This parameter has the opposite effect of the readelementsClass parameter, as it specifies that all HTML elements of a certain class are excluded from voice output. Note that the "exclelement" parameter has priority over the "readelement" parameter. Thus all HTML elements with a certain name or class are excluded, before the remaining elements are selected according to the "readelementName" and "readelementClass" instructions. Multiple element names are separated using a comma (e.g. exclelementsClass = "noread,title,headline").

Example

Excluding Elements from Voice Output (by Element ID)

This parameter causes the opposite of the parameter readelementsid: Ordinarily Voice Reader Web 20 reads the complete text of a website, but by excluding elements with specific ids Voice Reader Web 20 reads any elements' contents but those defined in "Element id".

Example

Handling of HTML Line Breaks (<br>-tags)

If you want Voice Reader Web 20 to interpret HTML line breaks as ends of sentence, please select the option "Handle as End of Sentence". Line breaks created with the HTML tag <br> will be covered exclusively. Alternatively you can define the corresponding parameter in the JavaScript snippet by using the following variable:
vrweb_brhandling='1';

Sample pages:

embedded_rich_black_brhandling.html
embedded_rich_black_no_brhandling.html

Spell Markup

If Voice Reader Web 20 should spell letters instead of reading them as a word (e.g. zip codes, phone numbers, abbreviations etc.), please use the command <spell></spell>. It provokes that Voice Reader Web will read the text in a letter-by-letter/digit-by-digit mode.

Additionally, you can define for this command your preferred spelling speed. The values "normal" and "slow" can be chosen for this optional attribute speed. Please see the following example.

• normal: (default) Spells the surrounded text without breaks. This is the default speed if the speed attribute isn't passed to the command.
• slow: Interrupts the spelled letters by short breaks.

Attention: The command <spell></spell> is designed only for short phrases. Therefore its start as well as its end tag have to be written into the same line of source code.

Example

Pronunciation Hints

If Voice Reader Web 20 is meant to pronounce a phrase in another way than written or desired, then usually changes in the pronunciation dictionary would be necessary. With the command <pronounce like=""></pronounce> the same effect can be achieved without changing dictionaries. In this case like is a mandatory attribute which has to contain the text meant to be read instead of the surrounded one. Phonetic alphabets aren't supported.

The behavior described above can be also achieved by using the tags <span data-vrweb-pronounce = ""></span>. The attribute data-vrweb-pronounce corresponds with the attribute like from above.

Attention: <pronounce like=""></pronounce> (as well as <spell></spell>) is designed only for short phrases. For that its start and end tag have to be located in the same line of source code.

Example

Sample Page:

hover_rich_simple_parse.html
hover_rich_blue_pronounce.html
hover_rich_blue_span_pronounce.html
embedded_rich_black_pronounce.html
embedded_rich_black_span_pronounce.html

Highlighting Text

If you want that the text - which is currently read aloud - will be highlighted, please enable this feature.
You can also enable custom highlighting for your webpage. To do this, you need to define an own class, in which you can describe the highlighting parameters.

Sample Pages:

embedded_rich_black_highlighting.html
embedded_hover_popup_rich_custom_highlight.html

For to disable the highlighting of that part of the text which is currently read aloud, please see the example below.

Sample Page:

embedded_hover_popup_rich_no_highlight.html

Highlighting Words

If you want that the word - which is currently read aloud - will be highlighted, please enable this feature. It can be enabled along with the highlighting of the sentences.

Sample Page:

embedded_rich_black_highlight_words.html

Visual Text Enlargement

If you want that the text - which is currently read aloud - will be displayed enlarged at the bottom of the web site window, please enable this feature. You can also enable custom subtitles for your webpage.

Sample Pages:

embedded_rich_black_subtitles.html
embedded_hover_popup_rich_custom_subtitles.html

For to disable the dispalying of subtitles for that part of the text which is currently read aloud, please see the example below.

Sample Page:

embedded_hover_popup_rich_no_subtitles.html

Keyboard Shortcuts

For a better usability of your website you can offer your website visitors the possibility to control the player with keyboard shortcuts like 'Play', 'Pause', 'Stop', 'Forward', 'Backward', 'Close Player'. In the configuration menu you can already find a selection of keyboard shortcuts. To change them, you can simply overwrite them.

Just type a letter into the textfield of the chosen function in order to be able to execute this function with the chosen keyboard combination. In addition you can complement the player control by using keyboard modifiers Ctrl, Shift and Alt. With the reset fumction the default settings will be restored.

Sample Pages:

embedded_rich_black_shortcuts.html

Read Selection

If you choose the option 'Enable Reading of the Selected Text' visitors of your website will be able to decide which parts of the text will be read out. After having marked the text to be read out and clicked on the read icon, the player will start reading the marked text.

You can try it right here on this help page.

Sample Pages:

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

Your Voice Reader Web 20 Snippet

In this field the HTML code which has to be copied into your webpage appears. Insert it at the exact position of your HTML content where you want the Voice Reader Web 20 link (icon and text) should appear.
To copy the code, simply click in the area beneath "Your Voice Reader Web 20 Snippet". The entire text will be highlighted (if this does not happen automatically, press "ctrl+A" to select it all manually). You can then copy and paste the code into the HTML code of your webpage.

Hosting the Script on your Own Server

If you want your website to be free of any external resources, you can host all the required resources on your own server.

It is quite simple. Please follow these steps:

1. Download the ZIP-file http://vrweb15.linguatec.org/VoiceReaderWeb15User/player20.zip and unzip it on your own server along with its subdirectories. The ZIP-file contains all the required scripts, images and CSS-files.
2. Change the path to the CSS and JavaScript files in your Voice Reader Web code snippet for your read icon and player.

Example

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

Several Players on the same Page

It is possible to use several players on the same webpage. In the following second and third sample the implementation is examplarily shown for to allow the user to read selected text. Attention: this feature is only available when you don't use the dynamic loading of the player script.

Sample Pages:

own_icon.html
embedded_marked_rich_black.html
embedded_rich_black_selection.html

Black and White Mode

In case that black and white mode on the webpage should be supported, please use the additional parameter "vrweb_player_style = 'img';" and the varying CSS file name in your Voice Reader Web 20 snippet.

Sample Page:

embedded_mini_black_img.html

Debug Mode

If the debug mode is activated you can follow the parsing and the reading of the text in real time. The debug mode can be activated by using the parameter "vrweb_debug = '1';". Thereby the individual sentences will be highlighted on the webpage and a detailed output in the console will be displayed.

Sample Page:

embedded_rich_black.html
embedded_rich_black_iso-latin.html

Encoding of Non-UFT-8-Websites

For the correct interpretation of a webpage, its text coding needs to be considered. In case that your website is not encoded in UTF-8, its encoding has to be defined in the meta tag. In the following example the ISO-8859-1 encoding is used.

Sample Page:

embedded_rich_black_iso-latin.html

Defining the Z-Index

The z-order of the player is determined by the defining of the z-index in the stylesheet of the div-element "vrweb_player_main". The following example shows the behavior of the elements with different z-indices. As the player is defined in this example with the z-index 400, it is hidden behind the two colored rectangles with the z-index 500 and 1000 and is topping the two rectangles with the z-index 10 and 100. (Move the player over the different rectangles to follow the behavior.)

Sample Page:

z-index_test.html

Player Starting Control: On Demand/ Instantly (default)

If you want the player to be started on demand, please enable this feature. The player will not start instantly, but only when the "Play" button is clicked.

Sample Page:

embedded_rich_black_no_instant_start.html

Dynamic Loading of the Script

You can use this feature, if you have only one player on your webpage. It allows to load the script of the player only when the webpage visitor has clicked onto the player icon (the script will not be loaded generally after the webpage has been loaded). To enable this functionality, you need to create an additional script and create a placeholder for the player icon, which looks exactly like the player icon that you use on your webpage (please see the following example).

Sample Page:

hover_rich_load_dynamically.html