Add Play Button for SpeechSynthesisUtterance | XM Community
Skip to main content

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); 
});

Hello 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 = voicesv0]; // Spanish
  synth.speak(toSpeak);
});

function PopulateVoices(){
  voices = synth.getVoices();
  voices.forEach((item, index) => console.log(item.name, index));
}

});

Hope this helps!

Thank 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.

Hello jflowers1
You can change first line of code to this:
var txtInput = document.querySelector('#Questions');

Hope this helps!

Deepak 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?

jflowers1 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


Terms & Conditions