Forum - Text to Speech (TTS) - Texte in Sprache umwandeln und übersetzen - Teil 1-5!

[Sprache_1]
 

...
 

[/Sprache_1]
 

<div class="ttsText" style="display:none;">
 

...
 

</div><span class="ttsButton"><img width="50px" src="//files.homepagemodules.de/b104774/a_501_ecd9c017.png"></span>
 

//files.homepagemodules.de/b104774/a_503_9b72960f.png
 

Reihenfolge: 0
 

<div onclick="xob_insert('[Sprache_1]','Herzlich willkommen![/Sprache_1]')" class="xob_icon_cont" id="icon_6002"><img title="Vorlese-Button einfügen" class="xob_icon" src="//files.homepagemodules.de/b104774/a_503_9b72960f.png"></div>
 

[Sprache_1]Herzlich willkommen![/Sprache_1]
 

<style>
.ttsButton {position: relative; cursor:pointer;}
.ttsHover {position: absolute; left: 5%; top: 40%; background: #eee; box-shadow: 0 4px 12px rgba(0,0,0,0.8); border-radius: 4px;z-index: 9999;}
.ttsButton.speakAktiv img, .ttsText.speakAktiv {background:#aa2222 !important;color:#fff!important; border-radius:5px;}
.ttsText.speakAktiv {padding:0 !important; display: inline-block;}
</style>
 
<script>
document.addEventListener("DOMContentLoaded", () => { 
  // Bendet Ansage beim Seiten-Reload und TAB-Wechsel
  document.addEventListener("visibilitychange", () => {if (document.hidden) {speechSynthesis.cancel();$('.speak, .ttsButton').removeClass('speakAktiv');}});
 
  // Reset der Ansage + Buttonfarbe
  const stopAll = () => {speechSynthesis.cancel();document.getSelection().removeAllRanges();$("#ttsSelectionBtn").hide();$(".speak, #ttsSelectionBtn").removeClass("speakAktiv");};
  
  $('.ttsButton').on('click', async function () {
    // Ansagensteuerung
    stopAll(); const $t = $(this); const active = $t.hasClass('speakAktiv'); await new Promise(r => setTimeout(r, 120)); if (active) return;
    // Text auslesen
    let text = $t.hasClass('ttsText') ? $t.text().trim() : $t.prev('.ttsText').text().trim();
    // Verbessert Ansage bei Aufzählungen
    text = text.replace(/(\d+)\.[\s\u00A0]*/g, "Punkt $1, ");
    
    // Übersetzung "de-DE" (Deutsch), "en-US" (Englisch-USA), "en-GB" (Englisch-UK), "fr-FR" (Französisch), "es-ES" (Spanisch)
    const u = new SpeechSynthesisUtterance(text); u.lang = "de-DE"; 
    
    // Ansage bei Textende oder Störung beenden
    $t.addClass('speakAktiv'); u.onend = () => $t.removeClass('speakAktiv'); u.onerror = () => $t.removeClass('speakAktiv');
    // Startet Ansage
    speechSynthesis.speak(u); 
  });
});
</script>
 

[Sprache_1]
 

...
 

[/Sprache_1]
 

<div class="ttsText" style="display:none;">
 

...
 

</div><span class="ttsButton"><img width="50px" src="//files.homepagemodules.de/b104774/a_501_ecd9c017.png"></span>
 

//files.homepagemodules.de/b104774/a_503_9b72960f.png
 

Reihenfolge: 0
 

<div onclick="xob_insert('[Sprache_1]','Herzlich willkommen![/Sprache_1]')" class="xob_icon_cont" id="icon_6002"><img title="Vorlese-Button einfügen" class="xob_icon" src="//files.homepagemodules.de/b104774/a_503_9b72960f.png"></div>
 

[Sprache_1]Herzlich willkommen![/Sprache_1]
 

<script>
document.addEventListener("DOMContentLoaded", () => { 
  // Hover-Button für markierte Text-Blöcke
  $('.ttsVor.ttsButton').hover(function () { $(this).append('<img class="ttsHover" src="//files.homepagemodules.de/b104774/a_501_ecd9c017.png">'); }, function () { $(this).find('.ttsHover').remove(); });
});
</script>
 

[Sprache_1]
 

...
 

[/Sprache_1]
 

<div class="ttsText" style="display:none;">
 

...
 

</div><span class="ttsButton"><img width="50px" src="//files.homepagemodules.de/b104774/a_501_ecd9c017.png"></span>
 

//files.homepagemodules.de/b104774/a_503_9b72960f.png
 

Reihenfolge: 0
 

<div onclick="xob_insert('[Sprache_1]','Herzlich willkommen![/Sprache_1]')" class="xob_icon_cont" id="icon_6002"><img title="Vorlese-Button einfügen" class="xob_icon" src="//files.homepagemodules.de/b104774/a_503_9b72960f.png"></div>
 

[Sprache_1]Herzlich willkommen![/Sprache_1]
 

<style>
#ttsSelectionBtn{display:none; position:absolute; background:#aa2222; color:#fff; padding:3px; border-radius:4px; cursor:pointer !important; z-index:999999; box-shadow:0 3px 8px rgba(0,0,0,0.4);}
</style>
 
<div id="ttsSelectionBtn">
  <img src="//files.homepagemodules.de/b104774/a_501_ecd9c017.png">
</div>
 
<script>
document.addEventListener("DOMContentLoaded", () => {
  const btn = document.getElementById("ttsSelectionBtn");
  let selText = ""; let speaking = false;
 
  // Auswahl erkennen
  document.addEventListener("mouseup", () => {
    const s = window.getSelection().toString().trim(); if (!s) {btn.style.display = "none"; selText = ""; return;} selText = s;
    const r = window.getSelection().getRangeAt(0).getBoundingClientRect(); btn.style.left = (r.right + window.scrollX + 8) + "px"; btn.style.top  = (r.top   + window.scrollY - 4) + "px"; btn.style.display = "block";
  });
 
  // Verhindert Auswahlverlust beim Klick
  btn.onmousedown = e => e.preventDefault();
 
  // TTS starten/stoppen
  btn.addEventListener("click", () => {
    if (speaking) { speechSynthesis.cancel(); speaking = false; btn.style.display = "none"; window.getSelection().removeAllRanges(); return;}
    if (!selText) return;
    speechSynthesis.cancel(); $(".speak, .ttsButton").removeClass("speakAktiv");
 
    const u = new SpeechSynthesisUtterance(selText);
    u.lang = "de-DE";   // Übersetzung "de-DE" (Deutsch), "en-US" (Englisch-USA), "en-GB" (Englisch-UK), "fr-FR" (Französisch), "es-ES" (Spanisch)
 
    u.onend = () => {speaking = false; btn.style.display = "none";}; speaking = true;
    speechSynthesis.speak(u);
  });
 
});
</script>
 

[Sprache_1]
 

...
 

[/Sprache_1]
 

<div class="ttsText" style="display:none;">
 

...
 

</div><span class="ttsButton"><img width="50px" src="//files.homepagemodules.de/b104774/a_501_ecd9c017.png"></span>
 

//files.homepagemodules.de/b104774/a_503_9b72960f.png
 

Reihenfolge: 0
 

<div onclick="xob_insert('[Sprache_1]','Herzlich willkommen![/Sprache_1]')" class="xob_icon_cont" id="icon_6002"><img title="Vorlese-Button einfügen" class="xob_icon" src="//files.homepagemodules.de/b104774/a_503_9b72960f.png"></div>
 

[Sprache_1]Herzlich willkommen![/Sprache_1]
 

<style>
.speak, .ttsButton {cursor:pointer; position:relative;}
.speak img{width:50px;padding:1px;}
.speak_div{text-align:center;margin-top:10px;font-weight:bold;clear:both;}
.speak_div small{display:block;}
.speak_th_O{border-bottom:1px solid #aaa;margin-bottom:10px;padding:4px 0;}
.speak_th_U{border-top:1px solid #aaa;margin-top:10px;padding:4px 0;}
.speak_f .speakImg {width:20px; padding:3px;}
.speak.speakAktiv img, .ttsButton.speakAktiv img, .ttsText.speakAktiv {background:#aa2222;color:#fff;border-radius:5px; display:inline-block;}
.ttsHover{position:absolute;left:5vw;top:50%; bottom:50%;background:#eee;box-shadow:0 4px 12px rgba(0,0,0,.8);border-radius:4px;z-index:9999;}
#ttsSelectionBtn{display:none;position:absolute;background:#aa2222;color:#fff;padding:3px;border-radius:4px;cursor:pointer;z-index:999999;box-shadow:0 3px 8px rgba(0,0,0,.4);}
</style>
 
<div id="ttsSelectionBtn">
  <img src="//files.homepagemodules.de/b104774/a_501_ecd9c017.png">
</div>
 
<script>
document.addEventListener("DOMContentLoaded", function () {
  /* Lautsprechen-Grafik */
  var ICON = "//files.homepagemodules.de/b104774/a_501_ecd9c017.png";
 
  /* Sprache: "de-DE" (Deutsch), "en-US" (Englisch-USA), "en-GB" (Englisch-UK), "fr-FR" (Französisch), "es-ES" (Spanisch) */
  var TTS = {lang:"de-DE"}; function updateTTSMode(){TTS.lautschrift=TTS.lang.startsWith("de");} updateTTSMode(); if (!sessionStorage.getItem("ttsInitDone")) {sessionStorage.setItem("ttsInitDone", "1"); setTimeout(()=>{const u = new SpeechSynthesisUtterance(" ");u.volume = 0;u.lang = TTS.lang;speechSynthesis.speak(u);}, 300);}speechSynthesis.onvoiceschanged=function(){if(!TTS.lang.startsWith("de"))return; if(!speechSynthesis.getVoices().some(v=>v.lang.startsWith("de"))){TTS.lang="en-GB"; updateTTSMode();}};
 
  /* Lautschrift-Tabelle */
  const TTS_LAUT = {
    "admin":"Ädmin","button":"Badten","close":"Klohs","content":"Kontent","dashboard":"Däschbord","delete":"Delieht","download":"Daunlod","edit":"Äddit","file":"Feil","footer":"Futa","fullscreen":"Fuhllskrihn","gallery":"Gälleri","header":"Hedda","hover":"Hauwer","icon":"Eiken","iconbar":"Eikenbar","icons":"Eikens","image":"Immidsch","message":"Mässidsch","next":"Nekst","player":"Pläja","plugin":"Plakin",
    "preview":"Priwjuu","previous":"Priviees","profile":"Profeil","quote":"Kwoht","reply":"Riplai","save":"Sejf","script":"Skript","selection":"Seleckschen","sidebar":"Seidbar","speak":"Spiek","SpeechSynthesisUtterance":"Spietsch, Syntesiss","template":"Templäit","templates":"Templäit","topic":"Toppik","update":"Abdät","upload":"Ablod","url":"U-Ärr-Äll","view":"Wjuu","voice":"Wois"
  };
 
  // Lautschrift anwenden
  function applyLautschrift(t){for(let k in TTS_LAUT){t=t.replace(new RegExp("\\b"+k+"\\b","gi"),TTS_LAUT[k]);}return t;}
 
  // Aufzählung sprachlich verbessern
  function ttsPreprocess(t){t=t.replace(/(\d+)\.[\s\u00A0]*/g,"Punkt $1, ");return applyLautschrift(t);}
 
  // Reset + Stop bei TAB-Wechsel + Button-Wechsel + Seiten-Reload
  function resetSpeak(){$(".speak,.ttsButton,.ttsText").removeClass("speakAktiv");} function stopAll(){speechSynthesis.cancel();var s=document.getSelection();if(s&&s.removeAllRanges)s.removeAllRanges();resetSpeak();} document.addEventListener("visibilitychange",()=>{if(document.hidden)stopAll();});
 
  // Große Texte blockweises Vorlesen (1800 Zeichen)
  function speakChunks(text,$btn){stopAll();if(TTS.lautschrift)text=ttsPreprocess(text); var max=1800,parts=[]; while(text.length){if(text.length<=max){parts.push(text);break;} var s=text.slice(0,max),cut=Math.max(s.lastIndexOf(". "),s.lastIndexOf("! "),s.lastIndexOf("? "),s.lastIndexOf("\n"),s.lastIndexOf(" ")); if(cut<max*0.5)cut=max;parts.push(text.slice(0,cut)); text=text.slice(cut);}var i=0; $btn.addClass("speakAktiv");function next(){if(i>=parts.length)return resetSpeak();var u=new SpeechSynthesisUtterance(parts[i++].trim());u.lang=TTS.lang; u.onend=next; speechSynthesis.speak(u);} next();}
 
  
  /*** --- Button mit festen Text - Teil 1 --- ***/
  $(".ttsButton").on("click",function(){var $t=$(this),a=$t.hasClass("speakAktiv");if(a){stopAll();return;}stopAll();setTimeout(()=>{var raw=$t.hasClass("ttsText")?$t.text().trim():$t.prev(".ttsText").text().trim();var text=TTS.lautschrift?ttsPreprocess(raw):raw;var u=new SpeechSynthesisUtterance(text);u.lang=TTS.lang; $t.addClass("speakAktiv");u.onend=resetSpeak; u.onerror=resetSpeak; speechSynthesis.speak(u);},120);});
 
  
  /*** --- Hover-Botton mit festen Text - Erweiterung - Teil 2 */
  $(".ttsVor.ttsButton").hover(function(){$(this).append('<img class="ttsHover" src="'+ICON+'">');}, function(){$(this).find(".ttsHover").remove();});
 
  
  /*** --- Button setzen - Ganze Beiträge lesen - Teil 3 */
  {{message.startlist}}
    var sel=".abspielen{{message:id}}", speakBtn='<span class="abspielen{{message:id}} speak"><img class="speakImg" src="'+ICON+'"><small>Beitrag vorlesen!</small></span>';
  
    // Button in der Sidebar unten mittig (nur V4+V6)
    $('#msg{{message:id}}_cont .sidebarcontent').append('<div class="speak_div">' + speakBtn + '</div><br>');
    // $('.mbt #post_{{message:id}} .message_leftcol').append('<div class="speak_div">' + speakBtn + '</div><br>');
  
    // Button in der Fußleiste im Beitrag (nur V4+V6)
    $('#msg{{message:id}}_cont .mreply').prepend('<span class="speak_f">' + speakBtn + '</span>');
    // $('.mbt #post_{{message:id}} .message_rightcol .message_actions').prepend('<span class="speak_f">' + speakBtn + '</span>');
 
    // Button oben links im Beitrag (nur V4+V6)
    //$('#xquoteable_p_{{message:id}}').before('<div class="speak_th_O">' + speakBtn + '</div>');
    $('.mbt #xquoteable_p_{{message:id}}').before('<div class="speak_th_O">' + speakBtn + '</div>');
  
    // Button unten links im Beitrag  (nur V4+V6)
    //$('#xquoteable_p_{{message:id}}').after('<div class="speak_th_U">' + speakBtn + '</div>');
    $('.mbt #xquoteable_p_{{message:id}}').after('<div class="speak_th_U">' + speakBtn + '</div>');  
 
    $(sel).on("click",function(){var $t=$(this),a=$t.hasClass("speakAktiv");stopAll();setTimeout(()=>{if(!a)speakChunks($("#xquoteable_p_{{message:id}}").text().trim(),$t);},120);});  
  {{message.end}}
 
  
  /*** --- Markierten Text vorlesen - Teil 4 --- ***/
  var btn=document.getElementById("ttsSelectionBtn"),selText="",speaking=false; document.addEventListener("mouseup",function(){var s=window.getSelection().toString().trim();if(!s){btn.style.display="none";selText="";return;}selText=s;var r=window.getSelection().getRangeAt(0).getBoundingClientRect();btn.style.left=(r.right+window.scrollX+8)+"px";btn.style.top=(r.top+window.scrollY-4)+"px";btn.style.display="block";}); btn.onmousedown=e=>e.preventDefault(); btn.addEventListener("click",function(){if(speaking){speechSynthesis.cancel();speaking=false;btn.style.display="none";window.getSelection().removeAllRanges();resetSpeak();return;}if(!selText)return;stopAll();var text=TTS.lautschrift?ttsPreprocess(selText):selText;var u=new SpeechSynthesisUtterance(text);u.lang=TTS.lang; speaking=true;u.onend=()=>{speaking=false;btn.style.display="none";};speechSynthesis.speak(u);});
 
});
</script>