Web Speech API - Síntese de fala em JavaScript

A Web Speech API permite que desenvolvedores web gerem e reconheçam fala de forma programática em páginas web. Ela define dois principais interfaces: SpeechRecognition (para reconhecimento de fala) e SpeechSynthesis (para síntese de fala). No momento da escrita deste artigo, a Web Speech API ainda não é um padrão oficial do W3C, e sua compatibilidade pode variar entre navegadores. Aqui, exploraremos o recurso de síntese de fala.

A síntese de fala está disponível no navegador por meio da propriedade speechSynthesis do objeto window, que representa a interface SpeechSynthesis. Para verificar se o navegador suporta essa funcionalidade, use o seguinte código:

if (window.speechSynthesis) {
  console.log("A síntese de fala é suportada.");
} else {
  console.log("A síntese de fala NÃO é suportada.");
}

// Alternativamente:
if ("speechSynthesis" in window) {
  console.log("A síntese de fala é suportada.");
} else {
  console.log("A síntese de fala NÃO é suportada.");
}

Criando e configurando a fala

A síntese de fala é realizada usando o objeto SpeechSynthesisUtterance, que representa uma declaração individual e permite configurar propriedades como:

lang: define o idioma da fala.
pitch: ajusta a altura do som.
rate: controla a velocidade da fala.
text: define o texto que será sintetizado.
voice: seleciona a voz usada na fala.
volume: ajusta o volume da fala.

Por exemplo, para gerar uma fala básica, basta configurar o texto:

const utterance = new SpeechSynthesisUtterance();
utterance.text = "Hello World";

A execução da fala e seu controle são realizados pelos métodos da interface SpeechSynthesis, incluindo:

cancel(): remove todas as declarações da fila.
getVoices(): retorna uma lista das vozes disponíveis no dispositivo.
pause(): pausa a síntese em andamento.
resume(): retoma a síntese pausada.
speak(): adiciona uma declaração à fila para ser sintetizada.

Um exemplo prático de síntese em um formulário HTML seria:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Síntese de Fala</title>
  </head>
  <body>
    <input id="text" value="Hello World" />
    <button id="btn">Falar</button>
    <script>
      document.getElementById("btn").addEventListener("click", speak);

      function speak() {
        if (window.speechSynthesis) {
          const utterance = new SpeechSynthesisUtterance();
          utterance.text = document.getElementById("text").value;
          window.speechSynthesis.speak(utterance);
        } else {
          console.log("A funcionalidade não é suportada.");
        }
      }
    </script>
  </body>
</html>

Neste caso, o texto inserido no campo será sintetizado ao clicar no botão. Alguns navegadores, como o Google Chrome, podem impor restrições exigindo que a síntese seja ativada apenas por uma ação do usuário, como um clique em botão.

Personalizando configurações de fala

É possível personalizar a fala ajustando as propriedades:

document.getElementById("btn").addEventListener("click", speak);

function speak() {
  if (window.speechSynthesis) {
    const utterance = new SpeechSynthesisUtterance();
    utterance.text = "Olá";
    utterance.lang = "pt-BR";
    utterance.volume = 0.7; // Volume da fala (0.0 a 1.0)
    utterance.rate = 1.0; // Velocidade da fala (0.1 a 10.0)
    utterance.pitch = 1.2; // Altura da voz (0.0 a 2.0)
    window.speechSynthesis.speak(utterance);
  }
}

Seleção de vozes disponíveis

O navegador pode oferecer várias opções de vozes, que podem ser acessadas usando o método getVoices(). Cada voz possui atributos como nome e idioma:

const voices = window.speechSynthesis.getVoices();
voices.forEach((voice) => {
  console.log(voice.name);
  console.log(voice.lang);
});

Após identificar a voz desejada, ela pode ser configurada na propriedade voice do objeto SpeechSynthesisUtterance:

document.getElementById("btn").addEventListener("click", speak);

function speak() {
  if (window.speechSynthesis) {
    const utterance = new SpeechSynthesisUtterance();
    utterance.text = "Olá";
    const voices = window.speechSynthesis.getVoices();
    utterance.voice = voices[0]; // Seleciona a primeira voz
    window.speechSynthesis.speak(utterance);
  }
}

Eventos de síntese de fala

Durante a síntese de fala, vários eventos podem ser disparados para monitorar ou controlar o processo:

boundary: acionado ao alcançar limites de palavras ou frases.
end: acionado ao final da fala.
error: acionado em caso de erro.
mark: acionado ao alcançar uma marca nomeada no SSML.
pause: acionado quando a fala é pausada.
resume: acionado ao retomar a fala.
start: acionado ao iniciar a fala.

Por exemplo, para capturar os eventos de início e término da fala:

document.getElementById("btn").addEventListener("click", speak);

function speak() {
  if (window.speechSynthesis) {
    const utterance = new SpeechSynthesisUtterance();
    utterance.text = "Olá";
    utterance.onstart = () => console.log("Início da fala.");
    utterance.onend = () => console.log("Fim da fala.");
    window.speechSynthesis.speak(utterance);
  }
}

Documentação oficial: