小程序实现一句话语音识别搜索

大家好，欢迎来到IT知识分享网。

一.安装小程序插件(腾讯云智能语音)

 操作步骤:去微信公众平台 ——设置——添加插件——搜索 wx3ebaf153——添加 

二:去腾讯云申请开通语音识别 ， 再去腾讯云 新建 秘钥 appid secretid SecreKey

 登录后步骤:API秘钥管理——新建秘钥 如下图 

三:实践代码

app.json

"plugins": { 
    "QCloudAIVoice": { 
    "version": "1.3.4", "provider": "wx3ebaf153" } }, 

 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: #; } .serach_left input { 
    font-size: 28rpx; color: #; 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: #; margin-bottom: 10rpx; padding: 0 12rpx; } .search_view .view_list { 
    font-size: 24rpx; color: #; 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() },