当前位置:首页 > VUE

vue实现语音识别demo

2026-02-20 22:15:37VUE

实现语音识别的Vue Demo

在Vue中实现语音识别功能可以通过Web Speech API完成。以下是一个简单的实现方法:

安装依赖 需要安装vue和必要的语音识别库,如annyang(可选)。

npm install vue annyang --save

创建语音识别组件 在Vue组件中集成语音识别功能。

<template>
  <div>
    <button @click="startListening">开始语音识别</button>
    <button @click="stopListening">停止语音识别</button>
    <p>识别结果: {{ transcript }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transcript: '',
      recognition: null
    }
  },
  mounted() {
    this.initSpeechRecognition()
  },
  methods: {
    initSpeechRecognition() {
      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
      this.recognition = new SpeechRecognition()
      this.recognition.continuous = true
      this.recognition.interimResults = true

      this.recognition.onresult = (event) => {
        let interimTranscript = ''
        let finalTranscript = ''

        for (let i = event.resultIndex; i < event.results.length; i++) {
          const transcript = event.results[i][0].transcript
          if (event.results[i].isFinal) {
            finalTranscript += transcript
          } else {
            interimTranscript += transcript
          }
        }

        this.transcript = finalTranscript || interimTranscript
      }

      this.recognition.onerror = (event) => {
        console.error('语音识别错误:', event.error)
      }
    },
    startListening() {
      this.recognition.start()
    },
    stopListening() {
      this.recognition.stop()
    }
  }
}
</script>

使用annyang简化实现 如果希望简化实现,可以使用annyang库:

<template>
  <div>
    <button @click="startListening">开始语音识别</button>
    <p>识别结果: {{ transcript }}</p>
  </div>
</template>

<script>
import annyang from 'annyang'

export default {
  data() {
    return {
      transcript: ''
    }
  },
  methods: {
    startListening() {
      if (annyang) {
        annyang.addCallback('result', (phrases) => {
          this.transcript = phrases[0]
        })
        annyang.start()
      }
    }
  }
}
</script>

注意事项

  • 确保浏览器支持Web Speech API(Chrome、Edge等现代浏览器支持)
  • 需要用户授权麦克风权限
  • 在HTTPS环境下工作更可靠
  • 移动设备上可能有额外限制

扩展功能 可以添加语音命令处理:

methods: {
  addCommands() {
    const commands = {
      'hello': () => {
        this.transcript = '你好!'
      },
      'search *term': (term) => {
        this.transcript = `正在搜索: ${term}`
      }
    }
    annyang.addCommands(commands)
  }
}

以上代码提供了在Vue中实现基本语音识别功能的方法,可以根据需求进一步扩展和完善。

vue实现语音识别demo

标签: 语音识别vue
分享给朋友:

相关文章

vue实现aop切面

vue实现aop切面

Vue 实现 AOP 切面编程的方法 在 Vue 中实现 AOP(面向切面编程)可以通过多种方式,以下是几种常见的实现方法: 使用 Vue 混入(Mixins) Vue 的混入机制可以用于实现横切关…

vue实现查询替换

vue实现查询替换

Vue 实现查询替换功能 在 Vue 中实现查询替换功能,可以通过数据绑定和字符串操作方法结合实现。以下是具体实现方式: 基础实现 <template> <div>…

vue实现摘要

vue实现摘要

Vue 实现摘要的方法 在 Vue 中实现文本摘要功能通常涉及截取文本的前部分内容并添加省略号。可以通过计算属性、过滤器或自定义指令来实现。 计算属性实现 在 Vue 组件中定义一个计算属性,用于截…

vue实现选区

vue实现选区

Vue 实现选区的基本方法 在Vue中实现选区功能通常涉及DOM操作和事件处理。以下是几种常见的方法: 使用原生JavaScript的Selection API 通过window.getSelec…

vue 实现权限

vue 实现权限

Vue 实现权限控制的方法 在 Vue 项目中实现权限控制通常涉及前端路由、组件和按钮级别的权限管理。以下是几种常见的实现方式: 路由权限控制 通过路由守卫实现权限验证,过滤用户无权访问的路由:…

vue实现setinterval

vue实现setinterval

在 Vue 中使用 setInterval Vue 中可以通过生命周期钩子和方法结合 setInterval 实现定时任务。以下是一个完整的实现示例: <template> <…