vue3使用科大讯飞voice-input-button2 （原创）

voice-input-button2是一个用于语言识别分析成文字的工具

vue3按照官网的文档使用voice-input-button2会报以下错误：

 Cannot set properties of undefined (setting 'IATConfig')   

那么我们应该如何解决？

1，导入voice-input-button2 和 @efox/emp-vuett

npm install voice-input-button2
npm install @efox/emp-vuett

2，

在官网获取appId  apiKey  apiSecret

官网地址：控制台-讯飞开放平台 (xfyun.cn)

3，在前端使用以下代码  （该方法是按需导入，不需要修改配置文件）

<template>

  <div id="app">

    <div class="result">{{result}}</div>

    <div>{{recordReady2}}</div>

    <div class="voice-input-button-wrapper">

      <div id="voice"></div>

      <voice-input-button

        appId="填写你的appId"

        apiKey="填写你的apiKey"

        apiSecret="填写你的apiSecret"

        color="#fff"

        tipPosition="top"

        interactiveMode="touch"

        v-model="result"

        :record="showResult"

        :record-start="recordStart"

        :record-stop="recordStop"

        :record-blank="recordNoResult"

        :record-failed="recordFailed"

        :record-ready="recordReady"

        :record-complete="recordComplete"

      >

        <template v-slot:no-speak>没听清您说的什么</template>

      </voice-input-button>

    </div>

  </div>

</template>

<script>

import voiceInputButton from 'voice-input-button2'

import { Vue2InVue3 } from "@efox/emp-vuett";

const ContentInVue3 = Vue2InVue3(voiceInputButton, "voice");

export default {

  name: 'App',

  components: {

    "voice-input-button" : ContentInVue3

  },

  data(){

    return {

      result : "",

    }

  },

  methods: {

    recordReady:function () {

      console.info('按钮就绪!')

    },

    recordStart:function () {

      console.info('录音开始')

    },

    showResult:function (text) {

      console.info('收到识别结果：', text)

    },

    recordStop:function () {

      console.info('录音结束')

    },

    recordNoResult:function () {

      console.info('没有录到什么，请重试')

    },

    recordComplete:function (text) {

      console.info('识别完成! 最终结果：', text)

    },

    recordFailed:function (error) {

      console.info('识别失败，错误栈：', error)

    }

  },

  }

</script>

<style>

  html, body {

    margin: 0;

    width: 100%;

    height: 100%;

  }

  *{

    box-sizing: border-box;

  }

  #app {

    position: absolute;

    top: 100px;

    left: 0;

    right: 0;

    margin: 0 auto;

    width: 400px;

  }

  .voice-input-button-wrapper{

    width: 42px;

    height: 42px;

    background-color: mediumpurple;

    border-radius: 50%;

  }

  .result{

    width: 100%;

    padding: 25px;

    border: #e2e2e2 1px solid;

    border-radius: 5px;

    line-height: 2;

    font-size: 16px;

    color: #727272;

    min-height: 24px;

    margin-bottom: 25px;

  }

</style>

如有问题，请在评论区