"Sprich" Button hinter der Frage mit Java Script

Question

Moin zusammen,

ich würde gerne vor jeder Frage ein "Sprich" Button machen, der von einem Script mit SpeechSynthesisUtterance() angesprochen wird.

Bisher habe ich die Buttons so in der Frage erstellt. Das funktioniert auch ganz gut:

 <button type="button" onclick="myFunction()">Click me</button> Wie alt sind Sie?

Der Plan ist, den Button mit JS anzusteuern. Ich denke das ich hier irgendwo einen Fehler gemacht habe. Hat jemand eine Idee? Das Script habe ich bei den Seiten des Fragebogens im HTML Code eingebettet. Ich wäre für jeder Hilfe dankbar :)

<script>
function myFunction() {
	    
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; 
msg.voiceURI = 'native';
msg.volume = 1; 
msg.rate = 1; 
msg.pitch = 2; 
msg.text = 'Please select your language in the drop down menue. In the following pages you can listen to text by highlighting it with your mouse';
msg.lang = 'en-US';
};

</script>

Answer 1

Der Code sieht prinzipiell korrekt aus - wenn Sie auf den Knopf Klicken, sollte die Funktion aufgerufen werden.

Allerdings wird die Funktion nur funktionieren, wenn die Klasse SpeechSynthesisUtterance definiert ist, z.B. durch ein eingebundenes JavaScript

Wenn Sie genauer verfolgen möchten, was da passiert, dann suchen und öffnen Sie bitte die JavaScript-Fehlerkonsole in Ihrem Browser. Berichten Sie gerne, was dort an Fehlern aufgeführt wird.

Answer 2

Das folgende Script läuft ohne Probleme sobald ich die Frage aufrufe:

<script>   
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; 
msg.voiceURI = 'native';
msg.volume = 1; 
msg.rate = 1; 
msg.pitch = 2; 
msg.text = 'Please select your language in the drop down menue. In the following pages you can listen to text by highlighting it with your mouse';
msg.lang = 'en-US';

msg.onend = function(e) {
  console.log('Finished in ' + event.elapsedTime + ' seconds.');
};

speechSynthesis.speak(msg);

</script>

Sobald ich function myFunction() {} davor setze, um es mit dem HTML Button zu verknüpfen geht nichts mehr. Das Script gibt dann ein "undefined" aus. Also liegt das Problem wirklich an der Verknüpfung an Button <button type="button" onclick="myFunction()">Click me</button> und JS. Können Sie mir ggf. hier weiterhelfen?