原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649118413&idx=3&sn=3385dee75bcffa307baa79c3cde4095b&chksm=be587160892ff87605cf347eddad2ad7a55a957836a30a665416f8f976f6b2a3a75b8a4ad4df&scene=27
在做项目的过程中，遇到场景是客户要求播放语音的场景，这里需要js来实现文字转语音播放的功能。在不使用第三方API接口（这种方式需要外网），能想到的也就是利用html5的个API：SpeechSynthesis。
SpeechSynthesis用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等等。
实例对象属性
-
lang 获取并设置话语的语言
-
pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)
-
rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)
-
text 获取并设置说话时的文本
-
voice 获取并设置说话的声音
-
volume 获取并设置说话的音量
SpeechSynthesis方法
-
speak() 将对应的实例添加到语音队列中
-
cancel() 删除队列中所有的语音.如果正在播放,则直接停止
-
pause() 暂停语音
-
resume() 恢复暂停的语音
-
getVoices 获取支持的语言数组. 注意:必须添加在voiceschanged事件中才能生效
实例对象方法
onstart – 语音合成开始时候的回调。onpause – 语音合成暂停时候的回调。
onresume – 语音合成重新开始时候的回调。
onend – 语音合成结束时候的回调。
简单实现
先从最简单的例子说起，如果想让浏览器读出“你好，世界！”的声音，可以下面的js代码：只需要这么一点代码就足够了，大家可以在自己浏览器的控制台里面运行上面两行代码，看看有没有读出声音。let utterThis = new SpeechSynthesisUtterance('你好，世界！');speechSynthesis.speak(utterThis);
除了使用speak方法，我们还可以实例对象属性text，因此上面的代码也可以写成：
let utterThis = new SpeechSynthesisUtterance();utterThis.text = '你好，世界！';utterThis.lang = 'zh';//汉语utterThis.rate = 0.7;//语速speechSynthesis.speak(utterThis);
项目实战
html：JavaScript：<div class="voiceinator"><h1>听说 5000</h1><select name="voice" id="voices"><option value="">Select A Voice</option></select><label for="rate">Rate:</label><input name="rate" type="range" min="0" max="3" value="1" step="0.1"><label for="pitch">Pitch:</label><input name="pitch" type="range" min="0" max="2" step="0.1"><textarea name="text">你好 给你点?</textarea><button id="stop">Stop!</button><button id="speak">Speak</button></div>
const synth = window.speechSynthesis
const msg = new SpeechSynthesisUtterance()
let voices = []
const voicesDropdown = document.querySelector('[name="voice"]')
const options = document.querySelectorAll('[type="range"], [name="text"]')
const speakButton = document.querySelector('#speak')
const stopButton = document.querySelector('#stop')
msg.text = '你好 给你点?'
msg.lang = 'zh-CN'
synth.addEventListener('voiceschanged',getSupportVoices)
speakButton.addEventListener('click',throttle(handleSpeak,1000))
stopButton.addEventListener('click',handleStop)
options.forEach(e => e.addEventListener('change',handleChange))
function getSupportVoices() {
voices = synth.getVoices()
voices.forEach(e => {
const option = document.createElement('option')
option.value = e.lang
option.text = e.name
voicesDropdown.appendChild(option)
})
}
function handleSpeak(e) {
msg.lang = voicesDropdown.selectedOptions[0].value
synth.speak(msg)
}
function handleStop(e) {
synth.cancel(msg)
}
function handleChange(e) {
msg[this.name] = this.value
}
function throttle(fn,delay) {
let last = 0
return function() {
const now = new Date()
if(now - last > delay) {
fn.apply(this,arguments)
last = now
}
}
}
遇到问题
1、google chrome播放语音可能会卡住，所以无声音。解决方法：在播放语音之前先 调用一下cancel方法：window.speechSynthesis.cancel()3、SpeechSynthesisUtterance在浏览器会存在兼容性问题（如IE不支持），目前主流浏览器如Chrome，Edge，Safari等等都是支持的。解决方案,提示用户更换其他浏览器访问，代码：
标签：const,JavaScript,SpeechSynthesisUtterance,语音,synth,msg,speak From： https://www.cnblogs.com/yaohuimo/p/17266164.htmlif(!!window.SpeechSynthesisUtterance){console.log（"请使用其他浏览器！"）}