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

Add Play Button for SpeechSynthesisUtterance

  • August 24, 2022
  • 5 replies
  • 541 views
jflowers1
Level 4 ●●●●
Forum|alt.badge.img+34

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

5 replies

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • Deepak
  • August 24, 2022

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

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

});

Hope this helps!

jflowers1
Level 4 ●●●●
Forum|alt.badge.img+34
  • jflowers1
  • Author
  • Level 4 ●●●●
  • August 25, 2022

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.

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • Deepak
  • August 25, 2022

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

Hope this helps!

jflowers1
Level 4 ●●●●
Forum|alt.badge.img+34
  • jflowers1
  • Author
  • Level 4 ●●●●
  • August 31, 2022

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?

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • Deepak
  • August 31, 2022

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!



Terms & ConditionsAccessibility statement