← Voltar na listagem

Fazendo o browser falar por você - Web Speech API

Nesse post eu vou mostrar como utilizei a Web Speech API para meu projeto Japanese Words.

Introdução

Fala pessoal, eu recentemente comecei uma série de vídeos com dicas bem rápidas lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)

Vídeo

Apresentando o Japanese Words

Atualmente eu estou estudando japonês e pensando nisso, eu resolvi fazer um projetinho para me ajudar no vocabulário e pronúncia. Tem um site chamado mainichi que tem uma extensão com várias palavras, então parti dali. Como pode notar, meu card é uma cópia descarada deles xD

Mas para o projeto ficar mais interessante e diferente, resolvi aplicar a Web Speech API para fazer o browser falar as palavras.

Web Speech API

Você pode ver o projeto inteiro no repositório oficial, mas vou me ater somente as partes que utilizei da Web Speech, que é bastante simples.

Os passos são:

const voices = window.speechSynthesis?.getVoices()
  • Depois nós filtramos essa lista para encontrar a voz que tenha a pronúncia da língua desejada, no nosso caso, o japonês.
const jpVoice = voices?.find((voice) => /ja-JP/.test(voice.lang))
  • Com as vozes, nós definimos o Utterance, que seriam as configurações da leitura.
const utterance = new SpeechSynthesisUtterance()


utterance.text = word // word é a palavra que desejamos pronunciar
utterance.lang = 'ja-JP' // língua a pronunciar
utterance.voice = voice // voz defina acima
utterance.rate = 0.8 // velocidade de fala
  • Já com a voz determinada e as configurações de voz, agora é só usar o método para falar, que é o speechSynthesis.speak
window.speechSynthesis.speak(utterance)

Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no canal do YouTube para essa e mais outras dicas.