javascript - 如何在播放 wav 时延迟 Mespeak.js 中的合成显示单词

Question

我正在编辑 Mespeak.js 来帮助解决视觉跟踪问题的 friend 。

我一直在浏览 Mespeak.js ( http://www.masswerk.at/mespeak/ ) 并试图弄清楚如何在说出每个单词时抓取它，然后在 wav 文件播放时将其显示在屏幕上。

我认为这与将数据作为数组返回，然后在 wav 播放时显示该数组有关。我什至不确定这是否可能(或原始数据是什么样子)。

这就是我所拥有的

div id="display">
    <span>Here.</span>
</div>

<script type="text/javascript">
var timeoutID
var texttosend = prompt('Text to Split');
var res = texttosend.split(" ")
var arrayLength = res.length;
function refresh(word) {
    meSpeak.speak(res[i], {speed: 100});
    console.log(res[i]);
    $( "#display span" ).text(word);
    };

console.log('here');
for (var i = 0; i <= arrayLength; i++) {
        timoutID = window.setTimeout(refresh(res[i]), 50000+(i*50000));
};

这里有两个问题 - 我认为它们都与延迟有关。无论我将 timeoutID 设置为什么，文本都会立即合成，并且唯一显示的单词是最后一个。我尝试过使用 setTimeout 的变体，并且尝试过 jQuery 的延迟。关于如何提供帮助有什么想法吗？ console.log 分别输出每个单词，因此我知道将文本分离到数组中是有效的，并且循环也有效 - 我认为现在只是时机。

抱歉，如果这没有多大意义 - 我想一些清晰的信息可以帮助我开始解决这个问题。

Answer 1

背景:meSpeak.js 将输入文本发送到嵌入式 eSpeak，并提供渲染 wav 文件的选项。然后使用 WebAudio API 或 Audio 元素播放该 wav 文件。因此，无法判断当前正在播放连续话语的哪一部分(因为我们不知道单个单词何时开始或分别在音频流的哪个点结束)。但是，另一方面，我们可能知道一些事情，即音频流的播放何时完成。也许，我们可以用这个？

为了解决这个问题，meSpeak.speak() 将回调函数作为可选的第三个参数，该函数将在话语播放完成后调用。 (请参阅 JS-rap 演示 http://www.masswerk.at/mespeak/rap/ ，了解一个复杂的示例。)请注意，如果您使用单个单词执行此操作，您将丢失气味中单词的任何上下文，因此您将丢失任何旋律调制话语/句子的。此外，单词之间会有明显的延迟。

示例:

function speakWords(txt) {
  var words = txt.split(/\s+/);

  function speakNext() {
    if (words.length) {
      var word = words.shift();
      console.log('speaking: ' + word);
      meSpeak.speak(word, {}, speakNext);
    }
    else {
      console.log('done.');
    }
  }

  speakNext();
}

这里，内部函数“speakNext()”从队列中转移下一个单词，记录它并调用 meSpeak.speak() 并将其自身作为回调(第三个参数)。因此，如果音频结束，将调用“speakNext()”来处理下一个单词。如果队列最终为空，我们最终将遇到 else 子句。 (您可能希望用更复杂的显示来替换简单的日志记录。)

在进一步的优化步骤中，您可以首先渲染部分流(使用选项“rawdata”)，然后播放它们(使用 meSpeak.play())，例如:

function speakWords2(txt) {
  var i, words, streams = [];

  function playNext() {
    if (i < streams.length) {
      console.log('speaking: ' + words[i]);
      meSpeak.play(streams[i], 1, playNext);
      i++;
    }
    else {
      console.log('done.');
    }
  }

  // split utterance and pre-render single words to stream-data
  words = txt.split(/\s+/);
  for (i=0; i < words.length; i++)
      streams.push( meSpeak.speak(words[i], {rawdata: true}) );
  // now play the partial streams (words) in a callback-loop
  i=0;
  playNext();
}

这样，当调用该函数时，由渲染音频流引起的延迟将发生在单个 block 中，并且预渲染的音频流(针对每个单独的单词)将在没有任何进一步负载的情况下回放(在背景)。不利的一面是，这会增加应用程序的内存占用，因为每个单词的所有高分辨率音频流都同时保存在数组“streams”中。