前端实现语音合成

前言

语音合成的实现方式有多种：
第一种：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