JS浏览器端文本转语音，Vedio标签

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.

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

var speaker = new window.SpeechSynthesisUtterance();
var speakTimer,
    stopTimer;

// 开始朗读
function speakText(text) {
    clearTimeout(speakTimer);
    window.speechSynthesis.cancel();
    speakTimer = setTimeout(function () {
        speaker.text = text;
        speaker.text = text;
	    speaker.rate = 1;// 二倍速（默认为 1，范围 0.1～10）
	    speaker.pitch = 1;// 高音调（数字越大越尖锐，默认为 1，范围 0～2 ）
	    speaker.volume = 1;// 音量 0.5 倍（默认为1，范围 0～1）
        window.speechSynthesis.speak(speaker);
    }, 200);
}

// 停止朗读
function stopSpeak() {
    clearTimeout(stopTimer);
    clearTimeout(speakTimer);
    stopTimer = setTimeout(function () {
        window.speechSynthesis.cancel();
    }, 20);
}

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

document.getElementById(“audioPlay”).volume = 0.5 //设置音量
this.$refs.audioPlay.play()//播放this.$refs.audioPlay.pause() // 暂停