Question

我们在javascript中做了一个文本转语音功能。现在唯一的问题是它无法正常工作。当按下播放按钮时，它应该告诉主体标签中的所有内容。问题在于，大多数情况下它不起作用，当它起作用时，它还会告诉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>

Answer 1

它应该非常简单。我在您的行上看到您正在查询所有正文文本Content，但事实并非如此。进入JS控制台并查询：document.querySelector('body').textContent

您应该确切地看到作为参数传递给的内容：

话语=新的SpeechSynthesisUtterance（document.querySelector（'body'）。textContent）;

现在由您来决定，您将必须过滤要读取的内容，方法是将其放入特定的DIV中，或者根据保留要读取内容的复杂逻辑从页面中剥离HTML。

Answer 2

定义要从中读取语音识别的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>

javascript中的自动文本转语音功能无法正常工作

2 个答案: