微信小程序实现实时语音识别腾讯云

一、安装小程序插件

二、去腾讯云申请开通语音识别

三、实践

一、安装小程序插件

去微信公众平台 ——设置——添加插件——搜索 wx3e17776051baf153

二、去腾讯云申请开通语音识别

当月会增送五个小时当月生效月底失效月底到期之后可能花钱哦~

再去腾讯云新建秘钥 appid secretid SecreKey

三、实践

配置插件 app.json

"plugins": {"QCloudAIVoice": {"version": "1.2.4","provider": "wx3e17776051baf153"}},

xx.wxml 准备一个按钮和一个输入框（输入框采用的是vant的文本框）开始实现一般来说用到的事件为长按事件和松开事件

 <van-fieldautosize="{{objSty}}"input-class="proposalTextarea"type="textarea"show-word-limit="{{true}}"maxlength="500"model:value="{{ form.job_details }}"bind:change="detailInput"bindinput="inputText" placeholder="请详细描述您的用工需求"border="{{ false }}"/></van-cell-group><view class="audio"  bindtouchstart="mytouchstart" bindtouchend="mytouchend">  语音输入</view>

xx.js

const recorderManager = wx.getRecorderManager()  // 获取全局唯一的录音管理器 RecorderManager
const innerAudioContext = wx.createInnerAudioContext()  // 创建内部 audio 上下文 InnerAudioContext 对象。
let plugin = requirePlugin("QCloudAIVoice");  //引入语音识别插件
plugin.setQCloudSecret(appid, "", "", false);//设置腾讯云账号信息，其中appid是数字，secret是字符串，openConsole是布尔值(true/false)，为控制台打印日志开关
let manager = plugin.getRecordRecognitionManager();
const app = getApp()
var init Page({/*** 页面的初始数据*/data: {time: 0, // 初始时间duration: 600000, // 录音时长为10分钟status: 0,  // 语音识别管理器的状态：1为开始，2为停止，voiceData:"" ,//语音识别阶段数据,resultNumber:1,//识别结果的段数Words:'',text:'',oldText:'', // 上一次的文字内容noSound:false, // 没有声音isVoice:false, // 语音中voice:false,inter:''}
)}onLoad: function (options) {manager.onStart((res) => {console.log('recorder start', res.msg);this.setData({status: 1 // 录音识别开始状态为1})})manager.onStop((res) => {console.log('recorder stop', res.tempFilePath);clearInterval(init) // 取消之前的计时this.setData({status: 2 //录音识别结束后标记状态为2})})manager.onError((res) => {console.log('recorder error', res.errMsg); // 打印录音识别错误信息if(res.errMsg=='operateRecorder:fail auth deny'){this.setData({noSound:true})}})
}// 方法timeCounter: function(time) {  // 定义一个计时器函数var that = thisif (time == undefined) {init = setInterval(function() { // 设定一个计时器ID。按照指定的周期（以毫秒计）来执行注册的回调函数var time = that.data.time + 1; // 每秒钟计时+1that.setData({time: time})}, 1000);} else {clearInterval(init) // 取消计时console.log("暂停计时")}},timeCounter: function(time) {  // 定义一个计时器函数var that = thisif (time == undefined) {init = setInterval(function() { // 设定一个计时器ID。按照指定的周期（以毫秒计）来执行注册的回调函数var time = that.data.time + 1; // 每秒钟计时+1that.setData({time: time})}, 1000);} else {clearInterval(init) // 取消计时console.log("暂停计时")}},mytouchstart(){this.data.inter =  setInterval(() => {this.setData({isVoice:true,voice:!this.data.voice})}, 600)console.log('start');this.setData({oldText:this.data.form.job_details})var that=thisclearInterval(init) // 取消之前的计时this.timeCounter()  // 开始计时//开始识别manager.start({duration:this.data.duration, engine_model_type: '16k_zh',// 以下为非必填参数，可跟据业务自行修改// hotword_id = '08003a00000000000000000000000000',// filter_dirty = 0,// filter_modal = 0,// filter_punc = 0,// convert_num_mode = 0,// needvad = 1});//获取识别内容manager.onRecognize((res) => {if(res.result || res.resList){console.log("识别结果", res.result);that.setData({'form.job_details':this.data.oldText +  res.result,})// clearInterval(this.data.clearId)}else if(res.errMsg){console.log("recognize error", res.errMsg);}})},mytouchend(){clearInterval(this.data.inter)this.setData({voice:false,isVoice:false})manager.stop();},inputText(e){console.log(e);let str = this.data.textthis.setData({text:e.detail.value})}

实现效果

可以看代码实现自己想要的效果哈~

注意两个事项

可能会出现107 鉴权失败一般是参数没有填写

102 一般可能代码错了也许重启一下小程序可能也会好哦~ 再不好可以去腾讯云找客服、下工单最近接触了很多腾讯云的项目服务还是很好的

微信小程序实现实时语音识别腾讯云相关推荐

微信小程序开发工具结合腾讯云开发AI人脸识别和身份证识别——基于腾讯云开发者实验项目
微信小程序开发工具结合腾讯云开发AI人脸识别和身份证识别--基于腾讯云开发者实验项目开通腾讯云相关权限(AI人脸识别,文字识别-身份证识别) 查看API密钥部署微信小程序成功演示代码包开通腾 ...
微信小程序/网站上传图片到腾讯云COS
COS简介: 腾讯云提供的一种对象存储服务,供开发者存储海量文件的分布式存储服务.可以将自己开发的应用的存储部分全部接入COS的存储桶中,有效减少应用服务器的带宽消耗等.个人也可以通过腾讯云账号免费使 ...
微信小程序开发系列——3. 腾讯云服务器配置
摘要:本文说明了在腾讯云服务器上通过"微信小程序专用解决方案"搭建.部署后端服务器及基础服务的过程. 了解了基本的开发工具以后,我们开始配置服务器相关的信息,要完成后端服务器的配置 ...
微信小程序（图像识别）腾讯云、百度智能云API（含源码）
前言近期因为自己生活上的需要,开发了一款图像识别小程序.在开发初期,自己浏览参考了大量网上现成存在的小程序,根据体验功能的使用情况,基本都能达到其所述功能.但是有个问题是,很多小程序图像识别功能过于 ...
腾讯小程序服务器忙,使用腾讯云助手小程序管理腾讯云服务器
一般我们运维腾讯云服务器都是通过电脑端网页登录腾讯云后台进行管理维护,其实除了在电脑端管理腾讯云服务器等资源外,可以在手机微信端运维操作腾讯云服务器,简单方便,常用的腾讯云服务器关机.重启.续费.重置 ...
微信小程序集成实时音视频通话功能
微信小程序集成实时音视频通话功能背景在项目的开发当中,很多时候,我们会有音频.视频通话的需求,但是一般都不会自己来写,所以我们就需要借助第三方来实现.尤其是这次的项目开发当中,需要在微信小程序当中 ...
微信小程序接入第三方插件腾讯位置服务地图选点
微信小程序接入第三方插件腾讯位置服务地图选点 1.在小程序服务平台中添加"腾讯位置服务地图选点"插件 1.在小程序服务平台中添加"腾讯位置服务地图选点"插件微 ...
微信小程序-百度AI语音识别——（一）
微信小程序-百度AI语音识别--(一) 一.百度AI 某天闲来无事在CSDN上看到有大神用百度语音识别+图灵机器人做了一个可以语音聊天(调戏人工智障 )的小demo,觉得挺有趣的,也想着实现一下. 百 ...
微信小程序video组件调用腾讯视频的解决方案
最近在开发中碰到了微信小程序video组件调用腾讯视频的问题,就趁机来总结一下. 对方只给了我一个腾讯视频的网页链接,然后需要放置到小程序里面,大概开发前景是这样的. 对方提供的视频链接: https ...

微信小程序实现实时语音识别腾讯云

一、安装小程序插件

二、去腾讯云申请开通语音识别

三、实践

微信小程序实现实时语音识别腾讯云相关推荐

最新文章

热门文章

微信小程序 实现实时语音识别 腾讯云

一、安装小程序插件

二、去腾讯云申请开通语音识别

三、实践

微信小程序 实现实时语音识别 腾讯云相关推荐

最新文章

热门文章

微信小程序实现实时语音识别腾讯云

微信小程序实现实时语音识别腾讯云相关推荐