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...
- Add
removediv.remove();
immediately below where you've declared your removediv variable - Created a new variable
var textToSpeak = txtInput.textContent + NextButton.value;
- 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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.