DEV Community

loading...

Fazendo o browser falar por você - Web Speech API

willianjusten profile image Willian Justen Originally published at willianjusten.com.br on ・2 min read

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)

Forem Open with the Forem app