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:

• Primeiro pegamos as vozes disponíveis no device/browser usando o método SpeechSynthesis.getVoices()

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.