vue 中使用web speech 怎么在data中绑定获取到的数据

Question

问题描述

vue 中使用web speech 怎么在data中绑定获取到的数据

问题出现的环境背景及自己尝试过哪些方法

在网上找到了html中的web speech用法，用在vue的项目（cli脚手架搭建），想要把录音转换的文字发送给后台，可惜一直没法获取到

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

data () {

        return {
            speechContent: '',
            voiceContent: '',
            recognition: '',
        }
    },
       methods: {
        endRecord () {
            console.log(2+this.voiceContent);
            this.$axios.get("http://192.168.0.182:8084/question/test",{
                params: {
                    params :  this.voiceContent
                }
            }).then(
                res => {
                    console.log(res);
                }
            ).catch(
                err => {
                    console.log(err);
                }
            );

            this.recognition.stop();
        }
    },
      created () {
        this.recognition = new webkitSpeechRecognition();
        this.recognition.continuous = true;
        this.recognition.interimResults = true;
        this.recognition.lang = 'cmn-Hans-CN'; //普通话 (中国大陆)


        this.recognition.onresult = function(event) {
            let current = event.resultIndex;

            // 获取此前所说话的记录
             this.voiceContent = event.results[current][0].transcript;
           
        };
    }

你期待的结果是什么？实际看到的错误信息又是什么？

想请知道的大佬指点下怎么才能使钩子函数created里面的voiceContent 赋值给 data里面的voiceContent;
另外请大佬看下我的这种写法在vue里面规范吗

Answer 1

将 this.recognition.onresult 的函数改用箭头函数就行了。

this.recognition.onresult = (event) => {
                let current = event.resultIndex;

                // 获取此前所说话的记录
                this.voiceContent = event.results[current][0].transcript;
                console.log(this.voiceContent);
            };

Answer 2

您好，请问你这个是在什么端用的？是pc端么 这个web Speech的兼容性好像太好，我这边需要在手机h5里用，测了一下，很多手机不支持啊