Speech Synthesis API入门

Speech Synthesis API非常容易实现。事实上,只需两行代码即可让您的网络应用与用户交流。

var utterance = new SpeechSynthesisUtterance('Hello Treehouse');
window.speechSynthesis.speak(utterance);
speechSynthesis 接口
  • speak(SpeechSynthesisUtterance)- 这个方法应该传递一个实例SpeechSynthesisUtterance。然后它会将此添加到需要说出的话语队列中。
  • cancel() - 此方法将从队列中删除所有话语。如果当前正在说话,那么它将被停止。
  • pause() - 此方法将立即暂停正在讲话的任何话语。
  • resume() - 此方法将使浏览器恢复说出先前暂停的话语。
  • getVoices() - 此方法返回浏览器支持的所有语音的列
speechSynthesis属性 默认是false
  • pending-true 如果队列中有尚未开始说话的话语。
  • speaking- true 如果当前正在说话。
  • paused- true 如果当前暂停了话语。
SpeechSynthesisVoice 属性
  • name - 描述语音的人类可读名称。
  • voiceURI - 指定该语音的语音合成服务的位置的URI。
  • lang - 此语音的语言代码。
  • default- true如果这是浏览器使用的默认语音,则设置为。
  • localService - API可以使用本地和远程服务来处理语音合成。如果此属性设置为true语音合成,则此语音由本地服务处理。如果false是正在使用的远程服务。
该text属性允许您设置您希望说出的文本。这将覆盖先前传递给SpeechSynthesisUtterance构造函数的任何文本。
utterance.text = 'Hello Treehouse';
该lang属性使您能够指定文本的语言。这将默认为HTML文档的语言。
utterance.lang = 'en-US';
该volume属性允许您调整语音的音量。应在此处指定介于0和1之间的浮点值。默认值为1。
utterance.volume = 1;
该rate属性定义了应该说出文本的速度。这应该是介于0和10之间的浮点值,默认值为1。
`utterance.rate` = 1;
该pitch属性控制文本的高低。这应该是介于0和2之间的浮点值,值为1是默认值。
utterance.pitch = 1;

注:本volume,rate和pitch属性不被所有的声音支持
监听SpeechSynthesisUtterance事件
  • onstart- start当话语开始被说出时,事件被触发。
  • onend- end一旦说出话语,就会触发事件。
  • onerror- error如果发生阻止说出话语的错误,则触发该事件。
  • onpause- pause如果话语在说话时暂停,则会触发事件。
  • onresume- resume如果暂停说话暂停,则会触发该事件。
  • onboundary- boundary只要在说出话语时达到单词或句子边界,就会触发事件。
  • onmark- mark语音合成标记语言(SSML)文件中到达“标记”标记时触发事件。我们在这篇文章中没有涉及SSML。只要知道可以使用基于XML的SSML文档将语音数据传递给话语。这样做的主要优点是,在构建具有大量需要合成的文本的应用程序时,可以更轻松地管理语音内容。
var utterance = new SpeechSynthesisUtterance('Hello Treehouse');

utterance.onstart = function(event) {
    console.log('The utterance started to be spoken.')
};

window.speechSynthesis(utterance);

#检查浏览器支持
if ('speechSynthesis' in window) {
    // You're good to go!
} else {
    // Ah man, speech synthesis isn't supported.
}

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 132,241评论 18 139
  • 女儿昨天给我出了一道题,说学校辩论队下周有一场辩论赛,辩题是“穷养儿富养女是不是过时的生育观”,队里让队员的父母首...
    清晨起阅读 1,789评论 32 32
  • 以前因为书的出名而拍成电视剧,如今却反过来了,反而是因为一部电视剧使很多书籍为人所知晓和追捧,就如《人民的名义》里...
    林晖先生阅读 71评论 0 0
  • 工具:油画棒、水彩技法:油水分离 最近一直在用油画棒画画 它虽然比较难刻画细节 但贵在色彩艳丽 高纯度的颜色 让人...
    悠然小妖阅读 570评论 4 10