javascript - Uncaught TypeError : recognition. addEventListener is not a function?JS语音识别错误

Question

当我尝试使用语音识别时，我收到错误 Uncaught TypeError: recognition.addEventListener is not a function，我不知道为什么，我什至从我正在学习的类(class)中复制了代码，但它仍然不起作用，任何提示都会赞赏。我正在使用 chrome(使用过 webkit)并使用过本地主机服务器和 vscode 的生命服务器两者都不起作用

class SpeechRecognition{
  constructor(){}

    getSpeech(){
    //Assigning speech
    window.SpeechRecognition = window.SpeechRecognition || 
     window.webkitSpeechRecognition;  

   //Speech variables
   const recognition = new SpeechRecognition();
    recognition.interimResults = true;
   recognition.lang = 'en-US';

   //UI variables
  let p = document.createElement('p');
  const note = document.querySelector('.note');
  note.appendChild(p);
  recognition.addEventListener('result', e => {

 })

}} 
 //Init 
const sp = new SpeechRecognition();
sp.getSpeech();

代码笔 https://codepen.io/JustaJSguy/pen/zarOLW

Answer 1

问题可能是您以与内置识别类相同的方式命名自定义类。您能否尝试重命名它并再次检查？另外，这是一个 simple implementation JavaScript30 course 中描述的语音识别.

// Works in Chrome and Firefox
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
// Creating new instance
const recognition = new SpeechRecognition();
recognition.interimResults = true;
recognition.lang = 'en-US';

let p = document.createElement('p');
const words = document.querySelector('.words');
words.appendChild(p);

recognition.addEventListener('result', event => {
    const transcript = Array.from(event.results)
        .map(result => result[0])
        .map(result => result.transcript)
        .join('');

    // If you make a pause,
    // you should probably create a new container for the next portion of recognized content
    if (event.results[0].isFinal) {
        p = document.createElement('p');
        words.appendChild(p);
    }

    p.textContent = transcript;
});

// We should start recognition after each pause
// Other way it will just stop recognizing forever (till the next page load)
recognition.addEventListener('end', recognition.start);

// Starting recognition first time
recognition.start();

html {
    font-size: 10px;
}

body {
    background: #ffc600;
    font-family: 'helvetica neue';
    font-weight: 200;
    font-size: 20px;
}

.words {
    max-width: 500px;
    margin: 50px auto;
    background: white;
    border-radius: 5px;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
    padding: 1rem 2rem 1rem 5rem;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
    background-size: 100% 3rem;
    position: relative;
    line-height: 3rem;
}

p {
    margin: 0 0 3rem;
}

.words:before {
    content: '';
    position: absolute;
    width: 4px;
    top: 0;
    left: 30px;
    bottom: 0;
    border: 1px solid;
    border-color: transparent #efe4e4;
}

<div class="words" contenteditable>
  </div>

顺便说一下，您应该手动启动识别并在每次暂停后重新启动它，如上面的代码片段所示。

附言此代码将 100% 在 Chrome 版本 69 中工作。