javascript - 突出显示文本的文本到语音

Question

对于部分面向无法阅读的人的问卷，我需要一个文本到语音应用程序。出于可用性原因，应在突出显示(“标记”)时阅读文本。在研究如何执行此操作的不同方法时，我发现了以下工具，它应该可以做到这一点。由于某些原因，它不会工作。我想在问卷软件 SoSci 上使用它，所以这可能是个问题(有人在那里有任何经验吗？)。

我将不胜感激任何提示，我所缺少的，但也非常欢迎其他解决问题的方法!

祝福

<script>        
function getSelectionText() {
        var text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        // for Internet Explorer 8 and below. For Blogger, you should use &amp;&amp; instead of &&.
        } else if (document.selection && document.selection.type != "Control") { 
            text = document.selection.createRange().text;
        }
        return text;
    }
    $(document).ready(function (){ // when the document has completed loading
       $(document).mouseup(function (e){ // attach the mouseup event for all div and pre tags
          setTimeout(function() { // When clicking on a highlighted area, the value stays highlighted until after the mouseup event, and would therefore stil be captured by getSelection. This micro-timeout solves the issue. 
             responsiveVoice.cancel(); // stop anything currently being spoken
             responsiveVoice.speak(getSelectionText()); //speak the text as returned by getSelectionText
          }, 1);
       });
    });
    </script>

Answer 1

解释

好的，所以我提到你学习如何使用 SpeechSynthesis ，你说你觉得自己作为程序员的能力还不够强，无法实现一个利用这个特性的应用程序。在您可以在 MDN 上找到的文档和我将要向您展示的这个演示之间，您应该能够毫不费力地实现这样的功能。

我建议您尽量避免使用功能非常简单的库，也就是充当原生技术的包装器，它会阻止您学习底层技术。我的意思是无论如何，将它们作为起点，但我建议您稍后学习 native 方法，这将帮助您作为开发人员取得进步，至少我是这么认为的。

演示

在这个演示中，我几乎复制并粘贴了可以在 MDN 上找到的代码。

我的代码和可以在 MDN 上找到的代码的唯一区别是我使用的是 "use strict;" 和一个立即调用的调用函数。在这种情况下，我建议您阅读更多关于 strict mode 的内容和 IIFE .

// A simple IIFE function. 
(function() {
  "use strict"; // For the sake of practice.

  if (typeof speechSynthesis === 'undefined')
    return;

  // Some config stuffs... 
  var voiceSelect = document.getElementById("voiceSelect");
  var myPhrase = 'Hello World!';
  var voices = [];
  
  // This is essentially similar to jQuery's $.ready.
  var ready = function(callback) { 
    var d = document, s = d.readyState;

    // DOMContentLoaded was fired
    if (s == "complete" || s == "loaded" || s == "interactive") {
      callback();
    } else {
      if (d.addEventListener) {
        d.addEventListener("DOMContentLoaded", callback, false);
      } else {
        d.attachEvent("onDOMContentLoaded", callback);
      }
    }
  };

  // This is a function to display all possible voice options. 
  function populateVoiceList() {
    voices = speechSynthesis.getVoices();

    for (var i = 0; i < voices.length; i++) {
      var option = document.createElement('option');
      option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
      option.textContent += voices[i].default ? ' -- DEFAULT' : '';
      option.setAttribute('data-lang', voices[i].lang);
      option.setAttribute('data-name', voices[i].name);
      document.getElementById("voiceSelect").appendChild(option);
    }
  }

  // This is the handler for when the select tag is changed. 
  function handler() {
    var utterThis = new SpeechSynthesisUtterance(myPhrase);
    var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');

    for (var i = 0; i < voices.length; i++) {
      if (voices[i].name === selectedOption) {
        utterThis.voice = voices[i];
      }
    }

    speechSynthesis.speak(utterThis);
  };

  // This is your code to get the selected text.
  function getSelectionText() {
    var text = "";
    if (window.getSelection) {
      text = window.getSelection().toString();
      // for Internet Explorer 8 and below. For Blogger, you should use &amp;&amp; instead of &&.
    } else if (document.selection && document.selection.type != "Control") {
      text = document.selection.createRange().text;
    }
    return text;
  }

  // This is the on mouse up event, no need for jQuery to do this. 
  document.onmouseup = function(e) {
    setTimeout(function() {
      speechSynthesis.cancel();
      myPhrase = getSelectionText();
      handler();
    }, 1);
  };

  // Some place for the application to start. 
  function start() {
    populateVoiceList();
    if (speechSynthesis.onvoiceschanged !== undefined)
      speechSynthesis.onvoiceschanged = populateVoiceList;

    voiceSelect.onchange = handler;
    setTimeout(handler, 75);
  }

  // Run the start function. 
  ready(start);
})();

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices -->
<hr/>
<select id="voiceSelect"></select>
<hr/>
<p>Testing... Testing... One Two Three... Testing</p>
<p>I like big butts and I can not lie, you other brothers can't deny!</p>

---

附言

希望本文对您有所帮助，祝一切顺利! :)