WAV播放时如何在Mespeak.js显示单词中延迟合成

Question

我正在编辑Mespeak.js，以帮助出现视觉跟踪问题的朋友。

我一直在浏览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将输入文本与呈现wav文件的选项一起发送到嵌入式eSpeak。 然后使用WebAudio API或Audio元素播放该wav文件。 因此，无法分辨当前正在播放连续语音的哪一部分（由于我们不知道，单个单词何时开始或分别在音频流的哪个点结束）。 但是，另一方面，我们可能知道一些事情，即流音频的播放何时结束。 也许我们可以使用这个？

为了提供此问题的解决方案，meSpeak.speak（）将回调函数作为可选的第3个参数，在语音播放结束后将调用该函数。 （有关一个复杂的示例，请参见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（）”从队列中移出下一个单词，对其进行记录，并以自身作为回调（第3个参数）调用meSpeak.speak（）。 因此，如果音频结束，则将调用“ speakNext（）”来处理下一个单词。 如果队列最终将是空的，我们将最终达成其他条款。 （您可能希望用更复杂的显示代替简单的日志记录。）

在进一步的优化步骤中，您可以首先渲染部分流（使用“ 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();
}

这样，在调用函数时，由渲染音频流引起的延迟将在单个块中发生，并且将对预渲染的音频流（针对每个单词）进行播放而没有任何进一步的负载（在后台）。 从不利的一面看，这将增加应用程序的内存占用，因为每个单词的所有高分辨率音频流都立即保存在数组“流”中。