Text-to-speech

The AppFramework provides a Speech QML plug-in for text-to-speech functionality that enables applications created with AppStudio to support accessibility features such as text-to-speech with voice modulation. This TextToSpeech component can be used to provide audio feedback to end users, including aid for visually-impaired users and providing information when the user isn't looking at their device. To use this functionality, you must first include the following import statement:

import ArcGIS.AppFramework.Speech 1.0

Convert text to speech

The core of the TextToSpeech component is the say method, which converts submitted text into a spoken statement. The following code sample demonstrates it in use, reading the contents of a text area when a button is clicked:

ColumnLayout {
    anchors {
        fill: parent
        margins: 4 * AppFramework.displayScaleFactor
    }

    TextToSpeech {
        id: textToSpeech
    }

    Rectangle {
        Layout.fillWidth: true
        Layout.preferredHeight: 200 * scaleFactor
        color: transparent
        border.color: black
        border.width: 1 * scaleFactor

        TextArea {
            id: sayText
            width: parent.width
            Material.accent: "#8f499c"
            padding: 5 * scaleFactor
            selectByMouse: true
            wrapMode: TextEdit.WrapAnywhere
            text: "This text will be read."
        }
    }

    Button {
        Layout.fillWidth: true
        text: "Say it"
        onClicked: {
            textToSpeech.say(sayText.text);
        }
    }
}

Voice modification

The voice produced by the TextToSpeech component can be controlled by modifying the volume, pitch, and rate properties of the component. Each of these properties is stored as a double-precision integer (one decimal point), with the default value being 50. The following code sample provides a slider for the volume property:

Slider {
    id: volumeSlider
    Layout.fillWidth: true
    Layout.leftMargin: 10 * AppFramework.displayScaleFactor
    Layout.rightMargin: Layout.leftMargin
    from: 0
    to: 100
    stepSize: 1
    onValueChanged: {
        textToSpeech.volume = value/100;
    }
}