Hi all,
I am having some difficulties with a code that is not functioning. The HTML code is allowing for the buttons to appear correctly, however the Java script I have is not working. The speech to text is not being read and thus the buttons are not functional. Can anyone let me know what I have done wrong?
Thank you so so much!]

HTML Code:

Survey Question/ answer text goes here https://icon-library.com/images/voice-recorder-icon/voice-recorder-icon-12.jpg" style="width:20px;height:20px;" />

Java Script Code:
Qualtrics.SurveyEngine.addOnReady(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 = r];
 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 = voices;0]; 
  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));
 }

});