<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
Select Voice: <select id='voiceList'></select> <br><br>
<input id='txtInput' /> <br><br>
<button id='btnSpeak'>Speak!</button>
<script>
var txtInput = document.querySelector('#txtInput');
var voiceList = document.querySelector('#voiceList');
var btnSpeak = document.querySelector('#btnSpeak');
var synth = window.speechSynthesis;
var voices = [];
PopulateVoices();
if (speechSynthesis !== undefined) {
speechSynthesis.onvoiceschanged = PopulateVoices;
}
btnSpeak.addEventListener('click', () => {
var toSpeak = new SpeechSynthesisUtterance(txtInput.value);
var selectedVoiceName = voiceList.selectedOptions[0].getAttribute('data-name');
voices.forEach((voice) => {
if (voice.name === selectedVoiceName) {
toSpeak.voice = voice;
}
});
synth.speak(toSpeak);
});
function PopulateVoices() {
voices = synth.getVoices();
var selectedIndex = voiceList.selectedIndex < 0 ? 44 : voiceList.selectedIndex;
voiceList.innerHTML = '';
voices.forEach((voice) => {
var listItem = document.createElement('option');
listItem.textContent = voice.name;
listItem.setAttribute('data-lang', voice.lang);
listItem.setAttribute('data-name', voice.name);
voiceList.appendChild(listItem);
});
voiceList.selectedIndex = selectedIndex;
}
</script>
</body>
</html>
Digər dildə:
EN