How can I run SpeechRecognition correctly in chrome

It seems that SpeechRecognition.start() and SpeechRecognition.stop() is working correctly in my chrome.However,SpeechRecognition.onresult() can not be triggered.Please tell my the reason.Thanks a lot.
enter image description here

document.body.onclick = function() {
  recognition.start();
  console.log('Ready to receive a color command.');
}

recognition.onresult = function(event) {
  var color = event.results[0][0].transcript;
  diagnostic.textContent = 'Result received: ' + color + '.';
  bg.style.backgroundColor = color;
  console.log('Confidence: ' + event.results[0][0].confidence);
}

recognition.onspeechend = function() {
  recognition.stop();
  console.log('Command Stop');
}