I am trying to use the SpeechSynthesisUtterance to have the question text and answer choices read aloud to the user. I found another post in the Qualtrics Community that showed how to do this. Is it possible to add a play button next to the question so that the user can have it read to them if needed and it doesn't start being read automatically?
Below is the JavaScript that I have so far:
Qualtrics.SurveyEngine.addOnReady(function()
{
var msg = new SpeechSynthesisUtterance('${q://QID2/QuestionText}. Option one, Not at all possible to change. Option two, a little possible to change. Option three, somewhat possible to change. Option four, quite possible to change. Option five, completely possible to change');
window.speechSynthesis.speak(msg);
});
Add Play Button for SpeechSynthesisUtterance
+34
+44Hello jflowers1
The below code worked for me, I have made modifications to include a mic icon you can change it as per your need:
HTML (Include in question):
YOUR TEXT TO SPEAK
JS:
Qualtrics.SurveyEngine.addOnload(function()
{
var txtInput = document.querySelector('#txtInput');
var btnSpeak = document.querySelector('#btnSpeak');
var synth = window.speechSynthesis;
var voices = [];
PopulateVoices();
if(speechSynthesis !== undefined){
speechSynthesis.onvoiceschanged = PopulateVoices;
}
btnSpeak.addEventListener('click', ()=> {
var toSpeak = new SpeechSynthesisUtterance(txtInput.textContent);
toSpeak.voice = voices[0]; // Spanish
synth.speak(toSpeak);
});
function PopulateVoices(){
voices = synth.getVoices();
voices.forEach((item, index) => console.log(item.name, index));
}
});
Hope this helps!
+34Thank you, Deepak! That worked great. Do you know of a way to have it also read the answer choices without having to display them in the question text? I tried putting them in the TxtInput section but that made them appear in the question text.
+44Hello jflowers1
You can change first line of code to this:
var txtInput = document.querySelector('#Questions');
Hope this helps!
+34Deepak I see the following line in your code:
toSpeak.voice = voices[0]; // Spanish
My survey is in English, but I also have a Spanish translation. Is it possible to have it read the text using the language that is selected in the dropdown at the top of the page?
+44jflowers1 you will have to capture the Q_lang value and specify the voice for each language you are using. I can give you the headstart of capturing the value, hopefully you find your way ahead on your own.
var language=jQuery('[id="Q_lang"]').find(":selected").val();
Hope it helps!
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.