微信小程序语音转文字实时显示功能实现教程

要实现微信小程序的语音转字符并实时显示功能，可以按照以下步骤进行：

创建一个新的微信小程序项目，使用微信开发者工具打开。
在项目目录下创建一个新的页面，例如voice2text。
在voice2text页面的.wxml文件中添加一个按钮和一个文本框，用于触发录音和显示转换后的文字。

<view class='container'>
  <button bindtap='startRecord'>开始录音</button>
  <text>{{result}}</text>
</view>

在voice2text页面的.js文件中添加以下代码，实现录音和语音转换的功能。

Page({
  data: {
    result: ''
  },
  startRecord: function() {
    wx.startRecord({
      success: (res) => {
        const tempFilePath = res.tempFilePath;
        wx.uploadFile({
          url: 'https://api.weixin.qq.com/cgi-bin/media/upload?access_token=' + access_token + '&type=voice',
          filePath: tempFilePath,
          name: 'file',
          success: (res) => {
            const mediaId = JSON.parse(res.data).media_id;
            wx.request({
              url: 'https://api.weixin.qq.com/cgi-bin/media/voice/addvoicetorecofortext?access_token=' + access_token,
              method: 'POST',
              data: {
                'media_id': mediaId,
                'format': 'mp3',
                'lang': 'zh_CN'
              },
              success: (res) => {
                const recognition = res.data.result;
                this.setData({
                  result: recognition
                });
              }
            });
          }
        });
      }
    });
  }
});

在上述代码中，需要替换access_token为你自己的有效access_token，可以通过微信官方提供的API获取。

在voice2text页面的.wxss文件中添加样式。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

button {
  width: 200rpx;
  height: 100rpx;
  background-color: #007ACC;
  color: #fff;
  font-size: 30rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

text {
  font-size: 24rpx;
}

在app.json文件中添加voice2text页面的配置。

{
  "pages": [
    "pages/index/index",
    "pages/voice2text/voice2text"
  ],
  "window": {
    "navigationBarTitleText": "语音转文字示例"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/voice2text/voice2text",
        "text": "语音转文字"
      }
    ]
  }
}

使用微信开发者工具预览并运行小程序，点击开始录音按钮，录制一段语音后停止录音，转换后的文字将实时显示在页面上。

注意：上述代码中的access_token需要自行获取，可以通过微信公众平台的接口获取，具体获取方式请参考微信开发者文档。