SwiftUI - Text to speech function makes voice aloud reader for your note | Apple iOS Xcode YouTube Seminar #8

Swift5.1.3 Xcode11.3 SwiftUI

- how to use Text-To-Speech, or TTS function
- Input text will sound with natural robot speech
- In SwiftUI, you can review AVSpeechUtterance

Text to speech robot speaks any language aloud from your memo with natural TTS voice

* Here is the highlight of YouTube tutorial.

Text-to-Speech or TTS is very useful on the way to office or school. You don't have to look at the device to read some text all the time. The speech robot reads it aloud for you.

I also created it for Apple Watch APP named "Memo Speaker" which is now on sale in APP store.

In this time, I would like to show you how to create it as iPhone APP with some simple code for beginner. To tell the truth, it's very easy to create it.

First, you need to import the following library.

import AVFoundation

The following TextArea is to be used to input some memo spoken by speech robot.

struct TextArea: UIViewRepresentable {
@Binding var text: String

func makeUIView(context: Context) -> UITextView {

let myTextArea = UITextView()
myTextArea.delegate = context.coordinator
myTextArea.font = UIFont(name: "HelveticaNeue", size: 55)
myTextArea.backgroundColor = UIColor(displayP3Red: 0.8, green: 0.8, blue: 1.0, alpha: 0.2)

return myTextArea

func updateUIView(_ uiView: UITextView, context: Context) {
uiView.text = text

func makeCoordinator() -> Coordinator {

class Coordinator : NSObject, UITextViewDelegate {

var parent: TextArea

init(_ uiTextView: TextArea) {
self.parent = uiTextView

func textViewDidChange(_ textView: UITextView) {
self.parent.text = textView.text

You can change the design of TextArea so please try to change some parameters. To use this struct, you need to insert the following code into ContentView.

@State var text = "Apple"

var body: some View {
VStack(spacing:50) {
Button(action: {
let utterance = AVSpeechUtterance(string: self.text)
utterance.voice = AVSpeechSynthesisVoice(language: "en-US")
// utterance.voice = AVSpeechSynthesisVoice(language: "ja-JP")

utterance.rate = 0.5

let synthesizer = AVSpeechSynthesizer()

}) {
Text("Start TTS")

text: $text
).frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)

The default text is "Apple". But you can change whatever you want here. After you edit the text, press the button of "Start TTS". That will make some sounds with your text.

If you would like to change the language spoken by robot, uncomment the following part.

utterance.voice = AVSpeechSynthesisVoice(language: "ja-JP")

In this example, you can change the language from English to Japanese. You can also change the speed of robot speech with the following code.

utterance.rate = 0.5

You can hear the voice quickly or slowly with it.

To get the source code, check the comment of my YouTube

Back to Table List