{"id":29146089,"url":"https://github.com/ferrinweb/voice-input-button2","last_synced_at":"2025-06-30T21:10:28.156Z","repository":{"id":36471152,"uuid":"226068156","full_name":"ferrinweb/voice-input-button2","owner":"ferrinweb","description":"New version of voice input button using new interface of iflytek voice dictation (the stream version). 基于讯飞新版语音听写(流式版) api 的语音输入按钮 vue 组件。","archived":false,"fork":false,"pushed_at":"2025-06-05T07:09:22.000Z","size":4260,"stargazers_count":106,"open_issues_count":17,"forks_count":16,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-13T10:05:15.215Z","etag":null,"topics":["iflytek","iflytek-voice-dictation","speech-input","speech-to-text","voice","voice-input","voice-input-button","voicetext","vue","xunfei"],"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,"zenodo":null}},"created_at":"2019-12-05T09:46:26.000Z","updated_at":"2025-05-30T02:18:00.000Z","dependencies_parsed_at":"2024-06-07T09:43:14.886Z","dependency_job_id":"b1acdd5f-c8eb-413e-835b-d30fc8d13a03","html_url":"https://github.com/ferrinweb/voice-input-button2","commit_stats":{"total_commits":71,"total_committers":3,"mean_commits":"23.666666666666668","dds":0.3380281690140845,"last_synced_commit":"dd7f2e376853570d5bea3a6c5375e69c285fd591"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/ferrinweb/voice-input-button2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferrinweb%2Fvoice-input-button2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferrinweb%2Fvoice-input-button2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferrinweb%2Fvoice-input-button2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferrinweb%2Fvoice-input-button2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ferrinweb","download_url":"https://codeload.github.com/ferrinweb/voice-input-button2/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferrinweb%2Fvoice-input-button2/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261641026,"owners_count":23188435,"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":["iflytek","iflytek-voice-dictation","speech-input","speech-to-text","voice","voice-input","voice-input-button","voicetext","vue","xunfei"],"created_at":"2025-06-30T21:10:27.265Z","updated_at":"2025-06-30T21:10:28.052Z","avatar_url":"https://github.com/ferrinweb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# voice-input-button2\n\n\u003e New version of voice input button using new interface of iflytek voice dictation (the stream version).\n\n\u003e 基于讯飞新版语音听写(流式版) api 的语音输入按钮 vue 组件。使用 HTML 原生媒体接口，故兼容性依浏览器而定，具体可参考这里 [Can I Use](https://caniuse.com/#search=getUserMedia)\n\n\u003e 按下按钮说话，松开按钮识别。同时支持配置为点击说话，再次点击结束说话。\n\n\u003e 旧版接口请查看 [voice-input-button](https://github.com/ferrinweb/voice-input-button)\n\n## Screenshots / 截屏\n\n![](https://github.com/ferrinweb/voice-input-button2/raw/master/screenshots/voice-input-screen-capture.gif)\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\u003e 使用中遇到问题，欢迎前往 [Issues](https://github.com/ferrinweb/voice-input-button2/issues) 提交问题单或反馈。\n\n### Create APP and get apiKey / 创建一个语音应用\n\n1. 您需要在讯飞开放平台上创建一个基于语音听写 WebApi 的语音应用：[创建应用](https://console.xfyun.cn/app/create?source=WebAPI)\n2. 为该应用开通语音听写服务\n3. 获取应用的 `appId`、`apiKey`、`APISecret`，这是必须的。\n\n### Install / 安装\n\n```bash\nnpm install voice-input-button2\n# or install from github reponsitory\nnpm install https://github.com/ferrinweb/voice-input-button2.git\n\n# or use yarn / 推荐使用 yarn\nyarn add voice-input-button2\n# or install from github reponsitory\nyarn add https://github.com/ferrinweb/voice-input-button2.git\n```\n\n### Import / 引入\n\n#### Global Import / 全局引入\n\n```javascript\nimport voiceInputButton from 'voice-input-button2'\nVue.use(voiceInputButton, {\n  appId: '', // 您申请的语音听写服务应用的ID\n  apiKey: '', // 您开通的语音听写服务的 apiKey\n  apiSecret: '', // 您开通的语音听写服务的 apiSecret\n  color: '#fff', // 按钮图标的颜色\n  tipPosition: 'top' // 提示条位置\n  ... // 其他配置项, 参见下方 [Attributes / 属性] 部分\n})\n```\n#### Import On Demand In Your Vue Component File / 按需引入\n\n\u003e 在这种引入方式下，您必须通过在组件标签上设置 appId、apiKey、apiSecret 等属性来配置相关参数\n\n```javascript\nimport voiceInputButton from 'voice-input-button2'\nexport default {\n  components: {\n    voiceInputButton\n  },\n  ...\n}\n```\n\n### Use and demo / 使用及示例\n\n\u003e Here is an example of introducing code on demand. You can checkout this repository, run and try this demo.\n\n\u003e 此处演示按需引入方案，你可以直接检出 voice-input-button2 源码到本地，运行并查看示例。\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        appId=\"您的应用ID\"\n        apiKey=\"您开通的语音听写服务 APIKey\"\n        apiSecret=\"您开通的语音听写服务的 apiSecret\"\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        @record-complete=\"recordComplete\"\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    recordReady () {\n      console.info('按钮就绪!')\n    },\n    recordStart () {\n      console.info('录音开始')\n    },\n    showResult (text) {\n      console.info('收到识别结果：', text)\n    },\n    recordStop () {\n      console.info('录音结束')\n    },\n    recordNoResult () {\n      console.info('没有录到什么，请重试')\n    },\n    recordComplete (text) {\n      console.info('识别完成! 最终结果：', text)\n    },\n    recordFailed (error) {\n      console.info('识别失败，错误栈：', error)\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#### 项目源码启动方式\n\n```bash\n# 安装依赖\nyarn install\n# 启动项目\nyarn run dev\n```\n\n### Slots / 插槽\n\n名称 | 说明 | 默认值\n|---|---|---|\nrecording | 正在录音提示文字，按下按钮时，将显示该录音中提示文本 | 好，请讲...\nno-speak | 录音完成但未能识别到有效结果是的提示文本 | 您好像没说什么\nwait | 按下录音按钮后，按钮准备好前的提示文本 | 请稍后...\n\n### Attributes / 属性\n\n名称 | 类型 | 说明 | 默认值\n|---|---|---|---|\ncolor | String | 麦克风按钮及录音中、识别中图标的颜色 | #333\ntipPosition | String | 提示条出现的位置，支持 top/right/left/bottom 四个取值 | top\ntipTextColor | String | 提示条文本颜色 | #f2f2f2\ntipBackgroundColor | String | 提示条背景色 | #4b667d\ntipShadowColor | String | 提示条阴影色 | rgba(0,0,0,.1)\ninteractiveMode | String | 交互模式: \u003cbr\u003epress -\u003e 按下开始录音，放开结束录音; \u003cbr\u003etouch -\u003e 点击开始录音，再次点击结束录音 | press\nreturnMode | String | 识别结果返回模式: \u003cbr\u003eincrement -\u003e 增量模式，增量返回识别结果。每次返回都是一个阶段性的完整结果，包含对前面识别结果的追加、补充和修正; \u003cbr\u003ecomplete -\u003e 完整模式，完成本次识别后返回最终结果 | increment\nappId | String | 您申请的语音听写服务应用的 ID | 无\napiKey | String | 您开通的语音听写服务的 apiKey | 无\napiSecret | String | 您开通的语音听写服务的 apiSecret | 无\nlanguage | String | 语种，参见讯飞语音听写[接口文档](https://www.xfyun.cn/doc/asr/voicedictation/API.html#业务参数) | zh_cn\naccent | String | 方言，参见讯飞语音听写[接口文档](https://www.xfyun.cn/doc/asr/voicedictation/API.html#业务参数) | mandarin\npd | String | 领域个性化参数，参见讯飞语音听写[接口文档](https://www.xfyun.cn/doc/asr/voicedictation/API.html#业务参数) | 无\nrlang | String | 简体: zh_cn\u003cbr\u003e繁体: zh-hk | zh_cn\nptt | Number | 是否开启标点符号添加（仅中文支持）：\u003cbr\u003e1 -\u003e 开启; 0 -\u003e 关闭 | 1\nnunum | Number | 将返回结果的数字格式规则为阿拉伯数字格式:\u003cbr\u003e1 -\u003e 开启; 0 -\u003e 关闭 | 1\nvad_eos | Number | 用于设置端点检测的静默时间，即静默多长时间后引擎认为音频结束，单位是毫秒 | 3000\n\n\n### Events / 事件\n名称 | 说明 | 参数\n|---|---| ---|\nrecord-ready | 录音按钮已就绪 | 无\nrecord-start | 按下按钮开始录音 | 无\nrecord | 收到识别结果。\u003cbr\u003e在 `returnMode` 的 `complete` 模式下，表示收到最终结果 | 当前识别结果\ninput | 收到识别结果，与 `record` 事件同步抛出，用于 `v-model` 绑定变量 | 当前识别结果\nrecord-stop | 录音结束。\u003cbr\u003e一般当松开按钮（`press` 模式）或关闭录音（`touch` 模式）时触发；\u003cbr\u003e也可能由组件根据静默时长配置（`vad_eos`）触发 | 无\nrecord-blank | 录音识别完成，但无识别结果 | 无\nrecord-complete | 语音识别完成事件。\u003cbr\u003e相较于 `record-stop`，该事件表示语音识别已完成并返回了最终结果 | 最终识别结果\nrecord-failed | 录音识别失败 | 错误栈数据\n\n\u003e 注意：新版接口为流式版本，即识别过程中会有多次返回，其中包含对前面识别结果的追加、补充和修正。因此在同一识别过程中会多次触发 `record` 和 `input` 事件，在您将收到的识别结果拼接到其他字符串时，您需要注意到这点。如果仅需要返回最后的结果，则可以监听 `record-complete` 事件或将 `returnMode` 属性设置为 `complete`。\n\n## Lisence\nMIT Lisence.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fferrinweb%2Fvoice-input-button2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fferrinweb%2Fvoice-input-button2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fferrinweb%2Fvoice-input-button2/lists"}