javascript中的自制文本到語音無法正常工作

Question

我們在javascript中創建了一個文本到語音功能。 現在唯一的問題是它無法正常工作。 當按下播放按鈕時，它應該告訴身體標簽內的所有內容。 問題是，大多數時候它不起作用，當它發生時，它還告訴javascript代碼它在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

應該很簡單。 我在你的線上看到你正在查詢所有正文內容但不應該是它。 轉到JS控制台並查詢： document.querySelector('body').textContent

您應該確切地看到您作為參數傳遞的內容：

utterance = new 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 個解決方案

解決方案1
0 2019-04-30 13:40:45

解決方案2
0 已采納 2019-04-30 13:50:58

javascript中的自制文本到語音無法正常工作

問題描述

2 個解決方案

解決方案1 0 2019-04-30 13:40:45

解決方案2 0 已采納 2019-04-30 13:50:58

解決方案1
0 2019-04-30 13:40:45

解決方案2
0 已采納 2019-04-30 13:50:58