BizVoiceInput 语音输入

语音输入：Web Speech API 封装——麦克风按钮点击开始 / 停止聆听，实时中间结果展示、终句写回 v-model（append 增量 / replace 整体替换）；浏览器不支持时自动降级为禁用态提示。语音备注、评论快捷输入、移动端巡检填报。（需 Chrome / Edge 等支持 Web Speech API 的浏览器，且麦克风授权。）

基础用法

当前浏览器不支持语音识别（建议使用 Chrome / Edge）

识别文本（可继续编辑）：

（空）

点击麦克风开始聆听，说话内容终句自动写入下方文本域（append 模式）。

<script setup lang="ts">
/** 场景：基础——点击说话，终句写入文本域 */
import { ref } from 'vue'
import { BizVoiceInput } from 'vue3-ep-biz-lib'

const text = ref('')
</script>

<template>
  <div>
    <BizVoiceInput v-model="text" />
    <p style="margin: 10px 0 4px; font-size: 12px; color: var(--el-text-color-secondary)">识别文本（可继续编辑）：</p>
    <p style="margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--el-fill-color-lighter); min-height: 40px; font-size: 13px">
      {{ text || '（空）' }}
    </p>
  </div>
</template>

显示代码

替换模式

当前浏览器不支持语音识别（建议使用 Chrome / Edge）

（空）

mode=replace：识别结果整体替换而非追加。

<script setup lang="ts">
/** 场景：替换模式——整体替换而非追加 */
import { ref } from 'vue'
import { BizVoiceInput } from 'vue3-ep-biz-lib'

const text = ref('')
</script>

<template>
  <div>
    <BizVoiceInput v-model="text" mode="replace" start-text="点击说话（替换）" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      {{ text || '（空）' }}
    </p>
  </div>
</template>

显示代码

语言切换

中文English日本語

当前浏览器不支持语音识别（建议使用 Chrome / Edge）

（空）

lang 切换识别语言（BCP-47）。

<script setup lang="ts">
/** 场景：语言切换 */
import { ref } from 'vue'
import { ElRadioButton, ElRadioGroup } from 'element-plus'
import { BizVoiceInput } from 'vue3-ep-biz-lib'

const lang = ref('zh-CN')
const text = ref('')
</script>

<template>
  <div>
    <ElRadioGroup v-model="lang" size="small" style="margin-bottom: 10px">
      <ElRadioButton value="zh-CN">中文</ElRadioButton>
      <ElRadioButton value="en-US">English</ElRadioButton>
      <ElRadioButton value="ja-JP">日本語</ElRadioButton>
    </ElRadioGroup>
    <BizVoiceInput v-model="text" :lang="lang" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      {{ text || '（空）' }}
    </p>
  </div>
</template>

显示代码

组合输入框

当前浏览器不支持语音识别（建议使用 Chrome / Edge）

与文本框并排：语音转写 + 手动编辑混合输入。

<script setup lang="ts">
/** 场景：与文本框组合——语音转写 + 手动编辑 */
import { ref } from 'vue'
import { ElInput } from 'element-plus'
import { BizVoiceInput } from 'vue3-ep-biz-lib'

const text = ref('')
</script>

<template>
  <div style="display: flex; gap: 10px; align-items: flex-start">
    <BizVoiceInput v-model="text" />
    <ElInput
      v-model="text"
      type="textarea"
      :rows="3"
      placeholder="语音转写或手动输入巡检备注"
      style="flex: 1"
    />
  </div>
</template>

显示代码

事件

当前浏览器不支持语音识别（建议使用 Chrome / Edge）

result / start / end / error 事件日志。

<script setup lang="ts">
/** 场景：事件日志 */
import { ref } from 'vue'
import { BizVoiceInput } from 'vue3-ep-biz-lib'

const text = ref('')
const logs = ref<string[]>([])

const log = (msg: string): void => {
  logs.value.unshift(msg)
  if (logs.value.length > 5) logs.value.pop()
}
</script>

<template>
  <div>
    <BizVoiceInput
      v-model="text"
      @start="log('start：开始聆听')"
      @end="log('end：聆听结束')"
      @result="(t: string, fin: boolean) => log(`result（${fin ? '终句' : '中间'}）：${t}`)"
      @error="(r: string) => log(`error：${r}`)"
    />
    <p v-for="(item, i) in logs" :key="i" style="margin: 6px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      {{ item }}
    </p>
  </div>
</template>

显示代码

不支持降级

当前浏览器不支持语音识别，请使用 Chrome / Edge 或改用手动输入

不支持 Web Speech API 的环境渲染禁用态与提示文案（当前页面支持时显示正常按钮）。

<script setup lang="ts">
/** 场景：不支持降级（当前环境支持时仍显示可用按钮） */
import { ref } from 'vue'
import { BizVoiceInput } from 'vue3-ep-biz-lib'

const text = ref('')
</script>

<template>
  <BizVoiceInput v-model="text" unsupported-text="当前浏览器不支持语音识别，请使用 Chrome / Edge 或改用手动输入" />
</template>

显示代码

编程式控制

当前浏览器不支持语音识别（建议使用 Chrome / Edge）

expose start / stop / abort：录音由外部按钮或流程节点驱动。

<script setup lang="ts">
/** 场景：编程式控制——expose start / stop / abort 外部驱动 */
import { ref } from 'vue'
import { ElButton, ElButtonGroup } from 'element-plus'
import { BizVoiceInput } from 'vue3-ep-biz-lib'
import type { BizVoiceInputInstance } from 'vue3-ep-biz-lib'

const text = ref('')
const refEl = ref<BizVoiceInputInstance | null>(null)
</script>

<template>
  <div>
    <BizVoiceInput ref="refEl" v-model="text" />
    <ElButtonGroup style="margin-top: 10px">
      <ElButton size="small" @click="refEl?.start()">start()</ElButton>
      <ElButton size="small" @click="refEl?.stop()">stop()（结果写回）</ElButton>
      <ElButton size="small" @click="refEl?.abort()">abort()（丢弃）</ElButton>
    </ElButtonGroup>
  </div>
</template>

显示代码

自定义文案

当前浏览器不支持语音识别（建议使用 Chrome / Edge）

按钮、聆听中提示按业务语境调整（如口述病历）。

<script setup lang="ts">
/** 场景：自定义文案——按钮 / 聆听中提示按业务语境调整 */
import { ref } from 'vue'
import { BizVoiceInput } from 'vue3-ep-biz-lib'

const text = ref('')
</script>

<template>
  <BizVoiceInput
    v-model="text"
    start-text="按一下开始口述病历"
    stop-text="结束口述"
    listening-text="正在听，请继续…"
  />
</template>

显示代码

Props

属性名	类型	默认值	说明
v-model	string	''	识别结果文本
lang	string	'zh-CN'	识别语言（BCP-47）
mode	'append' | 'replace'	'append'	追加 / 整体替换
start-text / stop-text	string	'点击说话' / '停止聆听'	按钮提示
listening-text	string	'聆听中…'	识别中提示
unsupported-text	string	内置提示	不支持时的文案
disabled	boolean	false	禁用

Events

事件名	参数	说明
update:modelValue	(value: string)	文本变化（终句写回）
result	(text, isFinal)	中间 / 终句结果
start / end	—	聆听开始 / 结束
error	(reason: string)	识别错误（not-allowed / network 等；aborted 与 no-speech 已被组件吞掉不外抛）

Expose

名称	类型	说明
start / stop / abort	() => void	编程式控制