微信小程序语音同步智能识别的实现案例

目录

• 一、背景
• 二、同声传译插件介绍
  • 1、 微信小程序后台添加插件
  • 2、 微信小程序启用插件
• 三、语音同步转换的前端实现
  • 1、界面UI与操作
  • 2、代码实现
• 四、后端SpringBoot实现语音文件上传webApi
  • 1、SpringBoot项目API相关结构树
  • 2、文件上传工具类的实现
  • 3、小程序上传文件接口的实现
  • 4、小程序上传文件接口的查看
• 五、实际测试

一、背景

在小程序的一些应用场景中，会有语音转文字的需求。原有的做法一般是先通过小程序的录音功能录下语音文件，然后再通过调用语音智能识别WebApi(比如百度云AI平台，科大讯飞平台)将语音文件转成文字信息，以上的做法比较繁琐且用户的体验性较差。
为解决此问题，微信直接开放了同声传译的插件，小程序作者可以直接使用该插件进行语音同声传译的开发。此文章将通过前后端整合应用的完整案例完成语音的实时转换，并将语音上传到服务端后台备份。

二、同声传译插件介绍

微信同声传译由微信智聆语音团队、微信翻译团队与公众平台联合推出的同传开放接口，首期开放 语音转文字 、文本翻译、语音合成接口，为开发者赋能。

1、 微信小程序后台添加插件

进入微信小程序后台–>进入设置–>第三方设置–>添加插件->搜索同声传译–>完成添加。

2、 微信小程序启用插件

在小程序app.json文件中增加插件版本等信息：

"plugins": {
    "WechatSI": {
      "version": "0.3.3",
      "provider": "wx069ba97219f66d99"
    }
  },

在页面程序文件中引入插件：

/* index.js */

const plugin = requirePlugin("