Skip to content

Commit 1eddf70

Browse files
author
weilei
committed
feat(docs): 添加 Record 语音识别混入文档及示例，更新 enhanceApp.js
1 parent def23e5 commit 1eddf70

File tree

4 files changed

+283
-0
lines changed

4 files changed

+283
-0
lines changed

‎docs/src/.vuepress/enhanceApp.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export default ({ Vue, router, isServer }) => {
88
Vue.use(ElementUIX);
99
Vue.component('BackToTop', BackToTop);
1010
Vue.prototype.$message = Message;
11+
console.log(ElementUIX);
12+
1113
// 添加全局的路由切换后回到顶部的功能
1214
router.options.scrollBehavior = (to, from, savedPosition) => {
1315
if (savedPosition) {

‎docs/src/components/record.md‎

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
# Record 语音识别混入
2+
3+
## 功能说明
4+
5+
语音识别混入，提供语音输入功能，支持以下特性：
6+
7+
- 支持浏览器原生语音识别
8+
- 提供完整的生命周期事件
9+
- 支持中文语音识别
10+
- 自动处理识别状态
11+
- 错误处理机制
12+
- 支持自定义回调函数
13+
14+
## 使用示例
15+
16+
### 基础用法
17+
18+
基本的语音识别功能使用示例。
19+
20+
:::demo
21+
22+
```html
23+
<script>
24+
export default {
25+
name: 'BasicRecordDemo',
26+
// mixins: [window?.['vue-element-ui-x']?.mixins?.recordMixin],
27+
mounted() {
28+
this.initRecord({
29+
onStart: () => {
30+
console.log('开始录音');
31+
},
32+
onEnd: value => {
33+
console.log('录音结束', value);
34+
},
35+
onError: error => {
36+
this.$message.error('录音失败：' + error.message);
37+
},
38+
onResult: result => {
39+
console.log('实时识别结果：', result);
40+
},
41+
});
42+
},
43+
};
44+
</script>
45+
46+
<template>
47+
<div>
48+
<el-button
49+
type="primary"
50+
:loading="recordLoading"
51+
@mousedown="startRecord"
52+
@mouseup="stopRecord"
53+
>
54+
{{ recordLoading ? '正在录音...' : '按住说话' }}
55+
</el-button>
56+
57+
<div
58+
class="result"
59+
v-if="recordValue"
60+
>
61+
识别结果: {{ recordValue }}
62+
</div>
63+
</div>
64+
</template>
65+
66+
<style>
67+
.result {
68+
margin-top: 20px;
69+
padding: 10px;
70+
border: 1px solid #ebeef5;
71+
border-radius: 4px;
72+
}
73+
</style>
74+
```
75+
76+
:::
77+
78+
### 自定义控制
79+
80+
展示如何自定义控制语音识别的开始和结束。
81+
82+
:::demo
83+
84+
```html
85+
<script>
86+
export default {
87+
name: 'CustomControlDemo',
88+
// mixins: [window?.['vue-element-ui-x']?.mixins?.recordMixin],
89+
mounted() {
90+
console.log(window);
91+
this.initRecord({
92+
onStart: () => {
93+
this.$message({
94+
type: 'success',
95+
message: '开始录音',
96+
});
97+
},
98+
onEnd: value => {
99+
this.$message({
100+
type: 'info',
101+
message: '录音结束',
102+
});
103+
},
104+
onError: error => {
105+
this.$message.error(error.message);
106+
},
107+
});
108+
},
109+
};
110+
</script>
111+
112+
<template>
113+
<div>
114+
<el-row :gutter="20">
115+
<el-col :span="12">
116+
<el-button
117+
type="success"
118+
:disabled="recordLoading"
119+
@click="startRecord"
120+
>
121+
开始录音
122+
</el-button>
123+
</el-col>
124+
<el-col :span="12">
125+
<el-button
126+
type="danger"
127+
:disabled="!recordLoading"
128+
@click="stopRecord"
129+
>
130+
停止录音
131+
</el-button>
132+
</el-col>
133+
</el-row>
134+
135+
<el-card
136+
class="record-status"
137+
style="margin-top: 20px;"
138+
>
139+
<div slot="header">
140+
<span>识别状态</span>
141+
</div>
142+
<div
143+
v-if="recordLoading"
144+
class="recording"
145+
>
146+
<i
147+
class="el-icon-microphone"
148+
style="color: #F56C6C;"
149+
></i>
150+
正在录音...
151+
</div>
152+
<div
153+
v-if="recordValue"
154+
class="record-result"
155+
>
156+
<div class="label">识别结果：</div>
157+
<div class="content">{{ recordValue }}</div>
158+
</div>
159+
</el-card>
160+
</div>
161+
</template>
162+
163+
<style>
164+
.recording {
165+
color: #f56c6c;
166+
display: flex;
167+
align-items: center;
168+
gap: 8px;
169+
}
170+
.record-result {
171+
margin-top: 15px;
172+
}
173+
.record-result .label {
174+
font-weight: bold;
175+
margin-bottom: 5px;
176+
}
177+
.record-result .content {
178+
padding: 10px;
179+
background-color: #f8f8f8;
180+
border-radius: 4px;
181+
}
182+
</style>
183+
```
184+
185+
:::
186+
187+
### 错误处理
188+
189+
展示如何处理语音识别过程中的错误。
190+
191+
:::demo
192+
193+
```html
194+
<script>
195+
export default {
196+
name: 'ErrorHandlingDemo',
197+
// mixins: [window?.['vue-element-ui-x']?.mixins?.recordMixin],
198+
data() {
199+
return {
200+
error: null,
201+
};
202+
},
203+
methods: {
204+
handleRecord() {
205+
if (this.recordLoading) {
206+
this.stopRecord();
207+
} else {
208+
this.error = null;
209+
this.startRecord();
210+
}
211+
},
212+
},
213+
mounted() {
214+
this.initRecord({
215+
onError: error => {
216+
this.error = error;
217+
this.recordLoading = false;
218+
},
219+
});
220+
},
221+
};
222+
</script>
223+
224+
<template>
225+
<div>
226+
<el-alert
227+
v-if="error"
228+
:title="error.message"
229+
type="error"
230+
show-icon
231+
:closable="false"
232+
style="margin-bottom: 20px;"
233+
/>
234+
235+
<el-button
236+
type="primary"
237+
:loading="recordLoading"
238+
@click="handleRecord"
239+
>
240+
{{ recordLoading ? '停止录音' : '开始录音' }}
241+
</el-button>
242+
</div>
243+
</template>
244+
```
245+
246+
:::
247+
248+
## 混入属性
249+
250+
| 参数 | 说明 | 类型 | 默认值 |
251+
| ----------------- | ------------ | ------- | ------------------------------------------------------------- |
252+
| recordLoading | 语音识别状态 | Boolean | false |
253+
| recordValue | 识别结果文本 | String | '' |
254+
| recordRecognition | 识别实例 | Object | null |
255+
| recordOptions | 配置选项对象 | Object | { onError: null, onStart: null, onEnd: null, onResult: null } |
256+
257+
## 混入方法
258+
259+
| 方法名 | 说明 | 参数 | 返回值 |
260+
| ------------- | ------------------ | ---------------------------------------------- | ------ |
261+
| initRecord | 初始化语音识别配置 | options: { onError, onStart, onEnd, onResult } | - |
262+
| startRecord | 开始语音识别 | - | - |
263+
| stopRecord | 停止语音识别 | - | - |
264+
| cleanupRecord | 清理语音识别资源 | - | - |
265+
266+
## 配置选项
267+
268+
| 参数 | 说明 | 类型 | 默认值 |
269+
| -------- | ------------ | ----------------- | ------ |
270+
| onError | 错误回调函数 | Function(error) | null |
271+
| onStart | 开始回调函数 | Function | null |
272+
| onEnd | 结束回调函数 | Function(value) | null |
273+
| onResult | 结果回调函数 | Function(results) | null |
274+
275+
## 注意事项
276+
277+
1. 该混入依赖浏览器的 `webkitSpeechRecognition` API，使用前请确保浏览器支持。
278+
2. 目前仅支持中文语音识别（lang='zh-CN'）。
279+
3. 在组件销毁时会自动清理相关资源。
280+
4. 建议在开发时做好浏览器兼容性检查。
281+
5. 需要在 HTTPS 环境下使用，或者 localhost 本地开发环境。

‎docs/src/components/send.md‎

Whitespace-only changes.

‎docs/src/components/stream.md‎

Whitespace-only changes.

0 commit comments

Comments
 (0)