Javascript: Text in Sprache / Audio umwandeln

Heute habe ich mal was ganz spassigs für euch und zwar habt ihr euch schon mal gefragt, wie man einen Text vorlesen lassen könnte? Ich zeige euch heute den Weg mit Javascript. Wenn ihr jetzt genau aufpasst, dann lernt ihr wie man ein Javascript Script einbaut das dem Browser erlaubt alles vorzulesen und dann direkt abzuspielen.

Jetzt könnt ihr nämlich sehr einfach euer WordPress Webseite mit Buttons erweitern die dann eure Blogbeiträge vorlesen. Einen echten Gewinn für die Barrierefreiheit im Internet.

Video

HTML

<h1>Text zu Sprache</h1>
    <textarea id="text" >Der Europa-Park steht ungeschlagen an der Spitze der besten Freizeitparks der Welt.</textarea>
   
    <button id="abspielen">Abspielen</button>

CSS

body {
        width: 90%;
        margin: 0 auto;
    }
    #text {
        width: 100%;
        height: 50vh;
    }

Javascript

<script>
const abspielen = document.getElementById('abspielen');

const textInput = document.getElementById('text');

abspielen.addEventListener('click', () => {

    playText(textInput.value)
})

function playText(text) {
    const gesprochenes = new SpeechSynthesisUtterance(text)
    
    //gesprochenes.lang = "de-DE";


    speechSynthesis.speak(gesprochenes)

}
</script>