2

I'm writing a javascript code which I want to welcome users when they click the "start button". It's working, in english, but the point is that I want it to say things in Brazilian Portuguese (pt-BR). I tried a lot of solutions, but seems it will not work. Can anyone please help me?

The code is:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<script>

startTalking = function(line){
    var text  = new SpeechSynthesisUtterance();
    text.lang = "pt-BR";
    text.text = line;
    speechSynthesis.speak(text);
  }

</script>
</head>
<body>

<button id="startButton" onclick = "startTalking("Bem vindo!")"></button>

</body>
</html>

When I click the button the script works, but the text received in the parameter is spoken by a voice in English (USA).

Does anyone has any clue on how to fix it?

Thanks!!

ulissesBR
  • 93
  • 11

2 Answers2

3

Thanks for your reply Bruno. I got this situation solved the day next I posted the question but could not post the solution here. I solved this situation using this:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<script>

var text;
var voices;

window.speechSynthesis.onvoiceschanged = function() {
  text = new SpeechSynthesisUtterance();
  voices = window.speechSynthesis.getVoices();
  text.voiceURI = 'Google português do Brasil'; //discovered after dumping getVoices()
  text.lang = "pt-BR";
  text.localService = true;
  text.voice = voices[15]; //index to the voiceURI. This index number is not static.
}

startSpeaking = function(line){
  text.text = line;
  speechSynthesis.speak(text);
}

</script>
</head>
<body>

<button id="startButton" onclick = "startTalking("Bem vindo!")"></button>

</body>
</html>

Once onvoiceschanged is asynchronous, this made everything work fine now!

Even I've already got it solved, I'm very grateful for your reply. Thanks a lot.

Best Regards,

Ulisses

ulissesBR
  • 93
  • 11
  • I am having a similar problem, since my app has to talk right after the page loads and the voices are not always loaded on time. – Douglas De Rizzo Meneghetti May 24 '16 at 11:41
  • @DouglasDeRizzoMeneghetti Try the solution I've posted, it worked well for me. Anyway, to assure your document has fully loaded and is ready to process your code, you can use the jQuery statement: `$(document).ready(function());` where `function` is the name of the function you want to call after the page is fully loaded. Hope this helps! – ulissesBR May 25 '16 at 18:34
  • Thanks. I am not familiar with jQuery (judge me) but I did something similar with addEventListener('load') and it worked fine. – Douglas De Rizzo Meneghetti May 25 '16 at 20:57
  • @DouglasDeRizzoMeneghetti, Nobody can judge you for such a thing, knowledge is always something we conquer, no one can study for you ;)! Glad you could make it work! :) – ulissesBR May 27 '16 at 17:34
0

Watch this:

web speech api - speech synthesis .lang property not working

and this:

https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/onvoiceschanged

For some reason, now you need to populate the voices list and only then you can choose the language/version you want.

Community
  • 1
  • 1
Bruno
  • 41
  • 2
  • 8