DEV Community

Willian Justen
Willian Justen

Posted on • Originally published at willianjusten.com.br on

Fazendo o browser falar por você - Web Speech API

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

Você pode ver meu projeto no ar, através desse link.

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()
Enter fullscreen mode Exit fullscreen mode
  • 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))
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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)
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)