Beispiel:JS-WebSpeech-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Sprachausgabe mit Web Speech - 1</title>
<style>
output {
font-family: monospace;
}
.not-supported {
color: #c82f04;
font-weight: bold;
}
[contenteditable] {
padding: 1em 1em 1em 3em;
margin: 1em 0 1em 1em;
outline: thin dashed #CCC;
position: relative;
}
[contenteditable]::after {
position: absolute;
content: '✏';
left: 0em;
top: 0em;
font-size: 2em;
transform: rotate(45deg);
}
[contenteditable]:hover {
outline: medium dashed #c82f04;
}
</style>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#speak').addEventListener('click', speak);
if ('speechSynthesis' in window) {
document.querySelector('#output').textContent = 'Ihr Browser unterstützt SpeechSynthesis.';
} else {
document.querySelector('#output').textContent = 'Sorry, Ihr Browser unterstützt keine SpeechSynthesis.';
document.querySelector('#output').classList.add('not-supported');
}
function speak() {
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = document.querySelector('#utterance').textContent;
msg.lang = 'en-US';
msg.onend = function(e) {
document.querySelector('#output').textContent = (event.elapsedTime/1000) + ' Sek';
};
speechSynthesis.speak(msg);
}
});
</script>
</head>
<body>
<h1>Sprachausgabe mit Web Speech - 1</h1>
<p id="utterance" contenteditable>Hello my friend!</p>
<button type="button" id="speak">▶ (Sprich!)</button>
<p><label for="output">Dauer: </label><output id="output"></output>
</body>
</html>
