我正在编辑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分别输出每个单词,所以我知道将文本分离成数组的工作和循环的工作-我认为这只是计时。
抱歉,如果这没什么意义,我想有些清楚可以帮助我开始解决这个问题。
最佳答案
背景:meSpeak.js将输入文本连同用于渲染wav文件的选项发送到嵌入式eSpeak。然后使用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()”从队列中移出下一个单词,对其进行记录,并以自身作为回调(第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();
}
这样,在调用函数时,由渲染音频流引起的延迟将出现在单个块中,并且将对预渲染的音频流(针对每个单词)进行播放而没有任何进一步的负载(在后台)。从不利的一面看,这将增加应用程序的内存占用,因为每个单词的所有高分辨率音频流都立即保存在数组“流”中。