Помогите с модификацией проекта синтеза речи
Я новичок в программировании и создаю простое приложение для озвучивания текста. Сейчас все работает нормально, но хочу изменить несколько вещей.
Во-первых, мне нужно заменить поле ввода input на другие HTML теги типа p, div или что-то еще. То есть вместо того чтобы пользователь вводил текст, я хочу брать его из готовых элементов на странице.
Во-вторых, хочу убрать выпадающий список select с выбором голоса и задать один голос по умолчанию.
Как это можно реализовать? Вот мой рабочий код:
var textElement = document.querySelector('#textContent');
var speakerList = document.querySelector('#speakerList');
var playButton = document.querySelector('#playButton');
var speechAPI = window.speechSynthesis;
var availableVoices = [];
LoadVoices();
if (speechSynthesis !== undefined) {
speechSynthesis.onvoiceschanged = LoadVoices;
}
playButton.addEventListener('click', () => {
var utterance = new SpeechSynthesisUtterance(textElement.value);
var chosenVoice = speakerList.selectedOptions[0].getAttribute('data-name');
availableVoices.forEach((voice) => {
if (voice.name === chosenVoice) {
utterance.voice = voice;
}
});
speechAPI.speak(utterance);
});
function LoadVoices() {
availableVoices = speechAPI.getVoices();
var currentIndex = speakerList.selectedIndex < 0 ? 0 : speakerList.selectedIndex;
speakerList.innerHTML = '';
availableVoices.forEach((voice) => {
var option = document.createElement('option');
option.textContent = voice.name;
option.setAttribute('data-lang', voice.lang);
option.setAttribute('data-name', voice.name);
speakerList.appendChild(option);
});
speakerList.selectedIndex = currentIndex;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Speech App</title>
</head>
<body>
Выберите голос:
<select id='speakerList'></select><br><br>
<input id='textContent' /><br><br>
<button id='playButton'>Произнести!</button>
</body>