This JS-file makes it really easy to add speech support to your website. As a workaround for Chrome Browser, the speech is stopped after every full stop. To enhance the quality of speech, several (mostly closing) HTML-Tags are converted to full stops - feel free to add your own by modifying the "text" variable.
Example
An example of what the library does (V1.0.0) can be found here.
Usage
The included index.html shows an implementation of the library.
1) Start/Stop Button
Add a custom class (here toggle-speak-stop
) to the start/stop button element, defined as the first argument of the initialization.
2) Text to Read
To define what text should be read, add the text-to-read
class to your paragraph or div. All HTML-Tags will be stripped from the string, so only the contained text will be read.
3) Initialization
Add this at the end of your HTML.
PZEasyWebSpeech(
"toggle-speak-stop", // the id of the start/stop element
"text-to-read", // the class name of which elements should be read
"fa-volume-up", // class added to start/stop element when starting speech
"fa-volume-off", // class added to start/stop element when ending speech
"hidden", // class added to start/stop in case browser does not support speech and start/stop should be hidden
"en-GB", // language eg.: "en-GB", "en-US", "de-DE", etc
1 // volume, 0 to 1
);