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 WebSpeech - 1</title>
<style>
output {
font-family: monospace;
}
.not-supported {
color: #c32e04;
font-weight: bold;
}
</style>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#play').addEventListener('click', speak);
if ('speechSynthesis' in window) {
document.querySelector('#output').innerText = 'Ihr Browser <strong>unterstützt </strong> Speech Synthesis.';
} else {
document.querySelector('#output').innerText = 'Sorry, Ihr Browser <strong>unterstützt keine </strong> Speech Synthesis.';
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 = 'Hello my friend';
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 WebSpeech - 1</h1>
<button type="button" id="play">▶ (Sprich!)</button>
<p><label for="output">Dauer: </label><output id="output"></output>
</body>
</html>
