E企盈营销工具技术服务商 热线:4006-838-530

微信小程序获取语音,并将语音转为文字(插件:微信同声传译)

E企盈直播平台营销卖货系统

实现的功能是获取语音,并将语音转为文字,实现效果如下:              1. 小程序后台添加插件:微信同声传译登录小程序后台:https://mp.weixin.qq.com 11. 设置 -> 第三方设置 -> 添加插件12. 输入“微信同声传译”,点击搜索,之后选择并点击添加 13. 成功添加后,点击详情  14. 复制它的AppID和最新版本号(后序有用)。2. 配置去app.json进行配置其中,version的值对应上面的版本号,provider的值对应上面的AppID”plugins”: {    “WechatSI”: {      “version”: “0.3.0”,      “provider”: “wx069ba97219f66d99″    }},3. 代码实现31. wxml代码<view class=”yuyinWrap”>  <textarea class=’yuyinCon’ placeholder=’请输入内容’ value='{{content}}’></textarea>  <!–  –>  <view class=”>    <button class=”yuyinBtn {{recordState == true ? ‘yuyinBtnBg’:”}}” bindtouchstart=”touchStart” bindtouchend=”touchEnd”>      <text wx:if=”{{recordState == false}}”>按住 说话</text>      <text wx:else>松开 结束</text>    </button>  </view>  <!– 开始语音 弹出语音图标表示正在录音 –>  <cover-view class=”startYuyinImage” wx:if=”{{recordState == true}}”>    <cover-image src=”../resource/image/yuyin-min.png”></cover-image>    <cover-view>开始语音</cover-view>  </cover-view></view>效果如下:32. js 实现代码实现了textarea可以手动输入,也可以语音转为文字填入。代码解析看注释。具体可以看官网:https://developers.weixin.qq.com/miniprogram/dev/extended/service/translator.htmlconst app = getApp();//引入插件:微信同声传译const plugin = requirePlugin(‘WechatSI’);//获取全局唯一的语音识别管理器recordRecoManagerconst manager = plugin.getRecordRecognitionManager();Page({  /**   * 页面的初始数据   */  data: {    //语音    recordState: false, //录音状态    content:”,//内容  },  /**   * 生命周期函数–监听页面加载   */  onLoad: function (options) {    //识别语音    this.initRecord();  },  // 手动输入内容  conInput: function (e) {    this.setData({      content:e.detail.value,    })  },  //识别语音 — 初始化  initRecord: function () {    const that = this;    // 有新的识别内容返回,则会调用此事件    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 == ”) {        wx.showModal({          title: ‘提示’,          content: ‘听不清楚,请重新说一遍!’,          showCancel: false,          success: function (res) {}        })        return;      }      var text = that.data.content + res.result;      that.setData({        content: text      })    }  },  //语音  –按住说话  touchStart: function (e) {    this.setData({      recordState: true  //录音状态    })    // 语音开始识别    manager.start({      lang: ‘zh_CN’,// 识别的语言,目前支持zh_CN en_US zh_HK sichuanhua    })  },  //语音  –松开结束  touchEnd: function (e) {    this.setData({      recordState: false    })    // 语音结束识别    manager.stop();  },})注意:测试时,在微信开发者工具无效果,要预览或者真机调试下,手机进行测试。  多个按钮独立使用的做法:1. 使用data-flag,设置不同的值来标识不同的按钮。可设置 1,2,3…或者其他也行。2. js的data设置参数flag3. 在touchStart方法里,获取flag值。4. 如下,判断flag值,给不同按钮相应的参数进行赋值。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序获取语音,并将语音转为文字(插件:微信同声传译)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏