Um app que fala?? Exatamente. Com a ascensão das assistentes virtuais como Siri (Apple), Cortana (Microsoft), Google Now e Alexa (Amazon), somada a popularização de BOTs nos messengers e diversas outras ferramentas de comunicação, os desenvolvedores tem cada dia mais tentado incorporar recursos de voz dentro de seus próprios apps.
Se antes tais recursos eram extramemente complexos e possuiam um alto custo de implementação, hoje uma grande parte da funcionalidade já está disponível nos próprios SDKs das plataformas. E você pode incorporar no seu app com pouquíssimas linhas de código.
Nesse artigo, vamos ver de maneira muito direta e rápida, como fazer com que seu app seja capaz de “falar” alguns textos e alertas que podem ser úteis para os usuários.
O que vamos precisar para o app?
Para fazer nosso app falar, vamos precisar apenas do framework AVFoundation (que normalmente já vem pré-importado nos projetos do Xcode) e da classe AVSpeechUtterance junto das suas dependências.
Passo a passo
Vamos começar criando um novo projeto do zero. Você pode criar qualquer tipo de projeto base, mas para simplificar eu vou utilizar o template de Single View Application, ou seja, um app que tem apenas uma tela.
Seu projeto será criado com a estrutura base do app. Para esse exemplo, tudo que você precisa é acessar a classe ViewController.m
Agora vamos fazer algo que não é fundamental para a funcionalidade que fará seu app falar, mas vai nos ajudar a testar a implementação.
Basicamente, vou criar 2 componentes visuais na tela: Um campo de texto (onde você irá informar a frase que deve ser falada) e um botão (que irá iniciar a fala).
Como o objetivo aqui é manter a implementação simples e evitar explicar outros conceitos ou ferramentas do desenvolvimento iOS, vou criar os 2 componentes diretamente por código e direto dentro da ViewController mesmo! (Mas não faça isso no seu projeto sério! ⚠️)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
- (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; // Criando o TextField onde será digitado o texto que será falado self.textField = [[UITextField alloc] initWithFrame:CGRectZero]; self.textField.autocapitalizationType = UITextAutocapitalizationTypeNone; self.textField.autocorrectionType = UITextAutocorrectionTypeNo; self.textField.font = [UIFont boldSystemFontOfSize:15.0f]; self.textField.textColor = [UIColor redColor]; self.textField.placeholder = @"Digite seu texto aqui"; [self.view addSubview:self.textField]; // Criando o botão que irá iniciar a fala self.talkButton = [[UIButton alloc] initWithFrame:CGRectZero]; [self.talkButton setTitle:@"Falar" forState:UIControlStateNormal]; [self.talkButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal]; [self.talkButton addTarget:self action:@selector(talkButtonTapped) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:self.talkButton]; } - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; // Definindo o tamanho e posição do TextField na tela self.textField.frame = CGRectMake(10, 30, self.view.frame.size.width - 20, 40); // Definindo o tamanho e posição do botão self.talkButton.frame = CGRectMake(10, 120, self.view.frame.size.width - 20, 45); } |
Vamos criar o método que será chamado ao clicar o botão:
|
1 2 |
- (void)talkButtonTapped { } |
Vamos criar o método que irá disparar a fala em si:
|
1 2 |
- (void)talkWithUserSayingString:(NSString *)string { } |
O método acima recebe uma String e irá, em breve, sintetizar o conteúdo da string com a voz que vamos escolher.
Vamos garantir que esse método seja chamado certinho quando clicar no botão. Volte ao método talkButtonTapped e adicione a chamada ao método de fala.
|
1 2 3 4 |
- (void)talkButtonTapped { // Ao clicar no botão, chama o método talkWithUserSayingString passando o conteúdo do campo de texto [self talkWithUserSayingString:self.textField.text]; } |
Pronto! Temos o campo de texto, temos o botão, e ao clicar no botão passamos o conteúdo digitado no campo de texto para o método que irá iniciar a fala. Agora vamos para o código no qual esse artigo realmente se propõe a lhe ensinar. 😂
Como mencionado inicialmente, toda implementação que faz seu app falar está relacionada a pouquíssimas classes. Vamos precisar de uma instância de uma AVSpeechUtterance e uma instância de uma AVSpeechSynthesizer e ponto! Sim! É só isso!
A classe AVSpeechUtterance é responsável por definir a pronúncia de uma expressão. Um objeto/instância dessa classe guarda informações importantes como a voz, idioma e velocidade que seu texto será falado. Você cria um AVSpeechUtterance para cada frase que quiser falar.
A classe AVSpeechSynthesizer por sua vez, recebe um objeto do tipo AVSpeechUtterance e reproduz! Também é essa classe que é responsável em guardar informações de estado, como por exemplo, informar qual palavra da frase está sendo falada nesse exato momento. Você obtém essas informações através dos delegates.
Parece fácil né? E é! O código fica super simples.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
- (void)talkWithUserSayingString:(NSString *)string { // Cria uma instância do AVSpeechUtterance com a string recebida // Essa instância vai guardar informações como texto, voz e velocidade AVSpeechUtterance *utterance = [[AVSpeechUtterance alloc] initWithString:string]; // Define que o idioma será Português do Brasil utterance.voice = [AVSpeechSynthesisVoice voiceWithLanguage:@"pt-BR"]; // Define a velocidade da fala (mínimo 0.5 e máximo 2) utterance.pitchMultiplier = 1.2f; // Cria uma instância do AVSpeechSynthesizer // Essa instância vai reproduzir o som conforme definições feitas na AVSpeechUtterance AVSpeechSynthesizer *synthesizer = [[AVSpeechSynthesizer alloc] init]; [synthesizer speakUtterance:utterance]; } |
É só rodar o app, digitar uma frase e apertar o botão: Seu app está falando!
Desconsiderando os comentários, são apenas 5 linhas de código. Isso porque estamos alterando a velocidade da fala. Você pode remover essa linha e manter a velocidade padrão (1.0). Mas para textos muito longos eu acho que fica meio entediante, então prefiro acelerar um pouquinho.
Ahh, visualmente o app fica assim:
Não é exatamente o que podemos chamar de um app muito bonito, eu sei, mas a funcionalidade está ali. Agora você só precisar usar sua criatividade para aplicar essa funcionalidade em momentos especiais dos fluxos já existentes no seu app. É possível fazer muita coisa legal!
E antes de encerrar, é claro que você vai querer ver o app funcionando:
Caso queira baixar o código fonte já pronto, o projeto está disponível no Github da Abacomm: https://github.com/abacomm/TalkingApp
Gostou da dica? Acha que devemos postar mais conteúdos desse tipo? Deixe seu comentário abaixo. Também não esqueça de acompanhar a Abacomm no Twitter, onde estamos sempre compartilhando várias dicas.
Gostou? Compartilhe essa dica com seus amigos e até a próxima! 🙂
Compartilhe:
Sobre o Autor
