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