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.
Top comments (0)