ResponsiveVoice blocked by CORS

Question

I try building a function that reads digits with defined delay between one another.

{
...
play : function (digits, delay = 500) {
  if (digits && digits.length > 0) {
    responsiveVoice.speak(digits[0], "Czech Female", {
      rate: 0.7,
      onend: () => setTimeout(() => {
        this.play(digits.splice(1), delay);
      }, delay)
    });
  }
}

digits is an array of digits and delay the delay in ms between digits.

The function works fine for some time but randomly it fails with following error in the console:

Access to XMLHttpRequest at 'https://texttospeech.responsivevoice.org/v1/text:synthesize?text=0&lang=cs&engine=g1&name=&pitch=0.5&rate=0.35&volume=1&key=XXXXXXXX&gender=female' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ResponsiveVoice audio could not be loaded. There is an issue connecting your browser to the API endpoint. GET https://texttospeech.responsivevoice.org/v1/text:synthesize?text=0&lang=cs&engine=g1&name=&pitch=0.5&rate=0.35&volume=1&key=XXXXXXXX&gender=female net::ERR_FAILED

Can anyone give me a hint what is wrong?

Answer 1

The library you are using doesn't seem to behave well when it comes to the character 0 (at least). I tested your code and it worked well for any other input.

Somehow, when inputting 0 to this library, it sends the request to the API as XMLHttpRequest instead of HTMLAudioElement (used for every working speech).

XMLHttpRequest has some restrictions when it comes to cross-domain requests (for more informations you can read about CORS), and the API doesn't seem to support XMLHttpRequest calls.

This is an inconsistency between the library and the API, I suspect a bug in the library related with truthy/falsy checks.

You should contact their support and report this bug.

Edit:

As written in the comments, it seems that there is a workaround that consists in adding a space before the digit.