腾讯语音识别插件-taro+vue

本文实现的是基于腾讯云语音插件的语音识别功能，包括实时语音识别，一句话语音识别，文字转语音等，用了taro+vue的技术框架。
最终界面

代码仓库传送门

前期准备

1. 准备一个腾讯云账号
2. 腾讯云秘钥 console.cloud.tencent.com/cam/capi
3. 开通腾讯云语音识别 console.cloud.tencent.com/asr
4. 开通腾讯云语音合成 console.cloud.tencent.com/tts
5. 腾讯云智能语音插件 mp.weixin.qq.com/wxopen/plug…

语音识别有免费资源包，语音合成也有免费资源包，不过只针对新开通的账号(2021-06-28)。

引入插件

在app.config.ts中添加

export default {
//  ...
  "plugins": {
    "QCloudAIVoice": {
      "version": "1.3.0",
      "provider": "wx3e17776051baf153"
    }
  }
}
复制代码

语音贴片

我准备了一个语音贴片的样式，放在界面左下角，点击的时候切换图片，出现蒙层，中间还有个声纹。实际使用的时候根据各自需求改变。

贴片样式register-paster.vue

<template>
  <view class="wrap">
    <view class="mask" :style="displayStyle">
      <sound-wave></sound-wave>
    </view>
    <view class="paster-container">
      <view class="paster-message">
        <view  @tap="handleClearMsg">
          <AtIcon value='close-circle' size='20' color='#FFF' class="paster-close" :style="closeCircleStyle"></AtIcon>
        </view>
        <view v-for="item in msgList" :key="item">
          {{ item }}
        </view>
      </view>
      <view class="paster-body" @tap="handleClick" @touchStart="touchStart" @touchEnd="touchEnd">
        <image :src="https://juejin.cn/post/imageSrc" class="paster-image" />
        <view class="paster-text">按住说话</view>
      </view>
    </view>
  </view>
  
</template>

复制代码

实时语音识别

<script>
let plugin = requirePlugin("QCloudAIVoice");  //引入语音识别插件
plugin.setQCloudSecret(appid, "secretId", "secretKey", true);//设置腾讯云账号信息，其中appid是数字，secretid/secretkey是字符串，openConsole是布尔值(true/false)，为控制台打印日志开关
let manager = plugin.getRecordRecognitionManager();  //获取全局唯一的语音识别管理器

export default {
  mounted () {
    manager.onStart((res) => {
      console.log('recorder start', res.msg);
    })
    manager.onStop((res) => {
      console.log('recorder stop', res.tempFilePath);
    })
    manager.onError((res) => {
      console.log('recorder error', res.errMsg); // 打印录音识别错误信息
    })
  },
  methods: {
    speechRecognizestart() {
      // 实时语音识别
      manager.start({
        // duration:this.duration, // 录音时长， 默认60000ms,最大为10分钟
        engine_model_type: '16k_zh',    // 16k_zh 中文, 16k_en 英语， 16k_ca 粤语
        // 以下为非必填参数，可跟据业务自行修改
        // hotword_id: '08003a00000000000000000000000000', // 热词id
        // 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);
            this.msgList.push(res.result)
        }else if(res.errMsg){
          console.log("recognize error", res.errMsg);
        }
      })
    },
    speechRecognizeStop: function() {
      manager.stop();
    },
    touchStart(event) {
      console.log('touch start', event);
      this.imageSrc = '../../assets/microphone-selected.png'
      this.displayStyle = { display: 'block' }
      this.setTimer()
      this.speechRecognizeStart()
      // this.recordStart()
    },
    touchEnd(event) {
      console.log('touch end')
      clearInterval(timer)
      this.imageSrc = '../../assets/microphone.png'
      this.displayStyle = { display: 'none' }
      this.speechRecognizeStop()
      // this.recordStop()
    },
  }
}
</script>
复制代码

一句话语音识别

一句话语音识别是通过wx接口，先调用麦克风获得一段语音，录音结束后发给插件去识别，然后返回文字。

const recorderManager = wx.getRecorderManager()  // 获取全局唯一的录音管理器 RecorderManager

export default {
  mounted () {
    recorderManager.onStart(() => {
      console.log('record start')
    })
    recorderManager.onStop((res) => {
      const { tempFilePath } = res
      console.log('record end', tempFilePath);
    })
    recorderManager.onFrameRecorded((res) => {
      const { frameBuffer } = res
      if(this.duration < 1) {
        Taro.showToast({
          title: '请详细描述',
          icon: 'none',
          duration: 2000
        })
      } else if( this.duration > 60 ){
        Taro.showToast({
          title: '语音过长',
          icon: 'none',
          duration: 2000
        })
      } else {
        this.sentenceRecognize(frameBuffer)
      }
    })
  },
  method: {
    setTimer () {
      this.duration = 0
      timer = setInterval(() => {
        this.duration += 1
        console.log(this.duration);
      }, 1000)
    },
    recordStart() {
      const params = {
        duration: 60000,
        sampleRate: 16000,
        numberOfChannels: 2,
        encodeBitRate: 48000,
        format: 'mp3',
        frameSize: 50
      }
      recorderManager.start(params)
    },
    recordStop() {
      recorderManager.stop()
    },
    touchStart(event) {
      console.log('touch start', event);
      this.imageSrc = '../../assets/microphone-selected.png'
      this.displayStyle = { display: 'block' }
      this.setTimer()
      this.recordStart()
    },
    touchEnd(event) {
      console.log('touch end')
      clearInterval(timer)
      this.imageSrc = '../../assets/microphone.png'
      this.displayStyle = { display: 'none' }
      this.recordStop()
    },
  }
}
复制代码

语音合成

const text = "腾讯云基于业界领先技术构建的语音合成系统，具备合成速度快、合成拟真度高、语音自然流畅等特点，能够应用于多种使用场景，让设备和应用轻松发声。"
const innerAudioContext = wx.createInnerAudioContext()  // 创建内部 audio 上下文 InnerAudioContext 对象。

export default {
  methods: {
    textToSpeech(){
      plugin.textToSpeech({
        content: text,
        speed: 0,
        volume: 0,
        voiceType: 0,
        language: 1,
        projectId: 0,
        sampleRate: 16000,

        success: function(data) {
          let url = data.result.filePath;
          if(url && url.length > 0){
            innerAudioContext.autoplay = true;
            innerAudioContext.src = url;
            innerAudioContext.onPlay(() => {
            });
            innerAudioContext.onError((res) => {
              console.log(res.errMsg)
            });
          }
        },
        fail: function(error){
          console.log(error);
        }
      })
    }
  }
}
复制代码