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.

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 Como rodar aplicativo android no celular e debugar pelo browser do PC
Next Apple força a barra e aplicativos híbridos precisam ser atualizados!

About author

Paulo Rogério
Paulo Rogério 205 posts

Sou apaixonado por tecnologia e adoro criar aplicações desktop, web e mobile. Adoro aprender e compartilhar conhecimento, meu hobby é ajudar as pessoas.

You might also like

Xamarin Forms – Data Binding entre controles

Share this on WhatsAppAprenda fazer Data Binding entre seus componentes de sua View no Xamarin Forms Fala galera, beleza? Como alguns de vocês já sabem, depois de passar um tempo

Mobile 13 Comments

Xamarin – Como consumir uma api local que roda no IIS Express no emulador

Share this on WhatsAppAprenda a consumir uma api local direto do emulador Hoje venho trazer uma dica bem interessante para vocês, irei explicar como podemos rodar 2 projetos ao mesmo

Sem categoria 0 Comments

Live 03 – Como GERAR PDF em IONIC 5

Share this on WhatsAppFala Dev!Estarei realizando uma live no dia 30/04 as 21:10h onde ensinarei Como GERAR PDF em IONIC 5.Ha ideia dessa live surgiu a partir das dúvidas de

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply