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

$target.addClass(splitConfig.hightlightCls);

}

// 开妒攀朗读

speakText(getText(e.target));

}).on('mouseleave.speak-help', speakTags, function (e) {

var $target = $(e.target);

if ($target.find('.' + splitConfig.wrapCls).length) {

return;

}

// 图片样式

if (e.target.nodeName.toLowerCase() === 'img') {

$target.css({

border: 'none'

});

} else {

$target.removeClass(splitConfig.hightlightCls);

}

// 停止语音

stopSpeak();

});

// 段落内文本朗读

$(document).on('mouseenter.speak-help', '.' + splitConfig.wrapCls, function (e) {

$(this).addClass(splitConfig.hightlightCls);

// 开妒攀朗读

speakText(getText(this));

}).on('mouseleave.speak-help', '.' + splitConfig.wrapCls, function (e) {

$(this).removeClass(splitConfig.hightlightCls);

// 停止语音

stopSpeak();

});

留意要把针对段落的语音处理和其他处所的分开。为什么？因为段落是个块级元素，鼠标移入段落中的空白时，如：段落前后空白、首行缩进、末行残剩空白等，是不该该触发朗读的，如不雅不阻拦掉落，进行这些区域将直接触发整段文字的朗读，掉去了我们对段落文本内分隔的意义，并且，无论什么方法转化语音都是要时光的，大年夜段内容可能须要较长时光，影响语音输出的体验。

文本合成语音

应用一下两个API即可：

膳绫擎我们是直接应用了 speakText(text) 和 stopSpeak() 两个办法来触发语音的朗读和停止。
我们来看下若何实现这个两个功能。
其实现代浏览器默认已经供给了膳绫擎功能：
```
var speechSU = new window.SpeechSynthesisUtterance(); 
speechSU.text = '你好，世界！'; 
window.speechSynthesis.speak(speechSU); 
```
SpeechSynthesisUtterance 用于语音合成
- lang : 说话 Gets and sets the language of the utterance.
- 因为语音合成本来是个异步的操作，是以在过程中进行以上处理。
  pitch : 音高 Gets and sets the pitch at which the utterance will be spoken at.
  6/8 首页上一页 4 5 6 7 8 下一页尾页
  
  　　推荐阅读
  
  　　固态硬盘寿命短？平衡算法来续命
  
  开辟者大年夜赛路演 | 12月16日，技巧立异，北京不见不散硬件挖的坑真的可以经由过程软件来填吗？实际上不少硬>>>详细阅读
  
  本文标题：网页中文本朗读功能开发实现分享
  
  地址：http://www.17bianji.com/lsqh/39663.html
  
  1/2 1