Text to Speech functionality in AppStudio Framework

[ErwinSoekianto]

Summary 

Text to Speech module enables applications created with AppStudio to support accessibility features such as text-to-speech with voice modulation on four speech attributes: volume, pitch, speech rate and locale. Text to Speech module is useful for providing audio feedback to end users. The most common use case where text-to-speech comes in handy is when the end-user is driving while the app is navigating the direction, in this scenario, the navigation application can read out the turn-by-turn directions.  

Text to Speech functionality was first introduced as a Beta feature in AppFramework as part of AppStudio 1.4. What this means is we are looking for your feedback, use cases and what you want us to improve on. Future changes may affect your app and may require additional changes to support it. 

Since then, we have been adding a lot of new features to Text to Speech functionality but it is still in Beta. In AppStudio 2.0, you can

• Convert text into speech 
• Control voice modulation such as volume, pitch and rate/speed
• Choose the locale and language of the speech
• Choose the voice engine used 

To get a taste of the Text to Speech functionality, we will be covering the following

1. How to add Text to Speech functionality in your app
2. Minimal app - Text to Speech sample
3. Voice Modulation control: volume, pitch, rate
4. Locales and language
5. Voice engine

1. How to add Text to Speech functionality in your app

...
import ArcGIS.AppFramework.Speech 1.0

...


TextToSpeech {
        id: textToSpeech
        ....
}

...


Button {

        onClicked: {
                textToSpeech.say("This text will be converted in to speech");
        }
}
....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

2. Minimal app - Text to Speech sample

This minimal working sample enables user to enter any text in the text area, and click on the button "Say It", and the text will be converted to speech. It shows the animation while the it is talking and you can adjust the volume of the voice using the Volume slider. 

This sample is available in AppStudio Desktop, you can find it by clicking on the "New App" button and search for "Text to Speech". The source code is available in AppStudio Samples GitHub Page, Github - esri/app-studio-samples - Text to Speech.

3. Voice Modulation control: volume, pitch, rate

You can also control the voice modulation such as the volume, pitch and rate or the speed of the speech. 

PropertySlider {
            id: pitchSlider

            onValueChanged: {
                textToSpeech.pitch = value;
            }
}

PropertySlider {
            id: rateSlider

            onValueChanged: {
                textToSpeech.rate = value;
            }
        }

PropertySlider {
            id: volumeSlider

            onValueChanged: {
                textToSpeech.volume = value;
            }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

4. Locales and Language

You can set the locales and language setting 

textToSpeech.locales = locales;‍‍‍

5. Voice Engine

You can also choose from available Voice Engines  

ComboBox {
       model: Speech.availableEngines
}‍‍‍‍‍‍

References:

• Text to Speech Sample, Github - esri/app-studio-samples - Text to Speech
• Text to Speech AppFramework documentation, doc