江西讯飞语音组件集成文档

组件打包

1、修改package.json文件中的版本

"version": "0.1.2",

2、编译组件

npm run build

3、登录npm,已经登录忽略这步

npm login

4、发布组件

npm publish

组件使用方法

1、安装组件

npm i [email protected]

2、在使用页面添加组件

// 引入组件
import {IflytekSpeech} from 'iflytek-speech'
// 注册组件
components: {
IflytekSpeech
},

3、页面引用组件

• 如果直接使用IflytekSpeech组件将isShowAudioComp设置成true

  
// 在页面增加组件
// isShowAudioComp 是否显示组件页面元素（文本框和语音图标，本组件是antd组件），如不显示组件则需要自己增加页面元素
// isStartRecording 调用组件方法，true时调用开始语音方法，false时调用结束语音组件
// transmittingVoiceContent 返回语音内容方法

<IflytekSpeech :isShowAudioComp="false" :isStartRecording="isRecording" @transmittingVoiceContent="transmittingVoiceContent"></IflytekSpeech>

• 如果需要自定义页面元素将isShowAudioComp设置成false

4、自定义页面元素方法

增加页面元素(示例)

<!-- 增加文本框和语音图标，实现相关方法 -->
<a-input size="large"
               @change="getListBySearch"
               v-model:value="keyWord"
               style="width: 75%"
               :placeholder="placeholder">
        <template #addonAfter>
          <AudioOutlined v-if="!isRecording"  @click="handleClick()"/><AudioMutedOutlined  v-if="isRecording"  @click="handleClick()"/>
        </template>
      </a-input>

实现以下方法

// 定义图标切换状态
const isRecording = ref(false)
// 图标切换方法，开始录音和停止录音
const handleClick = () => {
  isRecording.value = !isRecording.value
}
// isShowAudioComp=false时增加这个方法
// message是语音识别参数，将参数赋值给检索框
const transmittingVoiceContent = (msg, code) =>{
      if(code !== 0){
        isRecording.value =  false
        message.error(msg);
      } else {
        this.keyWord = msg
      }

    }