Skip to content

Commit 0e510f5

Browse files
ferrinwebferrinweb
committed
add files
0 parents  commit 0e510f5

29 files changed

+8852
-0
lines changed

‎.babelrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": [
3+
["env", { "modules": false }],
4+
"stage-3"
5+
]
6+
}

‎.gitignore

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.DS_Store
2+
node_modules/
3+
npm-debug.log
4+
yarn-error.log
5+
6+
# Editor directories and files
7+
.idea
8+
*.suo
9+
*.ntvs*
10+
*.njsproj
11+
*.sln

‎README.md

+182
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
# voice-input-button
2+
3+
> A vue voice input button component, based on iFLYTEK speech api.
4+
5+
> 一个基于讯飞语音听写api的语音输入按钮vue组件。使用HTML原生媒体接口，故兼容性依浏览器而定，具体可参考这里 [Can I Use](https://caniuse.com/#search=getUserMedia)
6+
7+
## Screenshots / 截屏
8+
![](https://github.com/ferrinweb/voice-input-button/raw/master/screenshots/screenshots3.png)
9+
![](https://github.com/ferrinweb/voice-input-button/raw/master/screenshots/screenshots4.png)
10+
![](https://github.com/ferrinweb/voice-input-button/raw/master/screenshots/screenshots5.png)
11+
![](https://github.com/ferrinweb/voice-input-button/raw/master/screenshots/screenshots.png)
12+
![](https://github.com/ferrinweb/voice-input-button/raw/master/screenshots/screenshots2.png)
13+
14+
## How to use / 如何使用
15+
16+
### Create APP and get APIKey / 创建一个语音应用
17+
18+
1. 您需要在讯飞开放平台上创建一个基于语音听写 WebApi 的语音应用：[创建应用](https://console.xfyun.cn/app/create?source=WebAPI)
19+
2. 为该应用开通语音听写服务
20+
3. 获取应用的 **appId**、**APIKey**，这是必须的。
21+
22+
### Start A Proxy Service / 启动一个代理服务
23+
24+
由于前端页面无法直接请求讯飞语音接口，您需要搭建一个代理服务将语音听写请求转发至讯飞服务接口。
25+
在该项目源码的 **proxy** 目录，我已经为您准备好了一个 node 版代理服务脚本，您可以直接使用。
26+
27+
### Install / 安装
28+
29+
```javascript
30+
npm install voice-input-button
31+
// or install from github reponsitory
32+
npm install https://github.com/ferrinweb/voice-input-button.git
33+
34+
// or use yarn / 推荐使用 yarn
35+
yarn add voice-input-button
36+
// or install from github reponsitory
37+
yarn add https://github.com/ferrinweb/voice-input-button.git
38+
```
39+
40+
### Import / 引入
41+
42+
```javascript
43+
// global import / 全局引入
44+
import voiceInputButton from 'voice-input-button'
45+
Vue.use(voiceInputButton, {
46+
server: '', // 您的启动的代理服务地址
47+
appId: '', // 您申请的语音听写服务应用的ID
48+
APIKey: '' // 您开通的语音听写服务的 APIKey
49+
})
50+
51+
// import on demand in your vue component file. / 按需引入
52+
// 在这种引入方式下，您必须通过在组件标签上设置 server、appId、APIKey 属性来配置相关参数
53+
import voiceInputButton from 'voice-input-button'
54+
export default {
55+
components: {
56+
voiceInputButton
57+
},
58+
...
59+
}
60+
```
61+
62+
### Use and demo / 使用及示例
63+
> You can ckeckout this repository and try this demo.
64+
65+
> 你可以直接检出 voice-input-button 源码到本地，查看示例。
66+
67+
```javascript
68+
<template>
69+
<div id="app">
70+
<div class="result">{{result}}</div>
71+
<div class="voice-input-button-wrapper">
72+
<voice-input-button
73+
server="您的代理地址"
74+
appId="您的应用ID"
75+
APIKey="您开通的语音听写服务APIKey"
76+
@record="showResult"
77+
@record-start="recordStart"
78+
@record-stop="recordStop"
79+
@record-blank="recordNoResult"
80+
@record-failed="recordFailed"
81+
color="#fff"
82+
tipPosition="top"
83+
>
84+
<template slot="no-speak">没听清您说的什么</template>
85+
</voice-input-button>
86+
</div>
87+
</div>
88+
</template>
89+
90+
<script>
91+
import VoiceInputButton from './lib/voice-input-button'
92+
93+
export default {
94+
name: 'App',
95+
components: {
96+
VoiceInputButton
97+
},
98+
data () {
99+
return {
100+
result: ''
101+
}
102+
},
103+
methods: {
104+
showResult (text) {
105+
this.result = text
106+
},
107+
recordStart () {
108+
console.info('录音开始')
109+
},
110+
recordStop () {
111+
console.info('录音结束')
112+
},
113+
recordNoResult () {
114+
console.info('没有录到什么，请重试')
115+
},
116+
recordFailed (error) {
117+
console.info('识别失败，错误栈：', error)
118+
}
119+
}
120+
}
121+
</script>
122+
123+
<style>
124+
html, body {
125+
margin: 0;
126+
width: 100%;
127+
height: 100%;
128+
}
129+
*{
130+
box-sizing: border-box;
131+
}
132+
#app {
133+
position: absolute;
134+
top: 100px;
135+
left: 0;
136+
right: 0;
137+
margin: 0 auto;
138+
width: 400px;
139+
}
140+
.voice-input-button-wrapper{
141+
width: 42px;
142+
height: 42px;
143+
background-color: mediumpurple;
144+
border-radius: 50%;
145+
}
146+
.result{
147+
width: 100%;
148+
padding: 25px;
149+
border: #e2e2e2 1px solid;
150+
border-radius: 5px;
151+
line-height: 2;
152+
font-size: 16px;
153+
color: #727272;
154+
min-height: 24px;
155+
margin-bottom: 25px;
156+
}
157+
</style>
158+
```
159+
160+
### Slots / 插槽
161+
名称 | 说明 | 默认值
162+
|---|---|---|
163+
recording | 正在录音提示文字，按下按钮时，将显示该录音中提示文本 | 无
164+
no-speak | 录音完成但未能识别到有效结果是的提示文本 | 无
165+
166+
### Attributes / 属性
167+
名称 | 说明 | 默认值
168+
|---|---|---|
169+
color | 麦克风按钮及录音中、识别中图标的颜色 | #333
170+
tipPosition | 正在录音及未识别提示出现的位置，支持 top/right/left/bottom 四个取值 | top
171+
172+
### Events / 事件
173+
名称 | 说明
174+
|---|---|
175+
record | 录音识别完成，事件携带识别结果
176+
record-start | 按下按钮开始录音
177+
record-stop | 录音结束，开始上传语音数据进行识别
178+
record-blank | 录音识别完成，但无识别结果
179+
record-failed | 录音识别失败，事件携带错误栈数据
180+
181+
## Lisence
182+
MIT Lisence.

‎index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
6+
<title>Voice Input Button Demo</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script src="/dist/voice-input-button.js"></script>
11+
</body>
12+
</html>

‎package.json

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"name": "voice-input-button",
3+
"description": "A vue voice input button component, based on iFLYTEK speech api.",
4+
"version": "1.0.0",
5+
"author": "ferrinweb <[email protected]>",
6+
"main": "dist/voice-input-button.js",
7+
"license": "MIT",
8+
"private": false,
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/ferrinweb/voice-input-button.git"
12+
},
13+
"keywords": [
14+
"voice input",
15+
"microphone input",
16+
"speech input",
17+
"iflytek"
18+
],
19+
"homepage": "https://github.com/ferrinweb/voice-input-button/blob/master/README.md",
20+
"scripts": {
21+
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
22+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
23+
},
24+
"dependencies": {
25+
"axios": "^0.18.0",
26+
"blueimp-md5": "^2.10.0",
27+
"js-base64": "^2.5.0",
28+
"vue": "^2.5.11",
29+
"vuese": "^1.0.4"
30+
},
31+
"browserslist": [
32+
"> 1%",
33+
"last 2 versions",
34+
"not ie <= 8"
35+
],
36+
"devDependencies": {
37+
"babel-core": "^6.26.0",
38+
"babel-loader": "^7.1.2",
39+
"babel-preset-env": "^1.6.0",
40+
"babel-preset-stage-3": "^6.24.1",
41+
"cross-env": "^5.0.5",
42+
"css-loader": "^0.28.7",
43+
"file-loader": "^1.1.4",
44+
"jest": "^23.6.0",
45+
"node-sass": "^4.11.0",
46+
"sass-loader": "^7.1.0",
47+
"vue-loader": "^13.0.5",
48+
"vue-template-compiler": "^2.4.4",
49+
"webpack": "^3.6.0",
50+
"webpack-dev-server": "^2.9.1"
51+
}
52+
}

‎proxy/index.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/**
2+
* A proxy server based on Node.js
3+
* edit by ferrinweb
4+
*
5+
* execute the 'node proxy' command to start the service.
6+
* default port: 3000
7+
*/
8+
let proxy = require('http-proxy-middleware')
9+
let express = require('express')
10+
let app = express()
11+
12+
let port = 3000
13+
14+
// Cross-domain settings
15+
app.all('*', function (req, res, next) {
16+
if (!req.get('Origin')) return next()
17+
// use "*" here to accept any origin
18+
res.set('Access-Control-Allow-Origin', '*')
19+
// request methods allowed (get/post/patch...)
20+
res.set('Access-Control-Allow-Methods', '*')
21+
// field name allowed in request headers
22+
res.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, token, X-Appid, X-CurTime, X-CheckSum, X-Param')
23+
if (req.method === 'OPTIONS') return res.sendStatus(200)
24+
next()
25+
})
26+
27+
app.use('/asr', proxy({
28+
// Forward the request to the iFLYTEK speech interface
29+
target: 'http://api.xfyun.cn/v1/service/v1/iat',
30+
changeOrigin: true,
31+
pathRewrite: {
32+
'^/asr': ''
33+
}
34+
}))
35+
36+
app.listen(port, function () {
37+
console.log(`Proxy is selling tickets, please buy a ticket at the ${port} port, and immediately cross the river!`)
38+
})

‎screenshots/screenshots.png

2.62 KB
Loading

‎screenshots/screenshots2.png

3.42 KB
Loading

‎screenshots/screenshots3.png

5.43 KB
Loading

‎screenshots/screenshots4.png

4.69 KB
Loading

‎screenshots/screenshots5.png

2.22 KB
Loading

0 commit comments

Comments
 (0)