(保姆教程及高级玩法及坑)微信同声传译插件-语音识别

简介: (保姆教程及高级玩法及坑)微信同声传译插件-语音识别

目录

一、背景

二、效果

编辑

三、保姆级教程

3.1 小程序后台添加插件:微信同声传译

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

3.1.2 搜索插件

3.1.3 成功添加后,点击详情

3.1.4 复制它的AppID和最新版本号(后序有用)

3.2 配置项目

3.2.1 微信原生小程序

3.2.2 uniapp配置

3.3 页面展示

3.3.1 wxml代码

3.3.2 js代码

3.3.3 css代码

3.3.4 注意-只能在真机上测试

四、高阶玩法

五、坑


一、背景

在我们的工作中可能会遇到这种情况,需要用到微信语音识别来进行内容赋值,增强用户的的体验感,俗称所谓的逼格

二、效果

参考下面大佬的文章

微信小程序 -- 获取语音,并将语音转为文字(插件:微信同声传译)_微信小程序语音转文字_星星之火M的博客-CSDN博客

三、保姆级教程

3.1 小程序后台添加插件:微信同声传译

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

3.1.2 搜索插件

3.1.3 成功添加后,点击详情

3.1.4 复制它的AppID和最新版本号(后序有用)

3.2 配置项目

3.2.1 微信原生小程序

去app.json进行配置

其中,version的值对应上面的版本号,provider的值对应上面的AppID

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

3.2.2 uniapp配置

在manifest.json文件 -> 源码视图

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

3.3 页面展示

3.3.1 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>

3.3.2 js代码

参考官方文档

微信同声传译 | 微信开放文档

const app = getApp();
//引入插件:微信同声传译
const plugin = requirePlugin('WechatSI');
//获取全局唯一的语音识别管理器recordRecoManager
const 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();
  },
})

3.3.3 css代码

/* pages/yuyin/yuyin.wxss */
.yuyinWrap {
  position: relative;
  margin-top:300rpx;
}
.yuyinCon {
  border: 1px solid #ccc;
  margin: 0 auto;
  padding: 10rpx 10rpx 70rpx;
}
.yuyin {
  position: absolute;
  bottom: 0;
  left: 48rpx;
  font-size: 36rpx;
  color: #999;
  padding-bottom: 10rpx;
}
.yuyin icon.iconfont {
  font-size: 34rpx;
  padding: 0 17rpx 15rpx;
  border-radius: 50%;
  background: #73dbef;
  margin-right: 14rpx;
  color: #fff;
}
.consultYuyin {
  height: 100%;
  width: 90%;
}
.icon-jianpan1 {
  position: absolute;
  left: 10rpx;
  bottom: 6px;
  color: #606267;
  font-size: 60rpx;
}
.yuyinBtn {
  width: 70%;
  height: 70rpx;
  position: absolute;
  right: 112rpx;
  bottom: 12rpx;
  border: 1px solid #eee;
  background: #fff;
  color: #606267;
  line-height: 62rpx;
}
.yuyinBtnBg {
  background: #eee;
}
.yuyinBtn::after {
  /* background: #fff; *//* color: #000; */
  border-radius: 0;
  border: none;
}
.startYuyinImage {
  position: fixed;
  top: 210rpx;
  left: 50%;
  width: 190rpx;
  height: 240rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20rpx;
  color: #fff;
  text-align: center;
  margin-left: -95rpx;
}
.startYuyinImage cover-image {
  margin: 30rpx auto;
  width: 100rpx;
  height: 100rpx;
}
.startYuyinImage cover-view {
  margin-top: 25rpx;
}

3.3.4 注意-只能在真机上测试

注意:测试时,在微信开发者工具无效果,要预览或者真机调试下,手机进行测试。

四、高阶玩法

(保姆教程及高级玩法-自定义数据处理)微信同声传译插件-语音识别__揽的博客-CSDN博客

(保姆教程及高级玩法-自定义数据处理)微信同声传译插件-语音识别__揽的博客-CSDN博客

五、坑

微信同声传译插件不进onRecognize的方法 | 微信开放社区

微信同声传译插件不进onRecognize的方法 | 微信开放社区

 

相关实践学习
一键创建和部署高分电影推荐语音技能
本场景使用天猫精灵技能应用平台提供的技能模板,在2-5分钟内,创建一个好玩的高分电影推荐技能,使用模板后无须代码开发,系统自动配置意图、实体等,新手0基础也可体验创建技能的乐趣。
达摩院智能语音交互 - 声纹识别技术
声纹识别是基于每个发音人的发音器官构造不同,识别当前发音人的身份。按照任务具体分为两种: 声纹辨认:从说话人集合中判别出测试语音所属的说话人,为多选一的问题 声纹确认:判断测试语音是否由目标说话人所说,是二选一的问题(是或者不是) 按照应用具体分为两种: 文本相关:要求使用者重复指定的话语,通常包含与训练信息相同的文本(精度较高,适合当前应用模式) 文本无关:对使用者发音内容和语言没有要求,受信道环境影响比较大,精度不高 本课程主要介绍声纹识别的原型技术、系统架构及应用案例等。 讲师介绍: 郑斯奇,达摩院算法专家,毕业于美国哈佛大学,研究方向包括声纹识别、性别、年龄、语种识别等。致力于推动端侧声纹与个性化技术的研究和大规模应用。
目录
相关文章
|
4月前
|
数据处理 语音技术
(保姆教程及高级玩法-自定义数据处理)微信同声传译插件-语音识别
(保姆教程及高级玩法-自定义数据处理)微信同声传译插件-语音识别
24 0
|
人工智能 自然语言处理 机器人
人工智能-调百度AI语音识别接口教程
功能介绍 技术领先识别准确
|
语音技术 iOS开发
iOS中 语音识别功能/语音转文字教程详解 韩俊强的博客
原文地址:http://blog.csdn.net/qq_31810357/article/details/51111702 前言:最近研究了一下语音识别,从百度语音识别到讯飞语音识别;首先说一下个人针对两者的看法,讯飞毫无疑问比较专业,识别率也很高真对语音识别是比较精准的,但是很多开发者和我一样期望离线识别,而讯飞离线是收费的;请求次数来讲,两者都可以申请高配额,针对用户较多的几乎都一样。
1203 0
|
Web App开发 JavaScript NoSQL
redis,nodejs,php,pub/sub 实战: 微信语音识别
2015年5月22日 20:20:20 星期五 效果: 这边对微信说话,  浏览器端及时显示语音识别的文字 注意: 在连接socket.io时, 按下浏览器f12, 如果一直有请求不断的刷, 说明socket.
1164 0
|
测试技术 语音技术
微信快速开发框架(八)-- V2.3--增加语音识别及网页获取用户信息,代码已更新至Github
不知不觉,版本以每周更新一次的脚步进行着,接下来应该是重构我的代码及框架的结构,有朋友反应代码有点乱,确实如此,当时写的时候只是按照订阅号来写的,后来才慢慢增加到支持API接口。目前还在开发第三方微信平台,旨在使用户能够无需自己开发就能简易搭建微信平台。
1212 0
|
自然语言处理 语音技术 索引
微信公众平台开发(75) 语音识别
本文介绍如何使用微信公众平台高级接口中的语音识别功能,做出一个语音版的天气预报查询功能。根据这个模型,你可以扩展到所有的语音查询。   一、接收语音识别结果 开通语音识别功能以后,用户每次发送语音给公众号时,微信会在推送的语音消息XML数据包中,增加一个Recongnition字段。
1146 0
|
自然语言处理 语音技术
微信公众平台消息接口开发(40)语音识别
微信公众平台开发模式 微信 语音识别 公众平台 消息接口 语音识别   微信公众平台开发 语音识别 作者:方倍工作室 地址:http://www.cnblogs.com/txw1958/archive/2013/02/06/weixin-if40-voice-recognition.html   一、申请微信认证 微信认证后将自动开通高级接口,获得高级接口中所有接口权限,无需二次申请。
1251 0

热门文章

最新文章