介绍:
我们可以调用window中内置api,实现语音转换,简单介绍下需要用到的两个api
SpeechSynthesis
.cancel() 移除所有语音谈话队列中的谈话。
.getVoices() 返回当前设备所有可用声音的 SpeechSynthesisVoice列表。
.pause() 把 SpeechSynthesis 对象置为暂停状态。
.resume() 把 SpeechSynthesis 对象置为一个非暂停状态:如果已经暂停了则继续。
.speak() 添加一个utterance到语音谈话队列;它将会在其他语音谈话播放完之后播放。
SpeechSynthesisUtterance
.lang 设置话语的语言。 例如:“zh-cn”表示中文
.pitch 设置说话的音调(音高)。范围从0(最小)到2(最大)。默认值为1
.rate 设置说话的速度。默认值是1,范围是0.1到10,表示语速的倍数,例如2表示正常语速的两倍
.text 设置在说话时将合成的文本内容。
.voice 设置用于说话的声音。
.volume 设置将在其中发言的音量。区间范围是0到1,默认是1
示例
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
playVoice () {
this.handleSpeak('你好呀,很高兴认识你') // 传入需要播放的文字
},
// 语音播报的函数
handleSpeak (text) {
msg.text = text; // 文字内容
msg.lang = "zh-CN"; // 使用的语言:中文
msg.volume = 1; // 声音音量:1
msg.rate = 1; // 语速:1
msg.pitch = 1; // 音高:1
synth.speak(msg); // 播放
},
// 语音停止
handleStop (e) {
msg.text = e;
msg.lang = "zh-CN";
synth.cancel(msg);
}
在vue中使用 speak-tts 插件
安装
npm install speak-tts
main.js引入
import Speech from 'speak-tts' // es6
// var Speech = require('speak-tts') //if you use es5
const speech = new Speech()
Vue.prototype.$speech = speech
使用
<button @click="plugVoice">点击</button>
<button @click="$speech.pause()">暂停</button>
<button @click="$speech.resume()">继续</button>
<button @click="$speech.cancel()">取消</button>
plugVoice () {
// 判断浏览器是否支持
if (!this.$speech.hasBrowserSupport()) return alert('该浏览器不支持语音播放')
// this.$speech.init() 用于设置语言、音量、语速、音高等。如果不设置将使用浏览器默认的语言
this.$speech.speak({ text: '你好呀,很高兴认识你' })
},