vue使用WEB自带TTS实现语音文字互转

媒介

时隔多日，自己已经好久没更新文章了；今年不停跟随公司的政策[BEI YA ZHA]中，做了一个又一个的需求，反而没有多少自己的时间，更别说突破自己

---

˚‧º·(˚ ˃̣̣̥᷄⌓˂̣̣̥᷅ )‧º·˚（雾）

---

然后最近，我朋友忽然和我说有没有做过TTS，我第一反应是???
ʕ •ᴥ•ʔ……
一脸无辜
于是就出现我们本日主题的
什么是TTS？
   去调查了一番，简单的说就是一种语音文本互转的技能
  

• 这里涉及到语音合成的概念.语音合成是通过机械的、电子的方法产生人造语音的技能。TTS技能（又称文语转换技能）隶属于语音合成
  
• 而WEB，也就是我们的欣赏器，已经给我们封装好了TTS，能够很方便的调用API，基本上，我们能够使用原生的前端元素直接实现文本转语音，语音转文字
  

    因此任何前端框架都可以使用该套逻辑实现TTS
  WEB自带TTS

它是有自己的官方文档的，我们可以很容易的就通过该API文档来找到我们需要的实现的逻辑
WEB自带TTS官方中文文档API
基础变乱

文字转语音基础变乱

这里给大家列出几个常用的基础变乱，更多可访问上面的API文档

1. // 创建 SpeechSynthesisUtterance 对象
2. var speechUtterance = new SpeechSynthesisUtterance('Hello, how are you?');
4. // 创建 SpeechSynthesis 对象
5. var synthesis = window.speechSynthesis;
7. // 设置语音合成的事件处理函数
9. // 开始语音合成
10. speechUtterance.onstart = function(event) {
11.   console.log('Speech synthesis started.');
12. };
14. // 结束语音合成
15. speechUtterance.onend = function(event) {
16.   console.log('Speech synthesis ended.');
17. };
19. // 暂停语音合成
20. speechUtterance.onpause = function(event) {
21.   console.log('Speech synthesis paused.');
22. };
24. // 恢复语音合成
25. speechUtterance.onresume = function(event) {
26.   console.log('Speech synthesis resumed.');
27. };
29. // 分段语音合成
30. speechUtterance.onboundary = function(event) {
31.   console.log('Speech boundary reached at character index ' + event.charIndex + '.');
32. };
34. // 启动语音合成
35. var btn = document.querySelector('button');
36. btn.addEventListener('click', function() {
37.   synthesis.speak(speechUtterance);
38. });

复制代码

语音转文字基础变乱

1. // 创建 SpeechRecognition 对象
2. var recognition = new window.SpeechRecognition();
4. // 设置语音识别的事件处理函数
6. // 开始语音识别
7. recognition.onstart = function(event) {
8.   console.log('Speech recognition started.');
9. };
11. // 结束语音识别
12. recognition.onend = function(event) {
13.   console.log('Speech recognition ended.');
14. };
16. // 识别到语音结果
17. recognition.onresult = function(event) {
18.   var transcript = event.results[0][0].transcript;
19.   console.log('Recognized speech: ' + transcript);
20. };
22. // 启动语音识别
23. var btn = document.querySelector('button');
24. btn.addEventListener('click', function() {
25.   recognition.start();
26. });

复制代码

VUE项目

   我有将本次研究的结果放到我的git上，以下为我项目中的截图
  

   另有一个文本跟随朗读变色的现实上是我朋友需要的研究的功能，其实界面是差不多的，末端我会放出我项目的git链接,以供大家参考
  语音转文字

在我的项目中，vue实现语音转文字的代码如下:

• 界面
  

1. <template>
2.   <div>
3.     <el-page-header @back="goBack" content="语音转文字"/>
4.     <div class="bank"></div>
5.     <el-card header="语音转文字">
6.       <el-card>
7.         <el-input :readonly="true" id="word" v-model="word"></el-input>
8.       </el-card>
9.       <el-card>
10.         <el-button type="primary" @click="audioCHangeWord"><span v-if="isListening">语音识别中...</span><span v-else>语音识别</span></el-button>
11.       </el-card>
12.     </el-card>
13.   </div>
14. </template>

复制代码

• 逻辑
  

1. <script>
2. export default {
3.   name: "AudioToWord",
4.   data() {
5.     return {
6.       word: "",
7.       isListening: false, // 判断是否在语音监听中
8.     }
9.   },
10.   methods: {
11.     audioCHangeWord() {
12.       var that = this;
13.       that.word = "";
14.       // 创建SpeechRecognition对象
15.       // eslint-disable-next-line no-undef
16.       var recognition = new webkitSpeechRecognition();
17.       if (!recognition) {
18.         // eslint-disable-next-line no-undef
19.         recognition = new SpeechRecognition();
20.       }
21.       // 设置语言
22.       recognition.lang = 'zh-CN';
23.       // 开始语音识别
24.       recognition.start();
25.       that.isListening = true;
26.       // 监听识别结果
27.       recognition.onresult = function (event) {
28.         var result = event.results[0][0].transcript;
29.         that.word = result;
30.       };
32.       // 监听错误事件
33.       recognition.onerror = function (event) {
34.         that.isListening = false;
35.         that.$message("监听语音失败:"+event.error);
36.         console.error(event.error);
37.       };
38.       // 监听结束事件（包括识别成功、识别错误和用户停止）
39.       recognition.onend = function () {
40.         that.isListening = false;
41.         console.log("语音识别停止");
42.       };
44.     },
45.     goBack() {
46.       this.$router.push({ path: "/entry" })
47.     }
48.   }
49. }
50. </script>

复制代码

文字转语音

• 界面
  

1. <template>
2.   <div>
3.     <el-page-header @back="goBack" content="文字转语音"/>
4.     <div class="bank"></div>
5.     <el-card header="文字转语音">
6.       <el-input
7.         id="word"
8.         type="textarea"
9.         placeholder="请输入文本"
10.         v-model="word"
11.         maxlength="300"
12.         rows="4"
13.         show-word-limit
14.       >
15.       </el-input>
16.       <div class="bank"></div>
17.       <el-card>
18.         <el-button @click="changeToAudio" type="primary">转为语音</el-button>
19.       </el-card>
20.       <div class="bank"></div>
21.       <el-card>
22.           <el-button @click="pause" type="warning">暂停</el-button>
23.           <el-button @click="resume" type="success">继续</el-button>
24.           <el-button @click="cancel" type="info">取消</el-button>
25.       </el-card>
26.       <div class="bank"></div>
27.       <el-card>
28.         <el-button @click="getvoice" type="primary">获取语音合成数据(F12)</el-button>
29.       </el-card>
30.     </el-card>
31.   </div>
32. </template>

复制代码

• 逻辑
  

1. <script>
2. export default {
3.   name: "WordToAudio",
4.   data() {
5.     return {
6.       word: "",
7.       isPaused: false, // 判断是否暂停
8.     }
9.   },
10.   methods: {
11.     // 选
12.     changeToAudio() {
13.       if (!this.word) {
14.         this.$message("请输入文本");
15.         return;
16.       }
18.       if (this.isPaused) {
19.         this.$message("当前语音已暂停,请点击继续!");
20.         return;
21.       } else if (window.speechSynthesis.speaking) {
22.         this.$message("当前已有正在播放的语音!");
23.         return;
24.       }
25.       // 为了防止在暂停状态下转语音，调用前设置继续播放
26.       window.speechSynthesis.resume();
27.       // 设置播放
28.       var textArea = document.getElementById('word');
29.       var range = document.createRange();
30.       range.selectNodeContents(textArea);
31.       var speech = new SpeechSynthesisUtterance();
32.       speech.text = this.word; // 内容
33.       speech.lang = "zh-cn"; // 语言
34.       speech.voiceURI = "Microsoft Huihui - Chinese (Simplified, PRC)"; // 声音和服务
35.       // eslint-disable-next-line no-irregular-whitespace
36.       speech.volume = 0.7; // 声音的音量区间范围是​​0​​​到​​1默认是​​1​​
37.       // eslint-disable-next-line no-irregular-whitespace
38.       speech.rate = 1; // 语速，数值，默认值是​​1​​​，范围是​​0.1​​​到​​10​​​，表示语速的倍数，例如​​2​​表示正常语速的两倍
39.       // eslint-disable-next-line no-irregular-whitespace
40.       speech.pitch = 1; // 表示说话的音高，数值，范围从​​0​​​（最小）到​​2​​​（最大）。默认值为​​1​​。
41.       window.speechSynthesis.speak(speech);
42.       var highlight = document.createElement('span');
43.       highlight.style.backgroundColor = 'red';
44.       range.surroundContents(highlight);
45.     },
46.     // 暂停
47.     pause() {
48.       this.isPaused = true;
49.       window.speechSynthesis.pause();
50.     },
51.     // 继续
52.     resume() {
53.       this.isPaused = false;
54.       window.speechSynthesis.resume();
55.     },
56.     // 取消
57.     cancel() {
58.       window.speechSynthesis.cancel();
59.     },
60.     getvoice() {
61.       console.log(window.speechSynthesis.getVoices());
62.     },
63.     goBack() {
64.       this.$router.push({path: "/entry"})
65.     }
66.   }
67. }
68. </script>
70. <style>
71. .bank {
72.   padding: 10px;
73. }
74. </style>

复制代码

git链接

WEB自带TTS实现语音文字互转git
结语

以上为我用vue实现WEB自带TTS来实现语音文字互转的过程，如有更多内容会在本文章更新

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。