App que fala: Como fazer seu app falar?

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! ⚠️)

- (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:

 - (void)talkButtonTapped {
 }

Vamos criar o método que irá disparar a fala em si:

 - (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.

- (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.

- (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! 🙂