webkitSpeechRecognition:HTML5语音辨认文字（直接运行）

前端想要实现语音转文字，实在不需要任何云服务，浏览器自带的api就能搞定。
下面是已经封装好的代码，
复制之后可以在控制台只接运行。
 

3. class SpeechRecognitionManager {
4.     tempTranscript = ''
5.     isRecording = false;
6.     timeoutid = 0;
7.     exitKeywors = ['stop', 'exit', 'quit', '退出', '停止识别', '说完了', '停止', '发送', '好了']
8.     constructor() {
9.         this.recognition = new webkitSpeechRecognition();
10.         this.recognition.continuous = true;
11.         this.recognition.interimResultsTimeout = 30000;
12.         this.recognition.lang = 'zh-CN';
13.         this.recognition.maxSpeechTime = 60000;
14.         this.resultListeners = [];
16.         this.recognition.onresult = (event) => {
17.             const transcript = Array.from(event.results).at(-1)[0].transcript;
18.             clearTimeout(this.timeoutid);
19.             if (this.exitKeywors.some(keyword => transcript.includes(keyword) && transcript.length <= 7)) {
20.                 this.recognition.stop();
21.                 // this.isRecording = false;
22.                 // this.notifyResultListeners({
23.                 //     transcript: this.tempTranscript,
24.                 //     type: 'end',
25.                 // });
27.                 return;
28.             }
30.             this.timeoutid = setTimeout(() => {
31.                 this.recognition.stop();
32.             }, 4000);
33.             this.tempTranscript += transcript;
34.             this.notifyResultListeners({
35.                 transcript,
36.                 type: 'tempresult',
37.             });
38.         };
39.         this.recognition.onend = () => {
40.             this.isRecording = false;
41.             this.notifyResultListeners({
42.                 type: 'end',
43.                 transcript: this.tempTranscript
44.             });
45.         };
46.         this.recognition.onerror = (event) => {
47.             this.isRecording = false;
48.             this.notifyResultListeners({
49.                 type: 'error',
50.                 transcript: this.tempTranscript,
51.                 error: event.error
52.             });
53.         };
54.         this.recognition.onstart = () => {
55.             this.isRecording = true;
56.             this.tempTranscript = '';
57.             this.notifyResultListeners({
58.                 type: 'start'
59.             });
60.         };
61.     }
64.     addResultListener(listener) {
65.         this.resultListeners.push(listener);
66.     }
68.     notifyResultListeners(data) {
69.         this.resultListeners.forEach(listener => {
70.             listener(data);
71.         });
72.     }
74.     startRecognition() {
75.         if (this.isRecording) return console.log('正在识别');
77.         console.log('开始识别');
78.         this.tempTranscript = '';
79.         this.recognition.start();
80.     }
82.     stopRecognition() {
83.         if (!this.isRecording) return console.log('未开始识别');
84.         this.isRecording = false;
85.         console.log('停止识别');
86.         this.recognition.stop();
87.     }
88. }
90. // 使用示例
91. window.speechmanager = new SpeechRecognitionManager();
93. // // 添加结果监听函数
94. // speechmanager.addResultListener(transcript => {
95. //     console.log('识别结果:', transcript);
96. // });
98. // // 开始识别
99. // speechmanager.startRecognition();
101. // // // 停止识别
102. // // // manager.stopRecognition();

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。