• home > webfront > AppDev > taro >

    taro微信同声传译:微信小程序获取语音转文字 与语言转文字

    Author:zhoulujun Date:

    腾讯AI开放平台上提供了大量好玩的人工智能云服务,而且是完全免费的。但是小程序如何做呢?

    腾讯AI开放平台上提供了大量好玩的人工智能云服务,而且是完全免费的。但是小程序如何做呢?

    在此基础上研究taro 操作。主要还是微信同声传译插件

    微信同声传译

    微信同声传译插件是微信自研的语音输入,文本翻译等功能的插件封装,用于提供给第三方小程序调用。

    微信面对面翻译小程序完全使用此小程序插件实现。开源地址:https://github.com/Tencent/Face2FaceTranslator

    不过他们也是有限制的,初期用应该没有问题吧。

    由于资源限制,当前各个接口调用存在配额限制,如业务有特殊更多需求,请邮箱联系benbfeng@tencent.com申请,邮件配额模版如下。

    • 语音输入配额:每个小程序250条/分钟,3w条/天。

    • 文本翻译配额:每个小程序500次/分钟,10w次/天。

    • 语音合成配额:每个小程序100次/分钟,2w次/天。

    设置 -> 第三方设置 -> 添加插件

    输入“微信同声传译”,点击搜索,之后选择并点击添加,之后就是代码编辑的问题了



    微信小程序taro文字转语音并播放

    import { createInnerAudioContext,requirePlugin } from '@tarojs/taro';
    import { useState } from 'react';
    import { View, Text } from '@tarojs/components'
    import { AtButton } from 'taro-ui'
    
    import 'taro-ui/dist/style/components/button.scss' // 按需引入
    import './index.scss'
    
    const plugin = requirePlugin('WechatSI');
    const Speak = () => {
      const [content, setContent] = useState('微信同声传译插件是微信自研的语音输入,文本翻译等功能的插件封装,用于提供给第三方小程序调用。');
      const [audioSource, setAudioSource] = useState('');
      const watchAudioStatus = () => {
        if (!audioSource) {
          console.log('暂无语音');
          return;
        }
        // 创建音频实例
        const innerAudioContext = createInnerAudioContext();
        innerAudioContext.src = audioSource;
        innerAudioContext.play(); // 播放音频
        innerAudioContext.onPlay(() => {
          console.log('监听开始播放');
        });
        innerAudioContext.onEnded(() => {
          console.log('监听播报结束,可在结束中进行相应的处理逻辑');
          innerAudioContext.stop();
          // 播放停止,销毁该实例,不然会出现多个语音重复执行的情况
          console.log('销毁innerAudioContext实例');
          innerAudioContext.destroy();
        });
        innerAudioContext.onError(() => {
          console.log('监听语音播放异常');
          innerAudioContext.destroy();// 销毁播放实例
        });
      };
      const translationTextToAudio = () => {
        plugin.textToSpeech({
          lang: 'zh_CN', // 代表中文
          tts: true, // 是否对翻译结果进行语音合成,默认为false,不进行语音合成
          content, // 要转为语音的文字
          success(res) {
            console.log('succ tts', res);
            setAudioSource(res.filename);
            watchAudioStatus();// 调用此方法来监听语音播放情况
          },
          fail(res) {
            console.log('fail tts', res);
          },
        });
      };
      return (
        <View>
          <View>
            <AtButton
              onClick={translationTextToAudio}
              aria-role='button' aria-label='关键词内容播报'
              className='recognition-play-key'
            >按住读取下面内容</AtButton>
          </View>
          <View>
            <Text>{content}</Text>
          </View>
        </View>
      )
    }
    export default Speak


    微信小程序taro语音转文字(可以翻译)

    import { requirePlugin, useReady, showModal } from '@tarojs/taro';
    import { View, Text, Button } from '@tarojs/components'
    import { useState } from 'react';
    import 'taro-ui/dist/style/components/button.scss' // 按需引入
    import './index.scss'
    
    
    const Translation = () => {
      // 引入插件:微信同声传译
      const plugin = requirePlugin('WechatSI');
    // 获取全局唯一的语音识别管理器recordRecoManager
      const manager = plugin.getRecordRecognitionManager();
      const [recordState, setRecordState] = useState(false);
      const [content, setContent] = useState('');
      const initRecord = () => {
        manager.onRecognize = function (res) {
          console.log(res);
        };
        // 正常开始录音识别时会调用此事件
        manager.onStart = function (res) {
          console.log('成功开始录音识别', res);
        };
        // 识别错误事件
        manager.onError = function (res) {
          console.error('error msg', res);
        };
        // 识别结束事件
        manager.onStop = function (res) {
          console.log('..............结束录音');
          console.log(`录音临时文件地址 -->${res.tempFilePath}`);
          console.log(`录音总时长 -->${res.duration}ms`);
          console.log(`文件大小 --> ${res.fileSize}B`);
          console.log(`语音内容 --> ${res.result}`);
          if (res.result === '') {
            showModal({
              title: '提示',
              content: '听不清楚,请重新说一遍!',
              showCancel: false,
              success(status) {
                if (status.confirm) {
                  console.log('用户点击确定');
                } else if (status.cancel) {
                  console.log('用户点击取消');
                }
              },
            });
            return;
          }
          const text = content + res.result;
          setContent(text);
          showModal({
            title: '提示',
            content: text,
            showCancel: false,
            success(status) {
              if (status.confirm) {
                console.log('用户点击确定');
              } else if (status.cancel) {
                console.log('用户点击取消');
              }
            },
          });
        };
      };
      useReady(() => {
        initRecord();
      });
      const touchStart = (): void => {
        debugger
        console.log('test____');
        setRecordState(true);
        // 语音开始识别
        manager.start({
          lang: 'zh_CN', // 识别的语言,目前支持zh_CN en_US zh_HK sichuanhua
        });
      };
      const touchEnd = (): void => {
        setRecordState(false);
        // 语音结束识别
        manager.stop();
      };
      const handler = () => {
        if(recordState){
          touchEnd()
        }else {
          touchStart()
        }
      }
      return (
        <View className='index'>
          <View>
            <Button
              onLongPress={touchStart}
              onTouchEnd={touchEnd}
              aria-role='button' aria-label='关键词内容播报'
              className='recognition-play-key'
            >{recordState ? '……' : '按住说话'}</Button>
          </View>
          <View>
            <Text>{content}</Text>
          </View>
        </View>
      )
    }
    
    export default Translation


    demo 地址: https://github.com/zhoulujun/weixin-ai-example


    至此,还安利一个TensorFlowJS(真香):https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx6afed118d9e81df9&token=2002950624&lang=zh_CNm


    转载本站文章《taro微信同声传译:微信小程序获取语音转文字 与语言转文字》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/AppDev/taro/8853.html