Exemple de Quick Speech
L'exemple « Quick Speech » lit à voix haute un texte fourni par l'utilisateur.
L'exemple « Quick Speech » montre comment le type « TextToSpeech » peut être utilisé dans une Qt Quick application pour lire du texte à voix haute et contrôler la synthèse vocale.
L'exemple utilise Qt Quick Controls pour fournir des commandes permettant de régler la hauteur, le volume et la vitesse de la synthèse vocale. Il permet également à l’utilisateur de sélectionner un moteur, une langue et une voix.
Initialisation d’un objet TextToSpeech
Tout d’abord, nous initialisons l’objet de synthèse vocale tts:
TextToSpeech {
id: tts
volume: volumeSlider.value
pitch: pitchSlider.value
rate: rateSlider.valueRécupération de l'état
Des instructions « switch case » sont utilisées pour mettre à jour le Label statusLabel dans le pied de page.
onStateChanged: updateStateLabel(state)
function updateStateLabel(state)
{
switch (state) {
case TextToSpeech.Ready:
statusLabel.text = qsTr("Ready")
break
case TextToSpeech.Speaking:
statusLabel.text = qsTr("Speaking")
break
case TextToSpeech.Paused:
statusLabel.text = qsTr("Paused...")
break
case TextToSpeech.Error:
statusLabel.text = qsTr("Error!")
break
}
}Mise en surbrillance des mots au fur et à mesure de leur prononciation
L'TextArea input est utilisé pour récupérer le texte à lire et le signal onSayingWord comme déclencheur, mais aussi pour connaître la position à mettre en surbrillance au fur et à mesure que les mots sont prononcés.
onSayingWord: (word, id, start, length)=> {
input.select(start, start + length)
}L'TextArea input est déclaré ici :
ColumnLayout {
anchors.fill: parent
anchors.margins: 8
id: inputForm
TextArea {
id: input
wrapMode: TextEdit.WordWrap
text: qsTr("Hello, world!")
Layout.fillWidth: true
Layout.minimumHeight: implicitHeight
font.pointSize: 24
}Contrôle de la synthèse vocale
Button sont organisés à l’aide d’un « RowLayout » et configurés pour contrôler le signal « TextToSpeech » tts.
Le bouton « Speak »
Un Button est créé et intitulé « Speak ». Il est activé si la propriété « state » de tts prend la valeur Paused ou Ready. Lorsque l'on clique sur le bouton, les voix disponibles sur les appareils cibles sont récupérées, et tts.voice est défini sur la voix actuellement sélectionnée de voicesComboBox. Ensuite, la fonction TextToSpeech::say() est appelée et reçoit le texte contenu dans le paramètre inputbox.
RowLayout {
Button {
text: qsTr("Speak")
enabled: [TextToSpeech.Paused, TextToSpeech.Ready].includes(tts.state)
onClicked: {
let voices = tts.availableVoices()
tts.voice = voices[voicesComboBox.currentIndex]
tts.say(input.text)
}
}Les boutons « Pause », « Reprendre » et « Arrêter »
La mise en œuvre de ces boutons est similaire à celle du bouton « Speak » :
Button {
text: qsTr("Pause")
enabled: tts.state == TextToSpeech.Speaking
onClicked: tts.pause()
visible: tts.engineCapabilities & TextToSpeech.Capabilities.PauseResume
}
Button {
text: qsTr("Resume")
enabled: tts.state == TextToSpeech.Paused
onClicked: tts.resume()
visible: tts.engineCapabilities & TextToSpeech.Capabilities.PauseResume
}
Button {
text: qsTr("Stop")
enabled: [TextToSpeech.Speaking, TextToSpeech.Paused].includes(tts.state)
onClicked: tts.stop()
}Sélection des options de synthèse vocale
Un GridLayout est utilisé pour organiser les commandes et les libellés permettant de sélectionner les options de moteur, de paramètres régionaux, de voix, de volume, de hauteur tonale et de débit pour la synthèse vocale.
Sélection du moteur, des paramètres régionaux et de la voix
Un groupe de composants d’ ComboBox s est utilisé pour sélectionner ces paramètres.
Pour l’ ComboBox de sélection du moteur, tts.availableEngines() est utilisé comme modèle.
L’ onActivated déclenche l’affectation à `tts.engine` du texte courant correspondant à l’index actuel de la liste déroulante.
Label {
text: qsTr("Engine:")
}
ComboBox {
id: enginesComboBox
Layout.fillWidth: true
model: tts.availableEngines()
onActivated: {
tts.engine = textAt(currentIndex)
updateLocales()
updateVoices()
}
}Les deux dernières lignes de l’extrait de code ci-dessus montrent que les paramètres régionaux et les voix disponibles sont également mis à jour à ce stade, car ils dépendent du moteur sélectionné. Ces fonctions sont abordées dans une section suivante.
La méthode ` localesComboBox ` est implémentée de la même manière que ` engineComboBox`, mais sans mettre à jour les moteurs disponibles.
Label {
text: qsTr("Locale:")
}
ComboBox {
id: localesComboBox
Layout.fillWidth: true
onActivated: {
let locales = tts.availableLocales()
tts.locale = locales[currentIndex]
updateVoices()
}
}
Label {
text: qsTr("Voice:")
}
ComboBox {
id: voicesComboBox
Layout.fillWidth: true
}Sélection du volume, de la hauteur et de la vitesse
Ces commandes sont implémentées à l’aide de ` Sliders ` comme suit :
Label {
text: qsTr("Volume:")
}
Slider {
id: volumeSlider
from: 0
to: 1.0
stepSize: 0.2
value: 0.8
Layout.fillWidth: true
}
Label {
text: qsTr("Pitch:")
}
Slider {
id: pitchSlider
from: -1.0
to: 1.0
stepSize: 0.5
value: 0
Layout.fillWidth: true
}
Label {
text: qsTr("Rate:")
}
Slider {
id: rateSlider
from: -1.0
to: 1.0
stepSize: 0.5
value: 0
Layout.fillWidth: true
}
}
}Mise à jour des options disponibles
En utilisant le signal ` Component.onCompleted `, les opérations suivantes sont effectuées une fois que l’instance racine ` ApplicationWindow ` a été instanciée.
- L'index «
enginesComboBox» est défini sur le moteur actuellement sélectionné de `tts`. - Les paramètres régionaux et les voix disponibles sont mis à jour.
- L’état actuel de
ttsest signalé.
Component.onCompleted: {
enginesComboBox.currentIndex = tts.availableEngines().indexOf(tts.engine)
// some engines initialize asynchronously
if (tts.state == TextToSpeech.Ready) {
engineReady()Utilisées dans toute l’application, les fonctions ` updateLocales() ` et ` updateVoice() ` sont implémentées comme suit :
} else {
tts.stateChanged.connect(root.engineReady)
}
tts.updateStateLabel(tts.state)
}
function engineReady() {
tts.stateChanged.disconnect(root.engineReady)
if (tts.state != TextToSpeech.Ready) {
tts.updateStateLabel(tts.state)
return;
}
updateLocales()
updateVoices()
}
function updateLocales() {
let allLocales = tts.availableLocales().map((locale) => locale.nativeLanguageName)
let currentLocaleIndex = allLocales.indexOf(tts.locale.nativeLanguageName)
localesComboBox.model = allLocales
localesComboBox.currentIndex = currentLocaleIndex
}
function updateVoices() {
voicesComboBox.model = tts.availableVoices().map((voice) => voice.name)
let indexOfVoice = tts.availableVoices().indexOf(tts.voice)
voicesComboBox.currentIndex = indexOfVoiceExécution de l'exemple
Vous pouvez exécuter l’exemple à partir de :
- Qt Creator
Ouvrez le mode « Welcome » et sélectionnez l’exemple dans « Examples ». Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.
- Qt Extension for Visual Studio Code
Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.
© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
