How can I make my web browser programmatic?

Question

Is it possible for a website to programmatically deliver a welcome message to users?

Suppose I wanted to greet users with an audio message after successfully logging into my site. I know that I could record a greeting message (that is, like MP3) and play it, but I would like to be able to do this programmatically, as the names of all users will be different.

For example, I can say Welcome, John Doe when John Doe logs in.

How can I do this with simple javascript?

NOTE. . It is not intended to be used in a production system, but rather is intended to be used as a smaller part of a larger UX experiment.

Answer 1

For window.speechSynthesis.speak() to render audio output in the Chromium browser, you need to set speech-dispatcher and start the browser using the --enable-speech-dispatcher flag.

• How to use chrome web speech API?

onvoiceschanged event handler and window.speech.synthesis.getVoices() must be called to fill out the list of available votes. The API is not simple; .getVoices() may need to call SpeechSynthesisVoice objects SpeechSynthesisVoice to populate the array returned by .getVoices() .

Note that there is a possibility that .speak() calls will be queued and not displayed as audio output, which is not immediately visible; calling window.speechSynthesis.cancel() clears the queue where the audio output may be unexpectedly displayed.

• speechSynthesis.getVoices () - empty array in Chromium Fedora

Then you can use window.speechSynthesis.speak() .

For some time we tried to get the default SSML parsing in the Chromium browser for * nix; without using an external web service that requires some form of EUA or is not free, as in beer.

The list of entities that were contacted and the questions asked to achieve this are quite long, for example

• Implementing SSML Parsing in Browsers

• How to extract espeak SSML parsing code to implement SSML parsing in SpeechSynthesisUtterance?

• How to configure SSML parsing to a user configuration file?

• Why were messages 88072 and Issue 795371 not published? Internals> SpeechSynthesis and Blink> Is Speech Dead?

Firefox on * nix also does not parse SSML.

Perhaps with great interest from users as a whole, we can finally enable this feature by default.

Although there are workarounds for parsing SSML without using an external web service; this first link below is still unanswered; although it includes php code that calls binary using shell_exec() following $_POST on the local server

• How to programmatically send a unix socket command to a system server, autospawned by a browser, or convert JavaScript to C ++ code for Chromium?

• SpeechSynthesisSSMLParser

Please note that there are several errors with the current implementation of the Web Speech API, in particular, that changing the volume property in SpeechSynthesisUtterance does not affect the audio output on both Chromium and Firefox

• Setting SpeechSynthesisUtterance.volume does not change the amount of audio output speech Speech Synthesis.speak ()

• Setting SpeechSynthesisUtterance.volume does not change the amount of audio output speech Speech Synthesis.speak ()

There is also an error when using .pause() and .resume() , which occurs when trying to programmatically analyze the <break> SSML element

• "speak speak slash" is the audio output of .speak () after two calls of .speak () ,. pause () and .resume ()

An alternative to using the apparently dead Web Speech API is speak.js , which was created by porting espeak to JavaScript or meSpeak.js , which is fork speak.js . espeak-ng now actively supported, for example, using a modified version of meSpeak.js

• create audio file with W3C Web Speech API

or using online dictionaries that serve for voice-reflecting voice files

• How to create or convert text to audio in Chrome browser?

Interestingly, after the publication of the answer "gstatic", the dictionary no longer served the audio files.

Fortunately we have

• mozilla / voice-web

This is an application for Android, Android and iOS for collecting voice donations for the Common Voice project.

which is quite active.

---

We can also use Native Message for Chromium / Chrome and Firefox to interact with the native shell and invoke the binary itself

• How to parse JSON from stdin on Native Messaging Chrome hosting?

• How to parse JSON from stdin on a Native Messaging host?

• Chrome instant message generation error for sending base64 string to client

this code achieves the expected result with minimal modification using Native Messaging

• Built-in Chrome messaging using PHP

or as a drastic measure, change the binary

• How to set the parameters of commands invoked by the browser?

---

(opinion supported by facts)

There is a significant market for web services for speech synthesis technologies, both in their generation ("[L] yrebird") and recognition - for profit, for example, "* lexa"; "* Olly"; (* bm) "* atson * luemix"; (* oogle) "* ctions"; and etc.

Open source developers should continue their efforts to support open source speech synthesis technologies (FOSS, FLOSS) in open source browsers. If we want these technologies to be implemented in default browsers, open source developers need to compose code for this to happen.

Answer 2

This is possible with the SpeechSynthesisUtterance interface of the SpeechSynthesisUtterance API web speech. More info on this here .

The JavaScript code below will say "Welcome, John Doe" when launched in Chrome. Make sure the volume is up!

 const message = new SpeechSynthesisUtterance('Welcome, John Doe'); window.speechSynthesis.speak(message); 

The Web Speech API also provides a speech recognition interface. The following code will output the spoken words to the browser console.

 const recognition = new webkitSpeechRecognition(); recognition.onresult = function(event) { for (let i = event.resultIndex; i < event.results.length; ++i) { console.log(event.results[i][0].transcript); } } 

To start recording speech, run recognition.start();
To stop recording speech, run recognition.stop();

Given that this is an experimental technology, it will not be ideal and is not supported in all browsers and versions. Check your browser compatibility chart for supported browsers and versions.