WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

Javascript: Text in Sprache / Audio umwandeln

von | Sep 22, 2022 | Allgemein | 1 Kommentar

Schlagwörter: Javascript

Inhaltsverzeichnis

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

1
2
3
4
<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

1
2
3
4
5
6
7
8
body {
        width: 90%;
        margin: 0 auto;
    }
    #text {
        width: 100%;
        height: 50vh;
    }

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>




1 Kommentar

  1. Hagen Hengelhaupt

    Cool, danke ! erspart mir viel arbeit 🙂

    Antworten

Trackbacks/Pingbacks

  1. Python: Text in Sprache / Audio und oder Datei umwandeln - […] spassiges für euch und zwar habe ich ja bereits letzte Woche mit Javascript das Thema behandelt (Javascript: Text in…

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert