解释

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上找到的文档与我将向您展示的此演示之间，您应该能够轻松实现这种功能。

我建议您避免使用具有非常简单功能的库，也就是充当本机技术的包装，这会阻止您学习基础技术。我的意思是一定要以它们为起点，但是我建议您以后学习本机方法，这将帮助您成为开发人员，至少我是这样认为的。

演示

通过此演示，我已经复制并粘贴了可以在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>

PS

我希望这对您有所帮助，一切顺利！：）

Answer 2

之所以不能一直工作的原因是由于您正在使用Text-2-Speech库。有时似乎无法加载。 Check your code here。

突出显示文字的文字转语音

2 个答案:

解释

演示

PS