Voice Reader Web 15: Help and Instructions

Table of contents

• 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
• Multilingual Page
• Voice
• 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)
• Pronunciation Modification
• Custom Highlighting of Text
• Visual Text Enlargement
• Keyboard Shortcuts
• Read Selection
• Your Voice Reader Web 15 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
• List of all Sample Pages

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 15 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 15 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 a fully 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. Make sure 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 textfield "Custom Icon".
4. Keep in mind that your code should not contain any <a>-elements, as the code itself stays inside an <a>-element.

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 15 will use for generating voice output. The language needs to be enabled in your Voice Reader Web 15 User Account.

Sample pages:

embedded_rich_black_german.html
embedded_rich_black_english.html

Multilingual Page

Voice Reader Web 15 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

Text Code of the Website

For the correct interpretation of a webpage, its text coding needs to be considered. Voice Reader Web 15 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 15, 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 15 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 15 reads the complete text of a website, but by excluding elements with specific ids Voice Reader Web 15 reads any elements' contents but those defined in "Element id".

Example

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

If you want Voice Reader Web 15 to interpret HTML line breaks as ends of sentence, this can be obtained by selecting the option "Handle as End of Sentence". Line breaks created with the HTML tag <br> will be covered exclusively.

The option "Handle as Whitespace" is selected by default. In that mode HTML line breaks are converted to whitespaces to avoid binding two words separated by a line break which otherwise would be read together like one single word.

Sample pages:

embedded_rich_black_br.html

Pronunciation Hints

If Voice Reader Web 15 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

Custom Highlighting of Text

Here you can define an own class for the reading of the text, in which you can describe the highlighting parameters.

Sample Page:

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

Sample Pages:

embedded_rich_black_subtitles.html
embedded_rich_black_custom_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 15 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 15 link (icon and text) should appear.
To copy the code, simply click in the area beneath "Your Voice Reader Web 15 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

In case you want your website to be free of any external resources you can host the "readpremium15.js" script on your own server*.

It is quite simple. Please follow these steps:

1. Copy the whole source code of "readpremium15.js" into a text editor and save it locally on your computer.
2. Place the saved file into that directory on your server where you want the script to be accessed from later.
3. In the code snippet for your button change the url of the script to the new one.

Example

<script type="text/javascript" src="http://your_host_name/readpremium15.js"></script>

* Note however that if you use one of the standard buttons, it still will be loaded from the Linguatec server, even if you host the script yourself. In order to be completely free of any external recources we advice to create a custom icon of your own.

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.

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