一.安装小程序插件(腾讯云智能语音)
操作步骤:去微信公众平台 ——设置——添加插件——搜索 wx3e17776051baf153——添加
二:去腾讯云申请开通语音识别 , 再去腾讯云 新建 秘钥 appid secretid SecreKey
登录后步骤:API秘钥管理——新建秘钥 如下图
三:实践代码
app.json
"plugins": {
"QCloudAIVoice": {
"version": "1.3.4",
"provider": "wx3e17776051baf153"
}
},
**wxml.文件**
<view class="ssearch_page_top">
<!--搜索框-->
<view class="page_bd">
<view class='top-serach flex-def flex-cCenter'>
<view class="serach_left flex-one flex-def flex-zBetween flex-cCenter">
<icon class="serach_icon" type="search" size="14"></icon>
<input type="text" class="serach_input flex-one" placeholder="搜索产品" value="{{inputVal}}" bindinput="inputTyping" bindconfirm='searchList' />
<view class="search_clear" wx:if="{{inputVal.length > 0}}" catchtap="clearFun">
<icon type="clear" size="14"></icon>
</view>
</view>
<view class="serach_btn" bindtap="searchList">搜索</view>
</view>
</view>
<!--搜索框结束-->
</view>
<view style="height: 120rpx;"></view>
<view class="search_view">
<!-- 历史搜索 -->
<view class="title flex-cCenter flex-def">
<view class="flex-one">历史搜索</view>
<view style="font-size: 28rpx;" bindtap="clear_history">清空历史搜索内容</view>
</view>
<view class="height_view">
<view class="view_list" wx:for="{{historySearch}}" wx:key="index" bindtap="goFun" data-item="{{item}}">
{{item}}
</view>
</view>
</view>
<view class="yuyin_view">
<view class="flex-def flex-cCenter flex-zCenter">
<view class="yuyin_img flex-def flex-cCenter flex-zCenter" bindtouchstart="mytouchstart" bindtouchend="mytouchend">
<image src="{{sousuo_img}}" />
</view>
</view>
<view>长按语音搜索,并说出需要搜索的内容</view>
</view>
wxss.文件
page {
background: #fff;
}
.ssearch_page_top {
position: fixed;
width: 100%;
left: 0;
top: 0;
background-color: #FFF;
z-index: 100;
}
.top-serach {
width: 100%;
background: #fff;
padding: 10rpx 30rpx;
box-sizing: border-box;
}
.serach_left {
height: 70rpx;
border-radius: 12rpx;
background: #f5f5f5;
padding: 0 10rpx;
font-size: 28rpx;
color: #333333;
}
.serach_left input {
font-size: 28rpx;
color: #333333;
padding-left: 10rpx;
}
.serach_left input::placeholder {
font-size: 28rpx;
color: #ccc;
}
.search_clear {
width: 70rpx;
text-align: right;
}
.serach_btn {
color: #DD261B;
font-size: 32rpx;
text-align: center;
margin-left: 20rpx;
font-weight: 600;
}
.serach-icon {
position: absolute;
left: 12rpx;
}
/*搜索框样式end*/
.search_view .title {
font-size: 32rpx;
color: #323433;
margin-bottom: 10rpx;
padding: 0 12rpx;
}
.search_view .view_list {
font-size: 24rpx;
color: #323433;
display: inline-block;
background: #F6F6F6;
border-radius: 30rpx;
padding: 4rpx 20rpx;
margin: 10rpx;
}
.search_view .height_view {
height: 300rpx;
overflow: scroll;
}
/* 底部 */
.yuyin_view {
position: fixed;
/* bottom: 0; */
left: 0;
width: 100%;
font-size: 22rpx;
color: #3A3A3A;
font-weight: 600;
text-align: center;
bottom: calc(140rpx + env(safe-area-inset-bottom));
bottom: calc(140rpx + constant(safe-area-inset-bottom));
}
.yuyin_view .yuyin_img {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background: #F4F4F4;
margin-bottom: 20rpx;
}
.yuyin_view .yuyin_img image {
width: 84rpx;
height: 84rpx;
}
js.文件
const app = getApp();
let http_host = app.globalData.http_host
const util = require('../../../utils/util.js');
const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext() // 创建内部 audio 上下文 InnerAudioContext 对象。
let plugin = requirePlugin("QCloudAIVoice"); //引入语音识别插件
plugin.setQCloudSecret(appid, secret, secret_key, true);//设置腾讯云账号信息,其中appid是数字(腾讯云获取到的appid),secret是字符串(腾讯云获取的秘钥),openConsole是布尔值,控制台打印日志开关
// let manager = plugin.getRecordRecognitionManager();
const options = {
duration: 60000,//录音时长。最大10分钟
sampleRate: 16000,
numberOfChannels: 1,
encodeBitRate: 48000,
format: 'mp3',
frameSize: 50
}
data: {
inputVal: '',
sousuo_img: "images/search_page_icon_voice.png",
//历史搜索
historySearch: [],
suosou_img: 'images/search_page_icon_voice search.png',
},
mytouchstart() {
wx.showLoading({
title: '正在录音'
})
recorderManager.start(options);
},
mytouchend() {
var _this = this;
wx.showLoading({
title: '正在识别语音'
})
console.log("录音结束");
recorderManager.onStop((res) => {
console.log('recorder stop开始了');
});
recorderManager.onFrameRecorded((res) => {
console.log('recorder onFrameRecorded');
const { frameBuffer } = res
if (res.isLastFrame) {
const buf = wx.arrayBufferToBase64(frameBuffer)
plugin.sentenceRecognition({
engSerViceType: '16k', //引擎类型
sourceType: 1, //1:语音数据
voiceFormat: 'mp3',
url: '',
data: buf,
dataLen: frameBuffer.byteLength,
projectId: 0,
success: function (data) {
if (!data.result) {
wx.showToast({
title: "请说话,未识别到语音",
icon: 'none'
});
return;
}
//去掉字符串的标点符号
data.result = data.result.replace(/[`:_.~!@#$%^&*() \+ =<>?"{}|, \/ ;' \\ [ \] ·~!@#¥%……&*()—— \+ ={}|《》?:“”【】、;‘’,。、]/g,
'');
_this.setData({
inputVal: data.result,
})
console.log('sentenceRecognition succ:结果', data.result);
},
fail: function (err) {
console.log('sentenceRecognition error:', err)
}
})
}
})
recorderManager.stop();
wx.hideLoading()
},