Forum - Text to Speech (TTS) - Feste Textblöcke in Sprache umwandeln - Teil 1!

<style>
  .speak_div {text-align:center; margin-top:10px; font-weight:bold; font-size:12px; clear:both; }
  .speak {border: 1px solid transparent; display:inline-block; cursor:pointer !important; border-radius:5px; ;}
  .speak:hover {background:#ffffff  !important; border: 1px solid #aaaaaa !important; }
  .speakAktiv {background:#aa2222; color: #ffffff !important;}
  .speak img {width:40px; margin:0;}
  .speak2 img {width:20px; border: 1px solid transparent;}
  .speak2 {border-radius:5px; padding: 2px 5px 5px 5px; cursor: pointer;}
  .speak2:hover img {background:#ffffff  !important; border: 1px solid #aaaaaa  !important; border-radius:5px;}
</style>
 
<script>
window.addEventListener('load', function(){
 
  {{message.startlist}}
    /* Auslösung - Im Beitrag oben links - Alle Templates */
    $('#xquoteable_p_{{message:id}}').prepend('<span style="display:flex; align-items: center;"><span class="abspielen{{message:id}} speak"><img src="//files.homepagemodules.de/b104774/a_501_ecd9c017.png"></span> &nbsp;Beitrag vorlesen!</span><hr>');
  
    /* Auslösung - Im Beitrag unten links - Alle Templates */
    $('#xquoteable_p_{{message:id}}').after('<br><hr><span style="display:flex; align-items: center;"><span class="abspielen{{message:id}} speak"><img src="//files.homepagemodules.de/b104774/a_501_ecd9c017.png"></span> &nbsp;Beitrag vorlesen!</span>');
 
    {{template==144|177.start}}
    /* Auslösung - Sidebar unten mittig - Nur Templates(v4+v6) */
    $('#msg{{message:id}}_cont .sidebarcontent').append('<div class="speak_div"><div class="abspielen{{message:id}} speak"><img src="//files.homepagemodules.de/b104774/a_501_ecd9c017.png"></div><p>Beitrag vorlesen!</p></div><br>');
    $('#post_{{message:id}} .message_leftcol').append('<div class="speak_div"><div class="abspielen{{message:id}} speak"><img src="//files.homepagemodules.de/b104774/a_501_ecd9c017.png"></div><p>Beitrag vorlesen!</p></div><br>');
  
    /* Auslösung - Beitrag untere Leiste - Nur Templates(v4+v6) */
    $('#msg{{message:id}}_cont .mreply').prepend('<span class="abspielen{{message:id}} speak2"><img src="//files.homepagemodules.de/b104774/a_501_ecd9c017.png"><small>Beitrag vorlesen!</small></span>');
    $('#post_{{message:id}} .message_rightcol .message_actions').prepend('<span class="abspielen{{message:id}} speak2"><img src="//files.homepagemodules.de/b104774/a_501_ecd9c017.png"><small>Beitrag vorlesen!</small></span>');  
    {{template==144|177.end}}  
 
    speechSynthesis.cancel(); 
    $('.abspielen{{message:id}}').on('click',function(){
      $('.abspielen{{message:id}}').removeClass('speakAktiv');
      if(speechSynthesis.speaking){     
        speechSynthesis.cancel();
        $('.abspielen{{message:id}}').removeClass('speakAktiv');
      } else {
        playtext($("#xquoteable_p_{{message:id}}").text());
        $(this).addClass('speakAktiv');
      };
    });
  {{message.end}} 
 
  function playtext(text) {
    const message10 = new SpeechSynthesisUtterance(text); 
    message10.addEventListener("end", function() {
    {{message.startlist}}
      $('.abspielen{{message:id}}').removeClass('speakAktiv');
    {{message.end}} 
    });
    speechSynthesis.speak(message10);
  };
  
});
</script>