One JS Class to speak them all

Fer4.9.js — Sat, 01 Jun 2024 02:26:35 +0000

Hi to everyone! 👋🏼

First of all: sorry for my English.

I'm a guy from Argentina coding in different programming languages since December 1994.

In my last holiday time I coded a JS Library improving and grouping in a simple JS Class the Speech Synthesis capacities included in one place the main features of this amazing way to transform a sentence in an audible thing.

I did feel myself as a fortunate coder who widely profited some of the modern capabilities included on #JavaScript to create JS Classes with private and static members (properties and methods).

I never found an opportunity, until now, to implement most of these modern features of this so-versatile programming language.

What was the result

A JS library with just 3.17 KB of weight (unminified) or 1.84 KB of weight (minified) with the power of transforming a text or sentence in an audible thing. The best of all this thing is to resume in just one line of code a native feature of JS that needs between 5 to 10 lines of code for implementing using full Vanilla JS.

This library just extends the features of the Speech Synthesis Object and simplify in some properties and methods the Speech Synthesis and SpeechSynthesisUtterance objects.

Test if your web browser supports Speech Synthesis

Speakit.TTStest();

Get the available voices list in a web browser

Speakit.getVoices().then(voices => console.table(voices))

This method is based in JS Promises and returning an object array with all the voices available.

Some web browsers like Chrome and Microsoft Edge has a combination of synthesized voices and Natural voices available. The other ones like Safari or Firefox just have synthesized voices.

The .utteranceRate and .utterancePitch properties let you configure the tone and pitch of the voice. They drives values very sensitive and need several tests in different web browsers (mobile and desktop) to found the best tuning.

Speakit.utteranceRate = 1.02
Speakit.utterancePitch = 1.00

How to reproduce a text

You need to call the .readText() method and send two arguments:
1) the string of the text or sentence to reproduce
2) the ISO language code selected (en-GB, es-AR, pt-BR)

This method has a third argument (optional) and represents the voice object corresponding to a tone or accent available in the voice list.
For example, if you are using Microsoft Edge to test your webapp and select en-HK as the language to reproduce audible text, you may choose Microsoft Sam Online (Natural) - English (Hongkong) by sending it as the third parameter.

Speakit.readText('Hello world!', 
                 'en-NZ', 
                 'Microsoft Sam Online (Natural) - English (Hongkong))'
.then(()=> console.log('Text successfully readed.') )
.catch((error)=> console.error('Error reading the text:', error) )

The .readText() method works as a Promise. While it is reproducing the sentence, will wait to the end of reproduction to resolve the JS Promise. That let you establish a .then() control method to do something after the sentence finish played.

Controlling the .readText() action

Of course Speakit JS let you controlling the audible reproducing action by using .pauseSpeaking(), .resumeSpeaking() or .stopSpeaking() methods.

Speech Synthesis availability

This amazing JavaScript feature is available in most of the modern browsers since many years ago. In some web browsers you will find the Natural voices options, giving you a Headline in the Speech Synthesis experience of your webapps.

I invite you all to test my JS library and send me comments or suggestions to bring it to the next level. I am working already in some improvements of it.

I didn't mention all the properties and capabilities of Speakit-JS in this article. Go for it and dig all the available features.

If you wanna try this JS Library, go for it to my official repo at: https://github.com/mobilepadawan/Speakit-JS

You can also find it in NPMJS web by using npn install speakit-js command. This JS library just works in frontend webapps and PWAs.

DEV Community: Fer4.9.js

One JS Class to speak them all

What was the result

How to reproduce a text

Controlling the .readText() action

Speech Synthesis availability