Como fazer meu aplicativo em Ionic falar?

Como fazer meu aplicativo em Ionic falar?

No artigo de hoje irei ensinar um recurso bastante interessante que vejo poucas pessoas utilizando hoje em dia, nós iremos aprender fazer nosso aplicativo falar com o usuário, isso mesmo, seu celular é capaz de falar com o usuário.

Bom para isso vamos iniciar um novo projeto em Ionic, para isso abra seu prompt de comando e digite o seguinte.


Este comando irá criar um novo projeto em Ionic

Neste momento ele deve te perguntar se deseja usar o Ionic 3 ou Ionic 4, na verdade tanto faz, este recurso funciona nos 2. No meu caso resolvi usar o Ionic 3.
O prompt irá te perguntar qual template deseja usar, eu selecionei um projeto vazio, ou seja, template blank.
Em alguns PC pode perguntar se deseja usar o cordova, você dirá que sim e quando perguntar se deseja usar o Ionic Pro ou AppFlow, diga não.

Depois disso seu projeto será criado, basta acessar a pasta do projeto e abri-lo em seu editor preferido, no meu caso estou usando o visual studio code.

PROMOÇÃO PARA USUÁRIOS DO IONICCLUB
ÚLTIMAS UNIDADES !
CLIQUE E ACESSE NOSSA LISTA DE CURSOS EM PROMOÇÃO!
Benefícios
  • Desconto acima de 80%
  • Certificado
  • Sem mensalidades
  • Acesso Vitalício
  • Grupo de WhatsApp
O comando code . abre o visual studio code na pasta que você está acessando o prompt

Seu projeto ficará com a seguinte estrutura.

Para acessar o prompt de comando do Visual Studio Code evitando ficar com 2 janelas abertas pressione Ctrl + ‘.

Agora vamos instalar o plugin responsável por falar em nosso dispositivo.


Agora vamos configurar o plugin em nosso projeto.
Abra seu arquivo app.module.ts

Como podemos ver na imagem acima, adicionamos o TextToSpeech no providers e colocamos a referencia da classe no topo do arquivo.

Agora abra sua pagina home.html

Adicionei em nossa home um input para o usuário digitar o que o app deverá falar e coloquei um ngModel chamado textoASerFalado, quando o usuário digitar algo, automaticamente essa variável estará preenchida.
Adicionei também um botão chamando uma função falar, onde terá o código responsável por chamar o plugin passando os devidos parâmetros.

Agora abra seu arquivo home.ts

Como podemos ver, adicionei uma referencia do TextToSpeech em nosso construtor e com isso tive que adicionar sua referencia no topo da classe.
Criei a variável do tipo String que usamos em nosso html chamada textASerFalado recebendo por padrão o valor Olá mundo.
Criei também a função responsável por falar com o usuário, nela chamamos a variável injetada em nosso construtor e a usamos.
Ela espera alguns parametros.
text: que é o texto que desejamos falar, obviamente coloquei o valor do input que irá preencher o conteúdo da variável através do ngModel.
locate: Idioma que o celular irá falar.
rate: velocidade entre 0 e 1

Este recurso funciona apenas no celular, um jeito fácil de testar é dar o Ionic Serve e usar o App Ionic DevApp com ele será possível testar projetos que estejam rodando na mesma rede WiFi do PC.

Caso você tome o famoso erro ERR_NOT_INITIALIZED, é simples de resolver, vá na pasta de seu plugin e abra o arquivo myApp\plugins\cordova-plugin-tts\src\android\TTS.java

Este erro ocorre pelo fato do componente não ser inicializado, basta adicionar uma linha no final do arquivo e pronto, seu projeto estará apto a falar com você.

Seu projeto será semelhante a este.

Clique no botão que ele irá falar exatamente o que você escrever.


O fonte completo se encontra em meu GitHub pessoal!
https://github.com/pauloanalista/Fazendo-Ionic-falar-com-Text-To-Speech

Bom espero que tenham gostado da dica!

Previous O que é e para que serve Stencil?
Next Nova aula adicionada ao curso de Ionic 4

About author

You might also like

Artigos

A surpresa escondida atrás do Ionic 4

Se você tem interesse em conhecer um pouco do poder do Ionic 4, veja o vídeo! No vídeo abaixo você irá ver: – Diferenças do Ionic 3 para Ionic 4

Artigos

O que é e para que serve Stencil?

O time do Ionic trouxe uma grande ferramenta chamada Stencil que sua proposta é construir Web Components modernos. Sua sintaxe é muito semelhante com a do Ionic com Angular, mas

Artigos

Como rodar aplicativo android no celular e debugar pelo browser do PC

Uma dúvida muito comum dos desenvolvedores Ionic é a depuração remota de dispositivos Android.Neste artigo eu irei lhe ensinar como rodar seu aplicativo Ionic no celular e depura-lo diretamente no