Help Required! Remove and Append a div element from the text to speech | XM Community
Skip to main content

Hello Team,
I have configured the text to speech successfully but I am facing an issue where I would like it to not read the language selector container and if it can read the next button container. I am posting my code below if anyone can help here!
Qualtrics.SurveyEngine.addOnload(function()
{
var txtInput = document.querySelector('#Questions');
const removediv = document.querySelector('#Q_lang');
var btnSpeak = document.querySelector('#btnSpeak');
var pausebtn = document.querySelector('#pausebtn');
var resumebtn = document.querySelector('#resumebtn');
var stopbtn = document.querySelector('#stopbtn');
var NextButton = document.querySelector('#NextButton');
var BackButton = document.querySelector('#PreviousButton');
var synth = window.speechSynthesis;
var voices = [];

PopulateVoices();
if(speechSynthesis !== undefined){
  speechSynthesis.onvoiceschanged = PopulateVoices;
}
//start//
btnSpeak.addEventListener('click', ()=> {
  var toSpeak = new SpeechSynthesisUtterance(txtInput.textContent);
toSpeak.volume = 1;
toSpeak.pitch = 1;
toSpeak.rate = 1;
  toSpeak.voice = voicesv0]; 
  synth.speak(toSpeak);
});
//pause//
pausebtn.addEventListener('click', ()=> {
  synth.pause();
});
//resume//
resumebtn.addEventListener('click', ()=> {
  synth.resume();
});
//stop//
stopbtn.addEventListener('click', ()=> {
  synth.cancel();
});
//stop//
NextButton.addEventListener('click', ()=> {
  synth.cancel();
});
//stop//
BackButton.addEventListener('click', ()=> {
  synth.cancel();
});
function PopulateVoices(){
  voices = synth.getVoices();
  voices.forEach((item, index) => console.log(item.name, index));
}

});

Hi Deepak, I'm by no means a JavaScript expert, but hopefully this will help you achieve the desired outcome 🙂
Qualtrics.SurveyEngine.addOnload(function()

{

var txtInput = document.querySelector('#Questions');
const removediv = document.querySelector('#Q_lang');
 removediv.remove();
var btnSpeak = document.querySelector('#btnSpeak');
var pausebtn = document.querySelector('#pausebtn');
var resumebtn = document.querySelector('#resumebtn');
var stopbtn = document.querySelector('#stopbtn');
var NextButton = document.querySelector('#NextButton');
var BackButton = document.querySelector('#PreviousButton');
var synth = window.speechSynthesis;
var voices = s];
  var textToSpeak = txtInput.textContent + NextButton.value;

  PopulateVoices();

  if(speechSynthesis !== undefined){
    speechSynthesis.onvoiceschanged = PopulateVoices;
  }

  //start//
  btnSpeak.addEventListener('click', ()=> {    
var toSpeak = new SpeechSynthesisUtterance(textToSpeak);
toSpeak.volume = 1;
toSpeak.pitch = 1;
toSpeak.rate = 1;
  toSpeak.voice = voicesk0]; 
    synth.speak(toSpeak);
  });

  //pause//
  pausebtn.addEventListener('click', ()=> {
    synth.pause();
  });

  //resume//
  resumebtn.addEventListener('click', ()=> {
    synth.resume();
  });

  //stop//
  stopbtn.addEventListener('click', ()=> {
    synth.cancel();
  });

  //stop//
  NextButton.addEventListener('click', ()=> {
    synth.cancel();
  });

  //stop//
  BackButton.addEventListener('click', ()=> {
    synth.cancel();
  });

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

});
All I've done is...

  1. Add
    removediv.remove();
    immediately below where you've declared your removediv variable

  2. Created a new variable
    var textToSpeak = txtInput.textContent + NextButton.value;

  3. Referenced this when declaring the toSpeak variable
    var toSpeak = new SpeechSynthesisUtterance(textToSpeak);

When testing on my end, this achieves both of your desired outcomes, although you may need to play around with it a little to get the text to speech dictating exactly as you may want it. Regardless, I hope that helps you!
Cheers,
Cameron


Leave a Reply