As a beginner, I was making a text-to-speech project.
Now it's working fine, But I want to change the input
with p
, div
, or others tags.
That means I want to replace (input
tag) with others. Now how can I do that?
And also I want to remove the (select
tag) option as my wish.
Help me kindly.
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 ? 0 : 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;
}
<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>
</body>