网站建设公司制作网站,电商网站设计实例,兰州网站备案,手机版oa办公软件前言#xff1a;
HTML5中和Web Speech相关的API实际上有两类#xff0c;一类是“语音识别(Speech Recognition)”#xff0c;另外一个就是“语音合成(Speech Synthesis)”#xff0c; 这两个名词实际上指的分别是“语音转文字”#xff0c;和“文字变语音”。 speak() –…前言
HTML5中和Web Speech相关的API实际上有两类一类是“语音识别(Speech Recognition)”另外一个就是“语音合成(Speech Synthesis)” 这两个名词实际上指的分别是“语音转文字”和“文字变语音”。 speak() – 只能接收SpeechSynthesisUtterance作为唯一的参数作用是读合成的话语。 stop() – 立即终止合成过程。 pause() – 暂停合成过程。 resume() – 重新开始合成过程。 getVoices() – 此方法不接受任何参数用来返回浏览器支持的语音包列表是个数组。 speechSynthesis.getVoices()返回因每个浏览器不同及版本的不同返回不太一样大致是这样
注意语言包获取不稳定有时候返回为空可以用定时器多试几次。 SpeechSynthesisUtterance主要用来构建语音合成实例speechSynthesis大概用来触发浏览器语音模块让浏览器把内容读出来。 想要浏览器开口说话只需要 let speechInstance new SpeechSynthesisUtterance(大家好我是渣渣辉。);
speechSynthesis.speak(speechInstance);就是这么简单不妨copy进浏览器试一下
// 更换语言
var msg new SpeechSynthesisUtterance();
var voices window.speechSynthesis.getVoices(); // 获取语言包
msg.voice voices[18]; // 18普通话
msg.text Hello World;
speechSynthesis.speak(msg); // SpeechSynthesisUtterance实例有以下属性可以通过设置一下属性调整发音: text – 要合成的文字内容字符串。 lang – 使用的语言字符串 例如zh-cn voiceURI – 指定希望使用的声音和服务字符串。 volume – 声音的音量区间范围是0到1默认是1。 rate – 语速数值默认值是1范围是0.1到10表示语速的倍数例如2表示正常语速的两倍。 pitch – 表示说话的音高数值范围从0最小到2最大。默认值为1。还有一些方法 onstart – 语音合成开始时候的回调。onpause – 语音合成暂停时候的回调。onresume – 语音合成重新开始时候的回调。onend – 语音合成结束时候的回调。speechSynthesis对象有以下方法 代码如下:
templatediv classbox!-- input typetext nametext idtext v-modeltext / --button clickplayVoice播放语音/buttonbutton clickpauseVoice v-ifstatus 开始播放暂停播放/buttonbutton clickresumeVoice v-ifstatus 暂停播放继续播放/buttonbutton clickstopVoice停止播放/buttondiv播放状态{{ status }}/div/div
/templatescript
const synth window.speechSynthesis
const msg new window.SpeechSynthesisUtterance()
export default {data() {return {currentMsgIndex: 0,text: ,status: ,tableData: [{ text: 切换后基站BCCH与TCH电平不一致 },{ text: 切换带异常 },{ text: 切换后TA偏大 },{ text: 切换后基站BCCH与TCH电平不一致 },{ text: 切换带异常 },{ text: 切换后TA偏大 },{ text: 切换后基站BCCH与TCH电平不一致 },{ text: 切换带异常 },{ text: 切换后TA偏大 }]}},created() {this.playVoice()},mounted() {msg.onstart e {// this.currentMsgIndex 0this.status 开始播放console.log(this.status)}msg.onend e {this.status 结束播放console.log(this.status)this.currentMsgIndexif (this.currentMsgIndex this.tableData.length) {this.playVoice()} else {this.currentMsgIndex 0}console.log(this.currentMsgIndex)}msg.onpause e {this.status 暂停播放console.log(onpause:, this.status)}},destroyed() {this.stopVoice()},methods: {//播放playVoice() {this.handleSpeak(this.tableData[this.currentMsgIndex].text)},//暂停pauseVoice() {this.handlePause()},//继续resumeVoice() {this.handleResume()},//停止stopVoice() {this.handleStop()},handleSpeak(TEXT) {console.log(TEXT:, TEXT)// if (!this.text) return alert(请输入文本!)msg.text TEXT // this.textmsg.lang zh-CN // 语言msg.volume 1 // 音量0~1默认1msg.rate 1 // 语速0.1~10默认1msg.pitch 1 // 音高0~2默认1// msg.voiceURI// 希望使用的声音synth.speak(msg)},handleStop(e) {synth.cancel(msg)},handlePause(e) {synth.pause(this.tableData[this.currentMsgIndex].text)},handleResume(e) {synth.resume(msg)}}
}
/script
