Vue中使⽤speak-tts插件实现点击按钮后进⾏语⾳播报（TTS⽂
字转语⾳）
场景
speak-tts插件
实现点击按钮触发语⾳播报，播报指定的⽂字内容。
为什么不能实现⾃动语⾳播报。
chrome浏览器在18年4⽉起，就在桌⾯浏览器全⾯禁⽌了⾳视频的⾃动播放功能。
严格地来说，是Chrome不允许在⽤户对⽹页进⾏触发之前播放⾳频。
不光是这样，在页⾯加载完毕的情况下，⽤户没有click、dbclick、touch等主动交互⾏为，
使⽤js直接调⽤.play() ⽅法的话，chrome都会抛出如下错误：Uncaught (in promise) DOMException；
注：
实现
1、参考官⽅说明安装依赖
npm install speak-tts
2、在页⾯中引⼊
import Speech from'speak-tts'
3、声明speech对象
data() {
return {
speech: null,
};
4、页⾯加载完调⽤初始化⽅法
mounted() {
this.speechInit();
},
methods: {
speechInit() {
this.speech = new Speech();
this.speech.setLanguage("zh-CN");
this.speech.init().then(() => {});
},
5、页⾯添加按钮
<el-button type="success" @click="speakTtsSpeech">speak-tts语⾳播报</el-button>
chrome浏览器官方
6、按钮点击事件中调⽤播放⽅法
speakTtsSpeech() {
this.speech.speak({ text: "：霸道的程序猿" }).then(() => {
console.log("读取成功");
});
},
7、完整⽰例代码
<template>
<el-button type="success" @click="speakTtsSpeech">speak-tts语⾳播报</el-button> </template>
<script>
import Speech from"speak-tts"; // es6
export default {
name: "SpeechDemo",
data() {
return {
speech: null,
};
},
mounted() {
this.speechInit();
},
methods: {
speakTtsSpeech() {
this.speech.speak({ text: "：霸道的程序猿" }).then(() => {
console.log("读取成功");
});
},
speechInit() {
this.speech = new Speech();
this.speech.setLanguage("zh-CN");
this.speech.init().then(() => {});
},
},
};
</script>
<style scoped>
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。