1、首先要注意 会调用 MediaDevices.getUserMedia 获取权限 也就是说必须在https下 或则 localhost下。
2、recognition.lang 设置语言 通过 speechSynthesis.getVoices() 获得所支持的语言列表,
3、识别率较高,成本低
4、目前兼容性并不高,虽然2012年推出的规范,但目前只有部分浏览器支持。
以下是demo代码,可以尝试下。 Demo查看
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | var recognition = new webkitSpeechRecognition(); recognition.continuous = false; recognition.interimResults = false; recognition.maxAlternatives = 1; recognition.lang = 'en-US'; var text = '' var btn = document.querySelector('.btn'); recognition.onresult = function (rst) { console.log(rst.results[0][0]) if (rst.results && rst.results[0][0]) { if (rst.results[0].isFinal) { recognition.stop(); } else { btn.innerHTML = '听ing' } document.getElementById('text').innerHTML = rst.results[0][0].transcript } }
recognition.onspeechend = function () { console.log('stop') btn.innerHTML = '开始' }
btn.addEventListener('click', function () { if (btn.innerHTML == '停止') { recognition.stop(); btn.innerHTML = '开始' } else { recognition.start() btn.innerHTML = '停止' }
}, false) |