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

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

    操作步骤:去微信公众平台 ——设置——添加插件——搜索 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()
  },