第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

网页中文本朗读功能开发实现分享(3)

时间:2017-12-12 09:37来源:segmentfault 作者:跌名 点击: 我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
注意要把针对段落的语音处理和其他地方的分开。为什么? 因为段落是个块级元素,鼠标移入段落中的空白时,如:段落前后空白、首行缩进、末行剩余空

  注意要把针对段落的语音处理和其他地方的分开。为什么? 因为段落是个块级元素,鼠标移入段落中的空白时,如:段落前后空白、首行缩进、末行剩余空白等,是不应该触发朗读的,如果不阻止掉,进行这些区域将直接触发整段文字的朗读,失去了我们对段落文本内分隔的意义,而且,无论什么方式转化语音都是要时间的,大段内容可能需要较长时间,影响语音输出的体验。

  文本合成语音

  上面我们是直接使用了 speakText(text) 和 stopSpeak() 两个方法来触发语音的朗读和停止。

  我们来看下如何实现这个两个功能。

  其实现代浏览器默认已经提供了上面功能:

  var speechSU = new window.SpeechSynthesisUtterance();

  speechSU.text = '你好,世界!';

  window.speechSynthesis.speak(speechSU);

  复制到浏览器控制台看看能不能听到声音呢?(需要Chrome 33+、Firefox 49+ 或 IE-Edge)

  利用一下两个API即可:

  SpeechSynthesisUtterance 用于语音合成

  lang : 语言 Gets and sets the language of the utterance.

  pitch : 音高 Gets and sets the pitch at which the utterance will be spoken at.

  rate : 语速 Gets and sets the speed at which the utterance will be spoken at.

  text : 文本 Gets and sets the text that will be synthesised when the utterance is spoken.

  voice : 声音 Gets and sets the voice that will be used to speak the utterance.

  volume : 音量 Gets and sets the volume that the utterance will be spoken at.

  onboundary : 单词或句子边界触发,即分隔处触发 Fired when the spoken utterance reaches a word or sentence boundary.

  onend : 结束时触发 Fired when the utterance has finished being spoken.

  onerror : 错误时触发 Fired when an error occurs that prevents the utterance from being succesfully spoken.

  onmark : Fired when the spoken utterance reaches a named SSML "mark" tag.

  onpause : 暂停时触发 Fired when the utterance is paused part way through.

  onresume : 重新播放时触发 Fired when a paused utterance is resumed.

  onstart : 开始时触发 Fired when the utterance has begun to be spoken.

  SpeechSynthesis : 用于朗读

  paused : Read only 是否暂停 A Boolean that returns true if the SpeechSynthesis object is in a paused state.

  pending : Read only 是否处理中 A Boolean that returns true if the utterance queue contains as-yet-unspoken utterances.

  speaking : Read only 是否朗读中 A Boolean that returns true if an utterance is currently in the process of being spoken — even if SpeechSynthesis is in a paused state.

  onvoiceschanged : 声音变化时触发

  cancel() : 情况待朗读队列 Removes all utterances from the utterance queue.

  getVoices() : 获取浏览器支持的语音包列表 Returns a list of SpeechSynthesisVoice objects representing all the available voices on the current device.

  pause() : 暂停 Puts the SpeechSynthesis object into a paused state.

  resume() : 重新开始 Puts the SpeechSynthesis object into a non-paused state: resumes it if it was already paused.

  speak() : 读合成的语音,参数必须为SpeechSynthesisUtterance的实例 Adds an utterance to the utterance queue; it will be spoken when any other utterances queued before it have been spoken.

  详细api和说明可参考:

  MDN - SpeechSynthesisUtterance

  MDN - SpeechSynthesis

  那么上面的两个方法可以写为:

  var speaker = new window.SpeechSynthesisUtterance();

  var speakTimer,

  stopTimer;

  // 开始朗读

  function speakText(text) {

  clearTimeout(speakTimer);

  window.speechSynthesis.cancel();

  speakTimer = setTimeout(function () {

  speaker.text = text;

  window.speechSynthesis.speak(speaker);

  }, 200);

  }

  // 停止朗读

  function stopSpeak() {

  clearTimeout(stopTimer);

  clearTimeout(speakTimer);

  stopTimer = setTimeout(function () {

  window.speechSynthesis.cancel();

  }, 20);

  }

  因为语音合成本来是个异步的操作,因此在过程中进行以上处理。

  现代浏览器已经内置了这个功能,两个API接口兼容性如下:

  Feature

  Chrome

  Edge

  Firefox (Gecko)

  Internet Explorer

  Opera

  Safari

  (WebKit) Basic

  support 33

  (Yes)

  49 (49)

  No support

  ?

  7

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕