Convertendo texto em fala com Speech - React Native + Expo
Vamos supor que você receba um texto de alguma “API”, ou até mesmo um texto pré definido, e você quer cuidar da parte de acessibilidade que quando o usuário entrar no aplicativo reproduza em áudio o que está escrito ou adicionar um botão para ativar a reprodução do texto em áudio. Um exemplo bastante usado são alguns aplicativos para aprender idiomas, com a reprodução em áudio nós conseguimos aprender mais fácil.
Bom, para sabermos um pouco mais sobre o assunto vamos começar criando um projeto do zero com Expo. Mas… o que é Expo?
Basicamente Expo é uma ferramenta utilizada no desenvolvimento mobile React-Native. Permite fácil acesso às API’s desenvolvidas pelo expo.com. Não é preciso instalar qualquer dependência, transmutar ou configurar módulos de código nativo (java ou swift). Tudo acontece utilizando somente Javascript.
Agora que sabemos o que é Expo, podemos começar o processo de criação de projeto.
Criando projeto
Precisamos instalar em nossa máquina o node.js e o expo cli.
- node.js
- expo cli (terminal)
npm install -g expo-cli- Para melhor uso da ferramenta, seria bom criar uma conta de usuário expo:
- Acesse https://expo.io/signup
Após a instalação, para se certificar que o mesmo foi instalado, utilize o comando:
expo --version
Para criar o primeiro projeto e gerar seus arquivos, você pode rodar o comando abaixo e logo em seguida selecione a opção “blank”:
expo init AudioProject
Próximo passo
Entre na pasta criada do projeto e execute o start.
cd AudioProject && npm start
Agora o app está rodando. A informação do prompt é auto descritiva, existem algumas opções para visualizar o app:
- Fazer login no app Expo do telefone com a conta criada (opcional ter conta)
- Escanear o QR code com Expo app (android ) ou câmera iOS (atalho para o app expo)
- Essa imagem é referente ao arquivo App.js no nosso projeto criado, podemos seguir a partir dele.
Instalação do Speech
Para o que vamos trabalhar precisamos instalar o Speech.
expo instalar expo-speech
Após isso vamos trabalhar em cima do nosso App.js, começando com a importação do Speech.
importar * como Fala de 'expo-speech';Em seguida vamos criar uma frase qualquer para fazer nosso teste de reprodução do texto em áudio.
Ao clicar no botão ”Falar meu texto” você irá escutar sua frase setada no state.
Nós Podemos também reproduzir em áudio o que nós digitamos em um campo TextInput por exemplo, acompanhe no código abaixo o exemplo:
Veja como ficou nas imagens a baixo:
Estou sem palavras para falar o quão fácil é utilizar essa API, ela é muito importante na parte de acessibilidade, ainda mais sendo tão fácil de utilizar.
Obrigado a todos que vieram até aqui, espero ter ajudado!
