前言
语音合成的实现方式有多种:
第一种:HTML5语音Web Speech API
第二种:百度文字转语音开放API
第三种:微软TTS引擎(没有实际使用,此文章就不多赘述)
实现方式(vue环境)
一、HTML5语音Web Speech API
Web Speech有两类API:
1.语音合成(Speech Synthesis) -----------> 文字变语音
2.语音识别(Speech Recognition)-----------> 语音转文字
语音合成Speech Synthesis API的核心:
SpeechSynthesisUtterance
和speechSynthesis
代码实现
<a-button @click="voicePlay">
<a-icon type="play-circle" />播放
</a-button>
const msg = new SpeechSynthesisUtterance() //构建语音合成实例
const synth = window.speechSynthesis //触发行为
handleSpeak(text) {
msg.text = text
msg.lang = 'zh-CN'
msg.volume = '1'
msg.rate = 1
msg.pitch = 1
synth.speak(msg)
},
voicePlay() {
//语音合成播放
this.handleSpeak("需要播放的文字")
console.log(speechSynthesis.getVoices()) //返回浏览器支持的语音包列表数组
},
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对象
方法
/**
*speak()
– 只能接收SpeechSynthesisUtterance作为唯一的参数,作用是读合成的话语
*stop()
– 立即终止合成过程
*pause()
– 暂停合成过程
*cancel()
– 接口从话语队列中删除所有的话语
*resume()
– 重新开始合成过程
*getVoices
– 此方法不接受任何参数,用来返回浏览器支持的语音包列表数组
*/
二、百度文字转语音开放API
接口:http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=转换的文字
属性
/**
*lan=zh
– 语言是中文,如果改为lan=en,则语言是英文
*ie=UTF-8
– 文字格式
*spd=2
– 语速,可以是1-9的数字,数字越大,语速越快
*text=**
– 需要转换的文字
*/
代码实现
voicePlay() {
let ttsText = 需要转换的文字;
this.$audio.src = 'http://tts.baidu.com/text2audio?lan=Zh&ie=UTF-8&spd=4&text=' + ttsText;
this.$audio.play();
}
总结:由于工作需求需要获得播放路径,选择了百度api,如果有了解Web Speech API如何获取播放路径的欢迎留言补充~ O(∩_∩)O