JavaScript浏览器端文本转语音

文本合成语音

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

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

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

var speechSU = new window.SpeechSynthesisUtterance();speechSU.text = 'Hello,World';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接口兼容性如下：

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari(WebKit) Basicsupport 33(Yes)49 (49)No support?7

如果要兼容其他浏览器或者需要一种完美兼容的解决方案，可能就需要服务端完成了，根据给定文本，返回相应语音即可，百度语音 http://yuyin.baidu.com/docs就提供这样的服务。

参考来源：https://blog.cdswyda.com/post/2017120914