Самодельный преобразование текста в речь в javascript не работает должным образом
Мы сделали функцию преобразования текста в речь на javascript. Единственная проблема сейчас в том, что он не работает должным образом. Когда кнопка воспроизведения нажата, предполагается, что она расскажет все, что находится внутри тегов body. Проблема в том, что в большинстве случаев он не работает, а когда работает, он также сообщает коду javascript, который находится за пределами тега body. Как я могу это исправить, чтобы он работал каждый раз, когда нажимается кнопка воспроизведения, и рассказывал все только в теге body?
onload = function() {
if ('speechSynthesis' in window) with(speechSynthesis) {
var playEle = document.querySelector('#play');
var pauseEle = document.querySelector('#pause');
var stopEle = document.querySelector('#stop');
var flag = false;
playEle.addEventListener('click', onClickPlay);
pauseEle.addEventListener('click', onClickPause);
stopEle.addEventListener('click', onClickStop);
function onClickPlay() {
if (!flag) {
flag = true;
utterance = new SpeechSynthesisUtterance(document.querySelector('body').textContent);
utterance.lang = 'nl-NL';
utterance.rate = 0.7;
utterance.onend = function() {
flag = false;
playEle.className = pauseEle.className = '';
stopEle.className = 'stopped';
};
playEle.className = 'played';
stopEle.className = '';
speak(utterance);
}
if (paused) {
playEle.className = 'played';
pauseEle.className = '';
resume();
}
}
function onClickPause() {
if (speaking && !paused) {
pauseEle.className = 'paused';
playEle.className = '';
pause();
}
}
function onClickStop() {
if (speaking) {
stopEle.className = 'stopped';
playEle.className = pauseEle.className = '';
flag = false;
cancel();
}
}
}
else { /* speech synthesis not supported */
msg = document.createElement('h5');
msg.textContent = "Detected no support for Speech Synthesis";
msg.style.textAlign = 'center';
msg.style.backgroundColor = 'red';
msg.style.color = 'white';
msg.style.marginTop = msg.style.marginBottom = 0;
document.body.insertBefore(msg, document.querySelector('div'));
}
}
<button id=play>Play</button>
<button id=pause>Pause</button>
<button id=stop>Stop</button>
Даже если мы поместим его в div и прочитаем div, у нас все равно будет та же проблема.
У меня работает, пока я нажимаю «Стоп» перед повторным воспроизведением. Я думаю, вам не хватает паузы = истина, и если (говоря)
То же, что @mplungjan. Проблема с чтением кода возникает, когда ваш код находится в body, что также вполне ожидаемо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это должно быть очень просто. Я вижу в вашей строке, что вы запрашиваете все содержимое основного текста, но это не должно быть так. Перейдите в консоль JS и запросите: document.querySelector('body').textContent
Вы должны точно видеть, что вы передаете в качестве аргументов:
произнесение = новый SpeechSynthesisUtterance(document.querySelector('body').textContent);
Итак, теперь дело за вами, вам придется отфильтровать то, что вы хотите прочитать, поместив это в определенный DIV или удалив HTML со страницы в соответствии со сложной логикой, сохранив только то, что вы хотите прочитать.
Простите... Вы должны добавить console.info(document.querySelector('body').textContent); прямо перед строкой: utterance = new SpeechSynthesisUtterance(document.querySelector('body').textContent); Для того, чтобы посмотреть, что вы передаете функции (только Play Pause и Stop).
Определите DIV, из которого вы хотите, чтобы распознавание речи читалось:
</head>
<body>
<div>
<button id=play>Play</button>
<button id=pause>Pause</button>
<button id=stop>Stop</button>
</div>
<div id = "readFrom">
Just a test o my friend mplungjan
</div>
<script type = "text/javascript">
window.onload = function () {
if ('speechSynthesis' in window)
with (speechSynthesis) {
var playEle = document.querySelector('#play');
var pauseEle = document.querySelector('#pause');
var stopEle = document.querySelector('#stop');
var flag = false;
playEle.addEventListener('click', onClickPlay);
pauseEle.addEventListener('click', onClickPause);
stopEle.addEventListener('click', onClickStop);
function onClickPlay() {
if (!flag) {
flag = true;
utterance = new SpeechSynthesisUtterance(document.querySelector('#readFrom').innerHTML);
utterance.lang = 'nl-NL';
utterance.rate = 0.7;
utterance.onend = function () {
flag = false;
playEle.className = pauseEle.className = '';
stopEle.className = 'stopped';
};
playEle.className = 'played';
stopEle.className = '';
speak(utterance);
}
if (paused) {
playEle.className = 'played';
pauseEle.className = '';
resume();
}
}
function onClickPause() {
if (speaking && !paused) {
pauseEle.className = 'paused';
playEle.className = '';
pause();
}
}
function onClickStop() {
if (speaking) {
stopEle.className = 'stopped';
playEle.className = pauseEle.className = '';
flag = false;
cancel();
}
}
}
else { /* speech synthesis not supported */
msg = document.createElement('h5');
msg.textContent = "Detected no support for Speech Synthesis";
msg.style.textAlign = 'center';
msg.style.backgroundColor = 'red';
msg.style.color = 'white';
msg.style.marginTop = msg.style.marginBottom = 0;
document.body.insertBefore(msg, document.querySelector('div'));
}
}
</script>
</body>
Почему бы не поместить текст в div или textarea вместо того, чтобы читать содержимое тела?