uniapp 小步调怎样实现语音输入功能功能？

媒介

迩来利用 uniapp 做小步调的时间，须要实现一个语音输入转换为文本的功能，功能的实现并不复杂，但还是踩了一个坑，因此记录了一下团体的实现过程以及提供了可以直接复制利用的代码，渴望可以资助到你。
引用插件

微信的同声传译插件有三个功能，分别是 语音输入，文本翻译和语音合成（笔墨转语音），我用到的就是语音输入功能。
起首微敬佩务市场中登录并添加同声传译插件，我是个人账号同样可以申请，链接在这里：
添加完成后在小步调背景  点击左下角的账号设置

顶部 Tab 栏选择第三方设置，在插件管理中找到同声传译插件，点击详情

在详情中可以检察插件的 APPID，提前复制好

接下来在小步调项目的 manifest.json 文件中添加一个插件引用：

1.   "mp-weixin": {
2.     "appid": "wxff30426f8850b0",
3.     "setting": {
4.       "urlCheck": false
5.     },
6.     "usingComponents": true,
7. +    "plugins": {
8. +      "WechatSI": {
9. +        "provider": "上一步复制的 APPID",
10. +        "version": "0.3.6"
11.       }
12.     }
13.   },

复制代码

云云操纵，插件就算是在项目中乐成引用了。
功能利用

这里我直接写了一个 hook，如果有须要可以本身复制利用，插件的初始化，转换乐成后文本的插入都在这个 hook 中实现了>

1. import {
2.    
3.     ref, reactive } from 'vue'
5. export function useVoiceInput() {
6.    
7.    
8.   // 初始化语音识别插件
9.   const plugin = requirePlugin('WechatSI')
10.   const manager = plugin.getRecordRecognitionManager()
12.   // 记录光标位置
13.   const cursorPosition = ref(0)
15.   // 语音输入状态
16.   const voiceState = reactive({
17.    
18.    
19.     isRecording: false,    // 是否正在录音
20.     recordLoading: false,  // 录音加载状态
21.   })
23.   // 处理文本框失焦事件，保存光标位置
24.   

复制代码