SpeechSynthesisUtterance|SpeechSynthesisUtterance 语音合成使用 SpeechSynthesisUtterance语音合成使

SpeechSynthesisUtterance基本介绍

SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等

SpeechSynthesisUtterance基本属性

SpeechSynthesisUtterance.text基本方法

项目实战(可直接复制执行)

【SpeechSynthesisUtterance|SpeechSynthesisUtterance 语音合成使用】html部分

听说 5000Rate: Pitch: 你好给你点
js部分

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 = https://www.it610.com/article/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 } } }

代码解读(html部分)

代码解读(js部分)

首先通过const synth = window.speechSynthesis来创建语音,用const msg = new SpeechSynthesisUtterance()来创建文本实例
设置默认播报的文本和语言:msg.text和msg.lang
通过voiceschanged事件来动态获取支持的语言种类,并生成options添加到html中.其中最主要的方法就是synth.getVoices()获取.各位可以通过自行打印获取到的数组查看具体包含的属性
创建按钮点击事件,分别通过synth.speak(msg)和synth.cancel(msg)来播放和取消播放
在播放前通过voicesDropdown.selectedOptions[0].value来设置文本的语言(这里如果文本的内容语言和播报选择的语言不一致的话会出现乱读的情况)
最后添加了一个节流函数,防止多次点击按钮不断播放(最好是能获取播放的时长,或监听播报完毕事件,这里就是简单的2秒识别一次,有兴趣的小伙伴可以自行编写)