{"id":29146094,"url":"https://github.com/ferrinweb/voice-input-button","last_synced_at":"2025-06-30T21:10:28.662Z","repository":{"id":33953638,"uuid":"163930742","full_name":"ferrinweb/voice-input-button","owner":"ferrinweb","description":"A vue voice input button component, based on iFLYTEK speech api. 一个基于讯飞语音听写 api （旧版接口）的语音输入按钮 vue 组件。基于讯飞新版语音听写（流式版）api 的语音输入按钮 vue 组件请查看这里：https://github.com/ferrinweb/voice-input-button2","archived":false,"fork":false,"pushed_at":"2024-08-27T22:51:39.000Z","size":2845,"stargazers_count":18,"open_issues_count":4,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-23T00:12:07.217Z","etag":null,"topics":["speech-input","speech-to-text","voice-input-button","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ferrinweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-03T06:12:21.000Z","updated_at":"2024-12-30T08:55:24.000Z","dependencies_parsed_at":"2024-06-07T09:42:42.053Z","dependency_job_id":"aab055c9-ffa9-4a82-9a47-8255a0a4a5d3","html_url":"https://github.com/ferrinweb/voice-input-button","commit_stats":{"total_commits":60,"total_committers":3,"mean_commits":20.0,"dds":0.35,"last_synced_commit":"d63cda1270fe088adc35d61b68121a95277c2101"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ferrinweb/voice-input-button","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferrinweb%2Fvoice-input-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferrinweb%2Fvoice-input-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferrinweb%2Fvoice-input-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferrinweb%2Fvoice-input-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ferrinweb","download_url":"https://codeload.github.com/ferrinweb/voice-input-button/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferrinweb%2Fvoice-input-button/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262850294,"owners_count":23374357,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["speech-input","speech-to-text","voice-input-button","vue"],"created_at":"2025-06-30T21:10:27.917Z","updated_at":"2025-06-30T21:10:28.656Z","avatar_url":"https://github.com/ferrinweb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# voice-input-button\n\n\u003e A vue voice input button component, based on iFLYTEK speech api.\n\n\u003e 一个基于讯飞语音听写api的语音输入按钮vue组件。使用HTML原生媒体接口，故兼容性依浏览器而定，具体可参考这里 [Can I Use](https://caniuse.com/#search=getUserMedia)\n\n\u003e 按下按钮说话，松开按钮识别。\n\n\u003e 注意：该版本使用的语音听写接口为讯飞语音听写旧版接口，该接口于2019年6月份已停用，如果您的讯飞语音应用创建于该日期之前，可以使用该版本；否则请移步新版语音输入按钮：[voice-input-button2](https://github.com/ferrinweb/voice-input-button2)\n\n为什么不是实时语音转写而是语音听写？因为前者收费 ╮(╯▽╰)╭。\n\n## Screenshots / 截屏\n![](https://github.com/ferrinweb/voice-input-button/raw/master/screenshots/screenshots3.png)\n![](https://github.com/ferrinweb/voice-input-button/raw/master/screenshots/screenshots4.png)\n![](https://github.com/ferrinweb/voice-input-button/raw/master/screenshots/screenshots5.png)\n![](https://github.com/ferrinweb/voice-input-button/raw/master/screenshots/screenshots.png)\n![](https://github.com/ferrinweb/voice-input-button/raw/master/screenshots/screenshots2.png)\n\n## How to use / 如何使用\n\n### Create APP and get APIKey / 创建一个语音应用\n\n1. 您需要在讯飞开放平台上创建一个基于语音听写 WebApi 的语音应用：[创建应用](https://console.xfyun.cn/app/create?source=WebAPI)\n2. 为该应用开通语音听写服务\n3. 获取应用的 **appId**、**APIKey**，这是必须的。\n\n### Start A Proxy Service / 启动一个代理服务\n\n由于前端页面无法直接请求讯飞语音接口，您需要搭建一个代理服务将语音听写请求转发至讯飞服务接口。\n在该项目源码的 **proxy** 目录，我已经为您准备好了一个 node 版代理服务脚本，您可以直接使用。\n\n为什么需要代理服务？[请看这里](https://github.com/ferrinweb/voice-input-button/issues/2)\n\n### Install / 安装\n\n```javascript\nnpm install voice-input-button\n// or install from github reponsitory\nnpm install https://github.com/ferrinweb/voice-input-button.git\n\n// or use yarn / 推荐使用 yarn\nyarn add voice-input-button\n// or install from github reponsitory\nyarn add https://github.com/ferrinweb/voice-input-button.git\n```\n\n### Import / 引入\n\n```javascript\n// global import / 全局引入\nimport voiceInputButton from 'voice-input-button'\nVue.use(voiceInputButton, {\n  server: '', // 您启动的代理服务地址\n  appId: '', // 您申请的语音听写服务应用的ID\n  APIKey: '' // 您开通的语音听写服务的 APIKey\n})\n\n// import on demand in your vue component file. / 按需引入\n// 在这种引入方式下，您必须通过在组件标签上设置 server、appId、APIKey 属性来配置相关参数\nimport voiceInputButton from 'voice-input-button'\nexport default {\n  components: {\n    voiceInputButton\n  },\n  ...\n}\n```\n\n### Use and demo / 使用及示例\n\u003e You can ckeckout this repository and try this demo.\n\n\u003e 你可以直接检出 voice-input-button 源码到本地，查看示例。\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cdiv class=\"result\"\u003e{{result}}\u003c/div\u003e\n    \u003cdiv class=\"voice-input-button-wrapper\"\u003e\n      \u003cvoice-input-button\n          server=\"您的代理地址\"\n          appId=\"您的应用ID\"\n          APIKey=\"您开通的语音听写服务APIKey\"\n          v-model=\"result\"\n          @record=\"showResult\"\n          @record-start=\"recordStart\"\n          @record-stop=\"recordStop\"\n          @record-blank=\"recordNoResult\"\n          @record-failed=\"recordFailed\"\n          @record-ready=\"recordReady\"\n          interactiveMode=\"touch\"\n          color=\"#fff\"\n          tipPosition=\"top\"\n      \u003e\n        \u003ctemplate slot=\"no-speak\"\u003e没听清您说的什么\u003c/template\u003e\n      \u003c/voice-input-button\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VoiceInputButton from './lib/voice-input-button'\n\nexport default {\n  name: 'App',\n  components: {\n    VoiceInputButton\n  },\n  data () {\n    return {\n      result: ''\n    }\n  },\n  methods: {\n    showResult (text) {\n      console.info('收到识别结果：', text)\n    },\n    recordStart () {\n      console.info('录音开始')\n    },\n    recordStop () {\n      console.info('录音结束')\n    },\n    recordNoResult () {\n      console.info('没有录到什么，请重试')\n    },\n    recordFailed (error) {\n      console.info('识别失败，错误栈：', error)\n    },\n    recordReady () {\n      console.info('按钮就绪!')\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  html, body {\n    margin: 0;\n    width: 100%;\n    height: 100%;\n  }\n  *{\n    box-sizing: border-box;\n  }\n  #app {\n    position: absolute;\n    top: 100px;\n    left: 0;\n    right: 0;\n    margin: 0 auto;\n    width: 400px;\n  }\n  .voice-input-button-wrapper{\n    width: 42px;\n    height: 42px;\n    background-color: mediumpurple;\n    border-radius: 50%;\n  }\n  .result{\n    width: 100%;\n    padding: 25px;\n    border: #e2e2e2 1px solid;\n    border-radius: 5px;\n    line-height: 2;\n    font-size: 16px;\n    color: #727272;\n    min-height: 24px;\n    margin-bottom: 25px;\n  }\n\u003c/style\u003e\n```\n\n### Slots / 插槽\n名称 | 说明 | 默认值\n|---|---|---|\nrecording | 正在录音提示文字，按下按钮时，将显示该录音中提示文本 | 无\nno-speak | 录音完成但未能识别到有效结果是的提示文本 | 无\n\n### Attributes / 属性\n名称 | 说明 | 默认值\n|---|---|---|\ncolor | 麦克风按钮及录音中、识别中图标的颜色 | #333\ntipPosition | 正在录音及未识别提示出现的位置，支持 top/right/left/bottom 四个取值 | top\ninteractiveMode | 交互模式: press -\u003e 按下开始录音，放开结束录音; touch -\u003e 点击开始录音，再次点击结束录音 | press\n\n### Events / 事件\n名称 | 说明\n|---|---|\nrecord | 录音识别完成，事件携带识别结果\ninput | 录音识别完成，事件携带识别结果，用于 v-model 绑定变量\nrecord-start | 按下按钮开始录音\nrecord-stop | 录音结束，开始上传语音数据进行识别\nrecord-blank | 录音识别完成，但无识别结果\nrecord-failed | 录音识别失败，事件携带错误栈数据\nrecord-ready | 录音按钮已就绪\n\n## Lisence\nMIT Lisence.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fferrinweb%2Fvoice-input-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fferrinweb%2Fvoice-input-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fferrinweb%2Fvoice-input-button/lists"}