Javascript 如何在播放wav时延迟Mespeak.js中的合成显示文字

Javascript 如何在播放wav时延迟Mespeak.js中的合成显示文字,javascript,text-to-speech,wav,speech-synthesis,Javascript,Text To Speech,Wav,Speech Synthesis,我正在编辑Mespeak.js来帮助一个有视觉跟踪问题的朋友 我一直在浏览Mespeak.js(),试图找出如何在每个单词说话时抓住它,然后在wav文件播放时在屏幕上显示它 我认为这与以数组形式返回数据有关,然后在wav播放时显示数组。我甚至不确定这是否可能(或者原始数据是什么样子) 这是我的 div id="display"> <span>Here.</span> </div> <script type="text/javascript

我正在编辑Mespeak.js来帮助一个有视觉跟踪问题的朋友

我一直在浏览Mespeak.js(),试图找出如何在每个单词说话时抓住它,然后在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));
};
div id=“display”>
在这里
变量超时ID
var texttosend=prompt('Text to Split');
var res=texttosend.split(“”)
var arrayLength=分辨率长度;
函数刷新(word){
meSpeak.speak(res[i],{speed:100});
console.log(res[i]);
$(“#显示范围”)。文本(word);
};
console.log('here');

对于(var i=0;iBackground:meSpeak.js将输入文本发送到嵌入式eSpeak,并带有呈现wav文件的选项。然后使用WebAudio API或音频元素播放此wav文件。因此,无法判断当前播放的是连续语音的哪一部分(因为我们不知道单个单词何时开始或分别在音频流的哪个点结束)。但是,另一方面,我们可能知道一些事情,即音频流的播放何时结束。也许,我们可以使用这个

为了提供此问题的解决方案,meSpeak.speak()将回调函数作为可选的第三个参数,该参数将在话语回放完成后调用。(有关复杂示例,请参阅JS 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()),如:

函数speakWords2(txt){
变量i,字,流=[];
函数playNext(){
如果(i

这样,当调用函数时,渲染音频流引起的延迟将出现在单个块中,并且预渲染的音频流(对于每个单词)将在没有任何进一步加载的情况下(在后台)回放。不利的一面是,这将增加应用程序的内存占用,因为每个单词的所有高分辨率音频流都同时保存在数组“streams”中。

到目前为止,您有什么发现?使用代码更新了帖子。我使用[here][1]中找到的代码进行了刷新循环。[1]:谢谢!我能够通过单独合成每个单词来匹配声音和文本显示。我使用jQuery的setTimeout,并将时间设置为每分钟单词数。
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();
}