纯前端实现微信小程序录音后自动将语音转文字的同声传译功能

 本文将手把手教你如何借助微信官方提供的微信同声传译插件，不依赖后端接口，纯前端实现微信小程序录音后自动将语音转文字功能。我们需要依赖微信官方提供的微信同声传译插件。首先，需要进入微信公众平台添加插件。

一、登录微信公众平台 ，进入账号设置

二、进入第三方设置，添加插件

三、搜索插件，微信同声传译，搜索后添加。

四、添加之后微信需要审核，审核通过后会看到如下详情，需要记下这里的AppID，后面会用到。

五、插件添加成功被授权使用以后就可以进行代码逻辑的编写。接下来我们进入到代码编写阶段。在app.json文件中添加如下代码，加载插件。

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

六、在组件wxml文件，编写页面并且绑定录音和停止录音事件。

下面演示两个按钮，一个点击后开始录音，一个点击后结束录音。上面显示转换后的文字内容。

<view class="record-action">
    <view>{{recordText}}</view>
    <button class="record-start" bindtap="startRecord">开始录音</button>
    <button class="record-stop" bindtap="stopRecord">结束录音</button>
</view>

七、组件的index.js文件编写

首先，引入微信同声传译插件，接着初始化定义录音开始和结束的回调函数（通常就是我们需要处理的业务代码），最后在录音开始和结束的地方执行微信同声传译插件的start 和stop方法即可。详细代码如下。

// 引入微信同声传译插件
const WechatSIPlugin = requirePlugin("WechatSI");
const WechatSIManager = WechatSIPlugin.getRecordRecognitionManager();
Component({
  /**
   * 组件的属性列表
   */
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {
    recordingText: '', // 转换后的文字
  },
   /**
   * 组件的初始化
   */
  attached() {
    // 初始化识别语音方法
    this.initRecord();
  },
    /**
   * 组件销毁
   */
  detached() {
    // 组件销毁时执行的代码
    WechatSIManager.stop();
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 初始化定义录音开始和结束的回调函数
    initRecord() {
      // 识别语音开始
      WechatSIManager.onStart = (res) => {
        // 开始录音后的业务逻辑……
        console.log("WechatSIManager onStart", res);
      };
      // 识别语音结束回调函数
      WechatSIManager.onStop = (res) => {
        // 录音结束后的业务逻辑……，下面为了演示把录音转成的文字显示到页面上
        if (res.result) {
          this.setData({ recordingText: res.result });
        }
      };
      // 录音发送错误时
      WechatSIManager.onError = (res) => {
        // 确保在错误处理中停止录音
        WechatSIManager.stop();
        showToast(res.msg);
      };
    },
   
    // 开始录音
    startRecord() {
      WechatSIManager.start({ duration: 60000, lang: "zh_CN" }), // // 会自动触发WechatSIManager.onStar方法
    },
    // 结束录音
    stopRecord() {
      WechatSIManager.stop(); // 会自动触发WechatSIManager.onStop方法
    },
  },
});

八、在页面使用上面的录音组件。例如我在home页面使用。

home.json文件中引入刚才写的record组件内容：

{
  "usingComponents": {
    "recordToText": "./components/record/index"
  }
}

home.wxml文件中引入刚才写的record组件：

<view class="container">
    <recordToText />
</view>

总结

本文我们介绍了如何在微信小程序项目中引入微信同声传译组件，并且封装了一个语音转文字的功能组件，最后演示了如何在其他页面引入我们封装的语音转文字的功能组件。希望本文能给你带来一些收获。