微信同声传译(语音转文字) Taro +vue3

 前言

微信同声传译插件是微信自研的语音输入，文本翻译等功能的插件封装，用于提供给第三方小程序调用。在使用过程中遇见某些问题，不知道是不是底层问题，希望有大佬能解惑。

1.准备工作

代码配置：

//app.json 或者app.config（taro)
{
  ...
   plugins: {
    WechatSI: {
      version: '0.3.6', // 插件版本号
      provider: 'wx069ba97219f66d99' // 插件提供方 ID
    }
  }
}

账号配置

 

微信同声传译 | 小程序插件 | 微信公众平台https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx069ba97219f66d99&token=370941954&lang=zh_CN

 前往账号设置 -> 配置添加插件

点击详情可以查看最新版本。

同时微信开发者工具也需要添加插件（工程运行时，可以通过提示添加即可）

注意：该插件在微信环境下才可调用，如果项目还需要要其他平台运行，需要对运行环境进行判断。

2.核心代码

模板中：

 <view  @touchstart="handleTouchStart"  @touchend="handleTouchEnd" @touchmove="handleTouchMove">
   <view> 按住说话</view>
   <view  v-if="(!isCancelRecording) && isRecording">录音中...</view>
   <view  v-else-if="isCancelRecording && isRecording">取消录音</view>
</view>

js中： 

const isRecording = ref(false);  // 是否正在录音
const isCancelRecording = ref(false);  // 录音是否取消
const issuesVal = ref();  // 识别内容

// 录音
const recordStartTime = ref(null);  // 录音时间
// 对环境判断
const plugin = process.env.TARO_ENV === 'weapp' ? requirePlugin('WechatSI') : null;
const manager = process.env.TARO_ENV === 'weapp' ? plugin?.getRecordRecognitionManager() : null;
const touchStartY = ref(null);  // 上划距离


// 在开始录音前一定先给录音权限
const getRecordEvent = async () => {
  try {
    // 1. 检查是否已授权
    const { authSetting } = await Taro.getSetting();

    if (authSetting["scope.record"] === false) {
      await Taro.openSetting();
      return;
    }
    // 3. 发起授权请求
    const res = await Taro.authorize({ scope: "scope.record" });
  } catch (error) {
  }
}



// 录音-----------------------------------------------------------------
const initManager = () => {
  // 监听识别开始
  manager.onStart = (res) => {
    console.log('监听识别开始', res);
  };
  // 监听识别结束
  manager.onStop = (res) => {
    console.log('监听识别结束', res.result);
    handelRecordRes(res)
  };
  manager.onError = (res) => {
    console.log("error msg", res.msg)
    openNotification(res.msg);
  }
};


// 开始触摸事件
const handleTouchStart = async (event) => {
  initManager();
  recordStartTime.value = Date.now();
  isRecording.value = true;
  isCancelRecording.value = false;
  startRecord();
  touchStartY.value = event.touches[0].clientY;  // 记录开始触摸位置
};

// 触摸移动事件
const handleTouchMove = (event) => {
  if (!isRecording.value) return;
  const currentY = event.touches[0].clientY;  // 记录移动位置
  const deltaY = touchStartY.value - currentY;  
  const swipeThreshold = 100;
  if (deltaY > swipeThreshold) {
    isCancelRecording.value = true;
  } else {
    isCancelRecording.value = false;
  }
};

// 触摸结束事件
const handleTouchEnd = async () => {
  isRecording.value = false;
  const minDuration = 500; // 毫秒
  const recordTime = Date.now() - recordStartTime.value;
  if (recordTime < minDuration) {
    openNotification('录音时间过短');
  }
  stopRecord();
};

const startRecord = () => {
  manager.start({
    lang: 'zh_CN', // 语言类型
    success: (res) => {
      console.log('录音启动成功', res);
    }
  });
};

const stopRecord = () => {
  manager.stop();
};

// 事件处理
const handelRecordRes = (res) => {
  if (isCancelRecording.value) {
    isCancelRecording.value = false;
  } else {
    if (res.result == '' || res.result == null || res.result == undefined) {
      openNotification('请说点什么吧')
      return;
    }
    issuesVal.value = res.result;
  }
}

3.坑

在触摸开始后  startRecord （）每次触发，在manager有值的情况下，manager.start（）有时候不会触发 ，startRecord （）监听不到开始，并且manager.start（）里面的回调函数一直没触发。

可参考官网

插件服务 / 微信同声传译https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/translator.html后续更新taro.request(wx.request)来实现sse长连接实时对话的坑