useAudio

介绍

useAudio 是一个调用浏览器原生API用于语音识别的 hooks。 结合 sender 发送输入框和 useAudio 钩子函数，可以很好的实现自定义的语音按钮样式。

基础用法

基础用法

useAudio 的基础用法

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <div style="display: flex;">
      <el-button type="primary" @click="start" :disabled="loading">{{ loading ? '录音中...' : '开始录音' }}</el-button>
      <el-button @click="stop">停止录音</el-button>
    </div>

    <Sender v-model="audioValue">
      <template #actionsList>
        <div class="btn-list">
          <el-button v-if="!loading" :loading="loading" type="primary" circle color="#626aef" @click="handleStart">
            <el-icon>
              <Microphone />
            </el-icon>
          </el-button>

          <el-button v-else type="primary" circle color="#626aef" plain :z-index="99" @click="stop">
            <el-icon class="loading">
              <Loading />
            </el-icon>
          </el-button>
        </div>
      </template>
    </Sender>
  </div>
</template>

<script setup lang="ts">
import { Sender } from 'vue-chat-pro'
import { useAudio } from 'vue-chat-pro'
// const value = ref('')
const { start, value: audioValue, loading, stop } = useAudio({ lang: 'zh-CN', onEnd: handleEnd, onResult: handleResult })
console.log('audioValue:', audioValue.value)


function handleStart() {
  start()
}
function handleEnd(res: string) {
  console.log('end:', res)
}
function handleResult(res: string) {
  console.log('result:', res)
}
</script>

<style scoped lang="scss">
// 旋转
.loading {
  animation: rotate 1s linear infinite;
}

// 旋转样式
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>

💌 提示

若想使用 useAudio 钩子函数，可能需要科学上网。

useAudio 参数

属性名	类型	是否必填	默认值	描述
lang	string	否	'zh-CN'	语言
continuous	boolean	否	true	是否连续识别
interimResults	boolean	否	true	是否实时返回结果
onError	(err: unknown) => void	否	-	错误回调
onStart	() => void	否	-	开始回调
onEnd	(res: string) => void	否	-	结束回调
onResult	(res: string) => void	否	-	实时结果回调

useAudio 返回值

属性名	类型	描述
start	() => void	开始录音
stop	() => void	停止录音
value	string	录音结果
loading	boolean	录音状态