有哪些前端插件可以实现语音控制页面功能包括但不限于页面跳转？

溯

发布于
1 月 6 日四川

更新于
1 月 6 日

新手上路，请多包涵

前端有那种语音可以控制页面的插件吗？就比如在vue框架内，语音识别出来了“前往xx模块”，在识别了语音后自动跳转过去，或者新增表单，打开弹出新增表单等，在不改变原来的代码的情况下实现？

前端插件页面跳转

阅读 418

AI BotBETA

回答

在前端实现语音控制页面功能，包括页面跳转、新增表单、打开弹出框等，可以使用以下插件或库：

Vuetify with Vue-Speech-Recognition

Vue-Speech-Recognition 是一个基于 Web Speech API 的 Vue 插件，可以很方便地在 Vue 应用中实现语音识别功能。
你可以通过监听语音识别的结果，然后根据结果执行相应的页面跳转或操作。
安装方法：
```
npm install vue-speech-recognition
```

使用示例：

<template>
  <div>
    <v-btn @click="startListening">开始语音识别</v-btn>
  </div>
</template>

<script>
import VueSpeechRecognition from 'vue-speech-recognition';

export default {
  components: {
    VueSpeechRecognition
  },
  data() {
    return {
      commands: {
        '前往xx模块': this.navigateToModule
      }
    };
  },
  methods: {
    startListening() {
      this.$speechRecognition.startListening({
        onresult: result => {
          const transcript = result.transcript;
          if (this.commands[transcript]) {
            this.commands[transcript]();
          }
        }
      });
    },
    navigateToModule() {
      // 实现页面跳转逻辑
      this.$router.push('/xx-module');
    }
  }
};
</script>

Annyang

Annyang 是一个轻量级的语音识别库，可以与任何前端框架（包括 Vue）一起使用。
你可以定义语音命令，并在识别到这些命令时执行相应的操作。

使用示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
<script>
  if (annyang) {
    const commands = {
      '前往xx模块': function() {
        // 实现页面跳转逻辑
        window.location.href = '/xx-module';
      },
      '新增表单': function() {
        // 实现新增表单逻辑
        // 例如：打开模态框或发送请求等
      }
    };

    // 添加命令
    annyang.addCommands(commands);

    // 开始监听
    annyang.start();
  }
</script>

Web Speech API
- 直接使用浏览器提供的 Web Speech API，可以在不依赖第三方库的情况下实现语音识别功能。
- 但需要注意的是，Web Speech API 的可用性和准确性可能因浏览器和地区而异。

这些插件和库可以帮助你在不改变原有代码结构的情况下，通过语音控制前端页面的功能。选择适合你项目需求的插件，并根据其文档进行配置和使用。

2 个回答

得票最新

ihengshuai

7016

发布于
1 月 7 日亚太地区

语音识别很简单，但是要通过语音来控制页面就没那么简单了。这就类似于gpt一样的效果，语音录入五花八门，要有一定的模型训练或者向量库匹配到对应的内容，才能做下一步的操作

643104191

2.4k21137

发布于
今天 09:14 广东

直接语音识别做关键字匹配就行了,还不至于用到ai的程度,
这是MDN的文档,

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_A...

这是让ai写的示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音识别示例</title>
</head>
<body>
    <h1>语音识别：说出“广告管理”、“商品管理”或“库存管理”</h1>
    <button id="startButton">开始语音识别</button>
    <p id="result">识别结果将在这里显示</p>

    <script>
        // 检查浏览器是否支持 SpeechRecognition API
        if (!('webkitSpeechRecognition' in window)) {
            alert('抱歉，您的浏览器不支持语音识别。');
        } else {
            const recognition = new webkitSpeechRecognition(); // 创建语音识别实例
            recognition.lang = 'zh-CN'; // 设置识别语言为中文
            recognition.continuous = false; // 识别后停止，不继续监听
            recognition.interimResults = false; // 是否返回中间结果

            // 开始语音识别时触发的事件
            recognition.onstart = function () {
                console.log('语音识别已启动');
                document.getElementById('result').textContent = '请说话...';
            };

            // 识别结果返回时触发的事件
            recognition.onresult = function (event) {
                const result = event.results[0][0].transcript; // 获取识别结果
                document.getElementById('result').textContent = '识别结果：' + result;
                handleCommand(result); // 根据识别结果执行操作
            };

            // 语音识别出错时触发的事件
            recognition.onerror = function (event) {
                console.error('语音识别出错：', event.error);
                document.getElementById('result').textContent = '语音识别出错，请重试。';
            };

            // 语音识别结束时触发的事件
            recognition.onend = function () {
                console.log('语音识别已结束');
            };

            // 启动语音识别
            document.getElementById('startButton').addEventListener('click', function () {
                recognition.start();
            });

            // 根据识别到的命令执行不同的操作
            function handleCommand(command) {
                if (command.includes('广告管理')) {
                    alert('执行广告管理操作');
                } else if (command.includes('商品管理')) {
                    alert('执行商品管理操作');
                } else if (command.includes('库存管理')) {
                    alert('执行库存管理操作');
                } else {
                    alert('没有识别到预期的命令');
                }
            }
        }
    </script>
</body>
</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

有哪些前端插件可以实现语音控制页面功能包括但不限于页面跳转？

回答

你尚未登录，登录后可以

vue项目如何在初始化之前跳转外部页面？

问一个推送的问题，比如如果我想扩展一个推送通知的显示内容，该如何实现？

SWT 框架的页面跳转问题?

如何在 Vue 项目中正确引入并使用 jspdf-autotable 插件？

Flutter 登录跳转后 Provider 值为何为空？