领导突然问我tts文字能转语音吗?
我第一反应是???
什么是tts,没接触过,经网上查了一下,简单来说就是语音文本互转的技术。
tts官网:Web Speech API - Web API 接口参考 | MDN
windows本地的tts语音合成服务:
这里使用的是SpeechSynthesisUtterance这个html5新的api,这个对象主要用来构建语音合成实例,具体的属性如下。
- text – 要合成的文字内容:string。
- lang – 使用的语言:string, 例如:"zh-cn"
- voiceURI – 指定希望使用的声音和服务:string。
- volume – 声音的音量:number,范围是0-1,默认11。
- rate – 语速:number,范围是0.1-10,默认1。
- pitch – 表示说话的音高:number,范围是0-2。默认为1。
这个实例对象也包括一些方法:
onstart
– 合成开始的回调。onpause
– 合成暂停的回调。onresume
– 合成重新开始的回调。onend
– 合成结束时的回调。
然后还有一个跟SpeechSynthesisUtterance搭配使用的SpeechSynthesis对象。该接口是语音服务的控制接口,它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令。
speak() – 只能接收SpeechSynthesisUtterance作为唯一的参数,作用是读合成的话语。
stop() – 立即终止合成过程。
pause() – 暂停合成过程。
resume() – 重新开始合成过程。
getVoices – 此方法不接受任何参数,用来返回浏览器支持的语音包列表,是个数组。
谷歌浏览器getVoices获取的声音列表,国内能使用的应该就前三个
语音转文字:
<template>
<div>
<el-page-header @back="goBack" content="语音转文字"/>
<div class="bank"></div>
<el-card header="语音转文字">
<el-card>
<el-input :readonly="true" id="word" v-model="word"></el-input>
</el-card>
<el-card>
<el-button type="primary" @click="audioCHangeWord"><span v-if="isListening">语音识别中...</span><span v-else>语音识别</span></el-button>
</el-card>
</el-card>
</div>
</template>
<script>
export default {
name: "AudioToWord",
data() {
return {
word: "",
isListening: false, // 判断是否在语音监听中
}
},
methods: {
audioCHangeWord() {
var that = this;
that.word = "";
// 创建SpeechRecognition对象
// eslint-disable-next-line no-undef
var recognition = new webkitSpeechRecognition();
if (!recognition) {
// eslint-disable-next-line no-undef
recognition = new SpeechRecognition();
}
// 设置语言
recognition.lang = 'zh-CN';
// 开始语音识别
recognition.start();
that.isListening = true;
// 监听识别结果
recognition.onresult = function (event) {
var result = event.results[0][0].transcript;
that.word = result;
};
// 监听错误事件
recognition.onerror = function (event) {
that.isListening = false;
that.$message("监听语音失败:"+event.error);
console.error(event.error);
};
// 监听结束事件(包括识别成功、识别错误和用户停止)
recognition.onend = function () {
that.isListening = false;
console.log("语音识别停止");
};
},
goBack() {
this.$router.push({ path: "/entry" })
}
}
}
</script>
文字转语音:
<template>
<div>
<el-page-header @back="goBack" content="文字转语音"/>
<div class="bank"></div>
<el-card header="文字转语音">
<el-input
id="word"
type="textarea"
placeholder="请输入文本"
v-model="word"
maxlength="300"
rows="4"
show-word-limit
>
</el-input>
<div class="bank"></div>
<el-card>
<el-button @click="changeToAudio" type="primary">转为语音</el-button>
</el-card>
<div class="bank"></div>
<el-card>
<el-button @click="pause" type="warning">暂停</el-button>
<el-button @click="resume" type="success">继续</el-button>
<el-button @click="cancel" type="info">取消</el-button>
</el-card>
<div class="bank"></div>
<el-card>
<el-button @click="getvoice" type="primary">获取语音合成数据(F12)</el-button>
</el-card>
</el-card>
</div>
</template>
<script>
export default {
name: "WordToAudio",
data() {
return {
word: "",
isPaused: false, // 判断是否暂停
}
},
methods: {
// 选
changeToAudio() {
if (!this.word) {
this.$message("请输入文本");
return;
}
if (this.isPaused) {
this.$message("当前语音已暂停,请点击继续!");
return;
} else if (window.speechSynthesis.speaking) {
this.$message("当前已有正在播放的语音!");
return;
}
// 为了防止在暂停状态下转语音,调用前设置继续播放
window.speechSynthesis.resume();
// 设置播放
var textArea = document.getElementById('word');
var range = document.createRange();
range.selectNodeContents(textArea);
var speech = new SpeechSynthesisUtterance();
speech.text = this.word; // 内容
speech.lang = "zh-cn"; // 语言
speech.voiceURI = "Microsoft Huihui - Chinese (Simplified, PRC)"; // 声音和服务
// eslint-disable-next-line no-irregular-whitespace
speech.volume = 0.7; // 声音的音量区间范围是0到1默认是1
// eslint-disable-next-line no-irregular-whitespace
speech.rate = 1; // 语速,数值,默认值是1,范围是0.1到10,表示语速的倍数,例如2表示正常语速的两倍
// eslint-disable-next-line no-irregular-whitespace
speech.pitch = 1; // 表示说话的音高,数值,范围从0(最小)到2(最大)。默认值为1。
window.speechSynthesis.speak(speech);
var highlight = document.createElement('span');
highlight.style.backgroundColor = 'red';
range.surroundContents(highlight);
},
// 暂停
pause() {
this.isPaused = true;
window.speechSynthesis.pause();
},
// 继续
resume() {
this.isPaused = false;
window.speechSynthesis.resume();
},
// 取消
cancel() {
window.speechSynthesis.cancel();
},
getvoice() {
console.log(window.speechSynthesis.getVoices());
},
goBack() {
this.$router.push({path: "/entry"})
}
}
}
</script>
<style>
.bank {
padding: 10px;
}
</style>
到这里就完成了语音文本互转了。