Desenvolvendo um Botão de Leitura de Texto com SwiftUI

Naomi Lin
3 min readJul 4, 2024

--

Ícone do App "Ciao, Italia".

No challenge da Ilhéu de Nova Descoberta, da Apple Developer Academy UFPE, cada grupo teve que fazer um app que explorasse suas paixões. No trio “Ciao, Italia”, tivemos que criar um app que envolvesse nossas três paixões: idioma (italiano), viagem e arte.

Dessa forma, chegamos a uma Solution Concept:

“Um app que simula uma situação cotidiana e ensina expressões-chaves ao viajar”.

Behance: https://www.behance.net/gallery/202339635/Ciao-Italia-App

Um dos pontos mais interessantes trabalhados ao longo do desenvolvimento dele foi criar um botão de leitura de um texto predefinido no SwiftUI. Para fazê-lo, usamos de referência este post no Medium para nos ajudar.

Como começar?

import AVFoundation

class SpeechManager {
private let synthesizer = AVSpeechSynthesizer()

func speak(_ text: String) {
let utterance = AVSpeechUtterance(string: text)
utterance.voice = AVSpeechSynthesisVoice(language: "it-IT") // Italiano
utterance.rate = 0.5
synthesizer.speak(utterance)
}
}

Primeiramente, utilizamos o import AVFoundation para termos acesso ao AVSpeechSynthesizer, o que fornecerá uma variedade de controles para o áudio (síntese de fala).

Logo, criamos uma classe chamada SpeechManager com uma propriedade privada chamada synthesizer que inicializa a instância AVSpeechSynthesizer que é o que realizará a síntese de fala.

Depois disso, criamos uma uma função chamada speak que aceita uma string como parâmetro, é ela que vai converter o texto em fala. Nela criamos uma constante chamada utterance que terá a instância de AVSpeechUtterance com o texto que vai ser fornecido para configurar a maneira que a fala será sintetizada (a dicção).

Para configurar o idioma da fala, utilizamos utterance.voice com o AVSpeechSynthesisVoice. Nesse exemplo configuramos “it-IT” para que a linguagem seja italiano.

A utterance.rate é usada para configurar a velocidade da fala, o valor padrão é o 0.5 mas pode variar de 0 a 1.

E por último, chamamos o método speak do synthesizer com a utterance para iniciar a síntese da fala com as configurações que criamos.

E agora, como criar um botão?

import SwiftUI
struct ButtonView: View {
private let speechManager = SpeechManager()

var body: some View {
VStack {
Button(action: {
speechManager.speak("Ciao, come stai?")
}) {
ZStack {
Capsule()
.foregroundColor(.blue)
.frame(width: 140, height: 44)
Text("FALAR")
.foregroundColor(.white)
}
}
}
}
}

Para criarmos um botão de leitura de texto, abrimos uma outra view que contém uma instância privada de SpeechManager chamada speechManaager que trará as funcionalidades da síntese de fala que foram definidas na classe SpeechManager.

Depois de estilizar o botão, colocamos em sua ação o método speak do speechManager e passamos uma string, no exemplo colocamos “Ciao, come stai?” para que seja falada ao ser pressionado o botão “FALAR”.

Espero que este tutorial tenha sido útil e que você tenha aprendido a criar um botão de leitura de texto em SwiftUI! Se você tiver alguma dúvida ou sugestão, sinta-se à vontade para deixar um comentário abaixo.

--

--

Naomi Lin

Estudante de design e ilustradora | Apple Developer Academy