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> |
<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;
} |
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> |
<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>
0 Kommentare
Trackbacks/Pingbacks