Release 0.4

For release 0.4 I worked on issue #2343, a proposed brick idea for speaking and highlighting text word by word.

I approached this brick by trying to find out whether there were any existing speech API’s available for the web. After some searching I found the World Wide Web Consortium (W3C) Javascript API that lets developers use speech synthesis for generating text-to-speech output on a web page. The API provides methods for speaking, canceling, pausing and resuming an utterance.

Currently, the only browsers that support web speech working out of the box are Chrome version 31 or greater and Safari version 7 or greater.

We can detect whether or not a browser supports web speech using javascript

if ( ('speechSynthesis' in window) ) { 
    alert('Your browser supports speech synthesis');
}

We can get a list of voices with getVoices() method which will return us an array with available voice objects. You may get something similar:

default: true
lang: "en-US"
localService: true 
name: "Alex"
voiceURI: "Alex"

For the time being, I took a mash of the audio component and textbox component for developing the brick’s interface.

Highlighting text was not too hard after reading the utterance events section of the API. We can get the position of the utterance using charIndex by attaching an event listener for the boundary event.

this.$.utterance.addEventListener("boundary",function(e) {
    console.log(e.charIndex);
});

With this approach there is a slight delay between the actual utterance and when a word gets highlighted since the boundary event needs to fire (utterance spoken first) before the highlighting can begin.

Other issues that will need fixing:

  1. stop utterance when brick is removed from the card
  2. highlighting for Japanese (all other languages seem to highlight properly)

Apart from the slight issues, the brick works as described - ‘it goes through text while speaking and highlights word by word’.

I have not created a pull request yet, as bugs need to be fixed and suggestions will come up but so far here is the code: issue2343_webspeech.