SpeechSynthesisUtterance文字转语音播报

一、介绍

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

二、基本属性

var speech = new SpeechSynthesisUtterance()

speech.lang 获取并设置话语的语言（en-US、zh-CN）
speech.pitch 获取并设置话语的音调 (值越大越尖锐，range:0-2, default:1, float)
speech.rate 获取并设置说话的速度 (值越大语速越快, range:0.1-10, default:1, float)
speech.text 获取并设置说话时的文本
speech.voice 获取并设置说话的声音
speech.volume 获取并设置说话的音量 (range: 0-1, default:1, float)
speech.onboundary
speech.onend 播放结束的回调
speech.onerror 播放出现错误的回调
speech.onmark 当读到标记文本时的回调
speech.onpause 播放暂停
speech.onresume 播放重启
speech.onstart 播放开始的回调

三、兼容性

在这里插入图片描述

四、案例

function speak (msg) {var speech = new SpeechSynthesisUtterance()speech.text = msgspeech.pitch = 1 // 获取并设置话语的音调(0-2 默认1，值越大越尖锐,越低越低沉)speech.rate = 0.9 // 获取并设置说话的速度(0.1-10 默认1，值越大语速越快,越小语速越慢)speech.volume = 100 // 获取并设置说话的音量speech.lang = 'zh-CN' // 设置播放语言// 语音播报结束时的回调speech.onend = (event) => {// 语音播报完需要清空展示内容}
}
speak('你好呀，我叫...')

增加语音循环播放

speak (msg) {const repeatNum = 3var speech = this.speech = new SpeechSynthesisUtterance()speech.text = msgspeech.pitch = 1 // 获取并设置话语的音调(0-2 默认1，值越大越尖锐,越低越低沉)speech.rate = 0.9 // 获取并设置说话的速度(0.1-10 默认1，值越大语速越快,越小语速越慢)speech.volume = 100 // 获取并设置说话的音量speech.lang = 'zh-CN' // 设置播放语言// 增加控制播放次数let count = 1speechSynthesis.speak(speech)while (count < repeatNum) {speechSynthesis.speak(speech)count++}},this.speak('我爱中国')