webkitSpeechRecognition:HTML5语音识别文字（直接运行）

最新推荐文章于 2025-07-21 12:22:49 发布

原创

最新推荐文章于 2025-07-21 12:22:49 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js #语音识别 #人工智能

前端想要实现语音转文字，其实不需要任何云服务，浏览器自带的api就能搞定。

下面是已经封装好的代码，

复制之后可以在控制台只接运行。



class SpeechRecognitionManager {
    tempTranscript = ''
    isRecording = false;
    timeoutid = 0;
    exitKeywors = ['stop', 'exit', 'quit', '退出', '停止识别', '说完了', '停止', '发送', '好了']
    constructor() {
        this.recognition = new webkitSpeechRecognition();
        this.recognition.continuous = true;
        this.recognition.interimResultsTimeout = 30000;
        this.recognition.lang = 'zh-CN';
        this.recognition.maxSpeechTime = 60000;
        this.resultListeners = [];

        this.recognition.onresult = (event) => {
            const transcript = Array.from(event.results).at(-1)[0].transcript;