An angular application where you can listen to any text you provide, it can be a static text, pdf file, or text inside an input field.

The application can be used as a standalone application or integrate it into your existing applications.

You will find all the needed examples covering all the application features. Easy to use speech directive, where you have only to add a tag to your elements.

It provides many options to control the speech, you can control the volume, rate, pitch, and the voice. In addition, you can play, pause, resume, and cancel the speech.

ATS Demo

Technical documentation

• Volume: the volume of the speech, default 1.
• Rate: the rate of the speech, default 1.
• Pitch: the pitch of the speech, default 1.
• Voice: the voice to use, default is chosen by your browser if not provided
• Lang: the language of the speech, default is determined by your browser if not provided.

• Giving a Promise-based API. The initialize method gets resolved once voices are loaded, and the speak method gets resolved once the full text has been spoken.
• Handling the fact that Chrome loads voices in an asynchronous manner when other browsers don't, a listener gets triggered when voices change in all browsers.
• Handling some quirks and bugs of IOS/android devices and some chrome/firefox versions.
• Splitting sentences into several speeches to make it sound more natural, especially for older versions of Chrome, where you can disable this feature.
• Throwing specific exceptions: explicit exceptions will be thrown if you pass parameters with incompatible values to any of the methods.
• Works on Chrome, Opera and Safari (including ios 8 and ios 9 devices). Tested successfully on Ipad and Android.

• Add the [appSpeech] tag to and html tag and then the player controller will show at the top of the element where you added the tag.
• In order to provide a text different than the text inside the element, all you have to do is to add [textValue]="YOUR_TEXT_VALUE" tag to the same element where you added the [appSpeech] tag.
• By default the voice controllers are visible, to hide them add [hideControllers]="true".
• Add [pdfElement]="OTHER_ELEMENT_ID" will allow the component to read a text from another HTML element.
• You can always change the controller styles since its available in the styles.scss file.

• Move the directives folder from this app into your app's root.
• Import the DirectivesModule in your app.module.ts
• Install the speak-tts package by running npm install speak-tts
• Add the [appSpeech] tag to and html tag and then you will have everything working.
• Copy the styles.scss file from this application to your application.

• Reading a static text inside HTML component.
• Reading dynamic text inside a textarea.
• Reading a text by setting its value (predefined text).
• Disable voice controllers and use default settings.
• Reading a PDF.

• Read any static text found in any html element.
• Read dynamic text inside input fields (input, textarea, dropdown..)
• Read any text you provide with no need to show this text on the screen.
• Read text in any pdf file.
• A voice controller gives the user the ability to set the volume, pitch, rate, and the voice.
• Ability to have multi speeches in same page.
• Play the speech.
• Pause the speech.
• Resume the speech.
• Stop the speech.
• Enable/disable showing voice controller.

• Node.js for Angular installation
• Angular CLI for Angular.

• You need NodeJS and Angular CLI to be installed on your PC.
• Open the command prompt and link to the application files.
• Run 'npm install' command to install all the needed packages, since the speak-tts package must be installed.
• Run 'ng serve --o' command.
• When the application is served, it will open.