- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
目前,我正在制作一个简单的应用程序,其中使用语音合成 API 来朗读文本。我想在说话时突出显示单词(粗体)。我目前有一个非常基本的实现,使用 'onboundary' 事件来执行此操作。但是,我想知道是否有更好/更好的方法,因为我的实现是基于一些假设。
var words;
var wordIdx;
var text;
var utterance = new SpeechSynthesisUtterance();
utterance.lang = 'en-UK';
utterance.rate = 1;
window.onload = function(){
document.getElementById('textarea').innerText = 'This is a text area. It is used as a simple test to check whether these words are highlighted as they are spoken using the web speech synthesis API (utterance).';
document.getElementById('playbtn').onclick = function(){
text = document.getElementById('textarea').innerText;
words = text.split(' ');
wordIdx = 0;
utterance.text = text;
speechSynthesis.speak(utterance);
}
utterance.onboundary = function(event){
var e = document.getElementById('textarea');
var it = '';
for(var i = 0; i < words.length; i++){
if(i === wordIdx){
it += '<strong>' + words[i] + '</strong>';
} else {
it += words[i];
}
it += ' ';
}
e.innerHTML = it;
wordIdx++;
}
}
最佳答案
您的代码不起作用,但我只是编写了一个可以按您希望的方式工作的示例。打开 fiddle 看看它的工作
var utterance = new SpeechSynthesisUtterance();
var wordIndex = 0;
var global_words = [];
utterance.lang = 'en-UK';
utterance.rate = 1;
document.getElementById('playbtn').onclick = function(){
var text = document.getElementById('textarea').value;
var words = text.split(" ");
global_words = words;
// Draw the text in a div
drawTextInPanel(words);
spokenTextArray = words;
utterance.text = text;
speechSynthesis.speak(utterance);
};
utterance.onboundary = function(event){
var e = document.getElementById('textarea');
var word = getWordAt(e.value,event.charIndex);
// Show Speaking word : x
document.getElementById("word").innerHTML = word;
//Increase index of span to highlight
console.info(global_words[wordIndex]);
try{
document.getElementById("word_span_"+wordIndex).style.color = "blue";
}catch(e){}
wordIndex++;
};
utterance.onend = function(){
document.getElementById("word").innerHTML = "";
wordIndex = 0;
document.getElementById("panel").innerHTML = "";
};
// Get the word of a string given the string and the index
function getWordAt(str, pos) {
// Perform type conversions.
str = String(str);
pos = Number(pos) >>> 0;
// Search for the word's beginning and end.
var left = str.slice(0, pos + 1).search(/\S+$/),
right = str.slice(pos).search(/\s/);
// The last word in the string is a special case.
if (right < 0) {
return str.slice(left);
}
// Return the word, using the located bounds to extract it from the string.
return str.slice(left, right + pos);
}
function drawTextInPanel(words_array){
console.log("Dibujado");
var panel = document.getElementById("panel");
for(var i = 0;i < words_array.length;i++){
var html = '<span id="word_span_'+i+'">'+words_array[i]+'</span> ';
panel.innerHTML += html;
}
}
请玩以下 fiddle :
Highlight spoken word SpeechSynthesis Javascript fiddle
它用蓝色高亮了div中的口语,你可以自定义加粗的样式,但重要的是思路。
注意:请记住,onboundary
事件仅针对 native (本地)语音合成触发。更改 Google 示例(即 Google UK English Male)中指定的语音以获取 google 远程语音,将使您的代码失败,因为 SpeechSynthesis API 似乎只能播放由 google 服务器生成的声音。
关于javascript - 语音合成 API 在说话时突出显示单词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38120478/
我有一个将文本文件读入字节数组的应用程序,然后我将这个数组转换为字符串并将其作为输入发送到 speak 方法SpeechSynthesizer 但 SPEAK 方法不说话.. 如果我只是发送一个常规的
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 1 年前。 Improve this ques
简而言之,它非常简单并且包含最少的conding(只有两行) 但我还是没听到任何声音。但 Google TTS 在我的笔记本电脑上运行完美。 当我运行下面的页面时,我只看到“一二”警告。
我正在使用语音合成 API 来发音不同单词的列表。我的应用程序在通过 Canvas 说出单词时将其动画化。我意识到当我说出新的话语时: var msg = new SpeechSynthesisUtt
我在 Chrome 33 中尝试使用语音合成 API 时遇到问题。它可以完美地处理较短的文本,但如果我尝试较长的文本,它只会停在中间。像这样停止一次后,在浏览器重新启动之前,语音合成在 Chrome
这个问题在这里已经有了答案: CS0120: An object reference is required for the nonstatic field, method, or property
目前,我正在制作一个简单的应用程序,其中使用语音合成 API 来朗读文本。我想在说话时突出显示单词(粗体)。我目前有一个非常基本的实现,使用 'onboundary' 事件来执行此操作。但是,我想知道
我在 Chrome 33 中尝试使用语音合成 API 时遇到问题。它可以完美地处理较短的文本,但如果我尝试较长的文本,它只会停在中间。像这样停止一次后,在浏览器重新启动之前,语音合成在 Chrome
我想在 osx 上将文本翻译为音频,类似于此处的操作: http://developer.apple.com/library/mac/#samplecode/CocoaSpeechSynthesisE
我正在尝试更改语音合成 API 选项的实例(例如音调、音量等),但它不起作用。出于某种原因,我可以将英国男性声音更改为英国女性声音的唯一方法是调用 var voices 变量两次,但这是我可以更改的唯
我正在尝试使用 html5 中的语音合成来用阿拉伯语交流消息,但是它不起作用。我运行以下脚本来检查 chrome 支持的语言,而阿拉伯语不是其中之一。 window.addEventListener(
长话短说,语音合成音量、速率和音调不起作用。是否有其他人遇到此问题并知道如何解决它,还是只有我一个人? 长话短说: 对我来说,语音合成的音量、速率和音调不起作用。这是我的语音功能: function
我正在尝试使用网络语音 API 来转录葡萄牙语中的单词,我将属性设置为“pt-BR”(不幸的是葡萄牙语 - 不支持欧洲语)但是,总是用英语回复。 有人可以帮忙吗? 谢谢 代码:
我目前正在使用 Visual Studio Office 工具开发 Word 插件,我想在其中实现 TTS。由于它是一个 Web 应用程序,是否可以使用 SpeechSynthesis 等 Web 语
我想使用 iOS 7 新的语音合成 API,我的应用程序已本地化为法语和英语。 要实现这一点,必须本地化两件事: 语音文本:我将它放在通常的 localizable.string 文件中,并使用 NS
在将 PromptBuilder 用于各种用途的过程中,我在语音数字方面遇到了死胡同。当用户被问及他们为某物支付了多少钱时,他们说“50”(是的,只是“50”,而不是“50 美元”),我得到的值是“五
我有一个使用 HTML5 语音合成 API 的 Web 应用程序,它可以工作 - 但只能使用 native 语音。这是我的代码: var msg = new SpeechSynthesisUttera
我正在使用 WebSpeech 的 speechSynthesis 模块让网络应用程序说话。但是,您似乎只能将话语添加到队列中,然后对整个队列进行 pause()、resume() 和 cancel(
我目前正在试用适用于 iOS 的 ivona SDK,声音很棒,非常非常自然。 但是我正在使用的声音(德国女性)有一个文件大小为 230 MB 的语音文件。 当我想使用 4 种声音时,我的应用大约有
我是一名优秀的程序员,十分优秀!