Neste artigo você vai ver como é possível fazer a leitura de um texto utilizando JavaScript. Este recurso se chama Text to Speech.

Para fazer isso, vamos utilizar uma API chamada Speech Synthesis. Ela é suportada pelos browsers modernos e foi introduzida em 2014.

O que vamos ver neste artigo?

* Quais os navegadores que suportam esta API

* Fazendo a leitura de um texto

* Alterar a voz utilizada na leitura do texto

* Configurações da leitura do texto

Quais os navegadores que suportam esta API

A API Speech Synthesis é suportada pelos navegadores Chrome, Firefox, Safari e Edge. Para conferir com detalhes a compatibilidade, você pode utilizar o site Can I Use

https://caniuse.com/speech-synthesis

Fazendo a leitura de um texto

Para verificar através de código se o seu navegador suporta esta API você pode utilizar o seguinte código:

if ("speechSynthesis" in window) {

console.log("API DISPONIVEL");

} else {

console.log("API NAO DISPONIVEL");

}

A forma de utilização muda um pouco de acordo com o browser utilizado. Se você testar pelo Firefox, o código funciona direto. Mas se você utilizar o Chrome ou Opera, vai precisar atribuir o código a alguma ação do usuário, como o clique em um link ou botão.

No exemplo a seguir vamos criar uma função e fazer a leitura de um texto. 

function lerTexto(){

var mensagem = new SpeechSynthesisUtterance();

mensagem.text = "O trabalho não é ruim. Ruim é ter de trabalhar";

speechSynthesis.speak(mensagem);

}

lerTexto();

Reforçando o que foi comentado antes, este exemplo deve funcionar desta forma no navegador Firefox. Para o Chrome ou Opera, você deve associar esta função "LetTexto" a alguma ação do usuário, como o clique num botão ou link.

Como você viu, apenas 3 linhas de código foram necessárias. Na primeira linha, atribuimos para a variável mensagem uma instância de SpeechSynthesisUtterance. Ele é uma requisição de leitura de texto. 

Na segunda linha, configuramos esta requisição, informando qual o texto que desejamos ler, para isso utilizamos a propriedade text.

A leitura do texto é feita pela terceira linha. Utilizamos para ler o texto o método speak do recurso speechSynthesis. É o speechSynthesis que vai executar a requisição de leitura que você configurou com o SpeechSynthesisUtterance.

A mensagem que vamos ler pode ter até 32.767 caracteres.

No teste feito pelo Firefox, o texto foi lido com uma voz feminina. Vamos ver a seguir como podemos alterar a voz.

Alterar a voz utilizada na leitura do texto

Para listar quais as vozes suportadas pelo seu navegador devemos utilizar o método getVoices do speechSynthesis. O seu retorno é um array com as opções disponíveis. O seu retorno é assíncrono, desta forma, para ler o retorno, temos duas opções. A primeira seria trabalhar com Promisses. O segundo seria fazer um setInterval e executar o código após alguns segundos. Vamos utilizar esta segunda opção por ser mais simples.

setTimeout(() => {

window.speechSynthesis.getVoices().forEach(function(voice) {

  console.log(voice.name, voice.lang);

});

}, 5000);

O código acima deve ter sido executado 5 segundos depois de abrir a página, e deve estar mostrando no console do seu navegador uma lista contendo o nome da voz e o seu idioma. Como o retorno do método getVoices é um array, utilizamos forEach para iterar pelo seu conteúdo.

O retorno que você deve estar vendo na tela vai mudar de acordo com o navegador utilizado.  No Firefox o retorno foi:

Microsoft Maria Desktop - Portuguese(Brazil) pt-BR

Microsoft Zira Desktop - English (United States) en-US

Se você testar no navegador Opera, o retorno vai ser:

Microsoft Daniel Desktop - Portuguese(Brazil) pt-BR

Microsoft Maria Desktop - Portuguese(Brazil) pt-BR

E ao testar utilizando o Chrome você deve ter uma lista com 21 vozes para os idiomas português, alemão, inglês, espanhol, russo,francês, japonês, chinês, além de outros idiomas.

Para alterar a voz utilizada na leitura do texto vamos alterar o nosso primeiro exemplo para que ele fique da seguinte forma:

function lerTexto(){

var mensagem = new SpeechSynthesisUtterance();

var vozes = speechSynthesis.getVoices();

mensagem.text = "O trabalho não é ruim. Ruim é ter de trabalhar";

mensagem.voice = vozes[1]; 

speechSynthesis.speak(mensagem);

}

lerTexto();

As alterações que fizemos foram as seguintes, criamos uma variável vozes que vai armazenar o array de vozes disponíveis pelo navegador. Na variável mensagem, que tem a nossa requisição de leitura, utilizamos a propriedade voice para informar qual a voz que desejamos utilizar. O que foi passado como parâmetro foi a posição da voz desejada no array de vozes. A propriedade voice recebeu um objeto.

Para concluir este artigo, vamos ver outras configurações que podemos aplicar em nossa mensagem.

Configurações da leitura do texto

Para a nossa requisição de leitura, podemos configurar o idioma, o volume, o pitch e o rate.

O volume aceita um número entre 0 e 1, o padrão é 1.

O pitch corresponde a sensação do som, ou seja se ele vai ser grave ou agudo. Ele aceita um número entre 0 e 2, o padrão é 1.

O rate é a velocidade da fala, se vai ser rápida ou lenta. Ele aceita um número entre 0 e 1, o padrão é 1.

O lang permite alterar o idioma utilizado na leitura do texto. Você deve informar o código do idioma. São exemplos de códigos: en-GB, en-US, pt-BR

Vamos alterar nosso código com estes novos recursos:

function lerTexto(){

var mensagem = new SpeechSynthesisUtterance();

var vozes = speechSynthesis.getVoices();

mensagem.text = "O trabalho não é ruim. Ruim é ter de trabalhar";

mensagem.voice = vozes[1]; 

mensagem.lang = "pt-BR";

mensagem.volume = 1; 

mensagem.rate = 2; 

mensagem.pitch = 0; 

speechSynthesis.speak(mensagem);

}

lerTexto();

Perceba que com estas configurações a voz do texto ficou grave e a leitura do texto foi feita rapidamente.