Uncaught TypeError: Cannot read property 'length' of undefined(…)

I'm creating a speech to text convertor using webKitSpeechRecongizer, i followed well the tutorial about this API but I'm failing to get the returned texts and I get this error ("Uncaught TypeError: Cannot read property 'length' of undefined(…)").I don't have any idea about what this error is(just a student). Any help will be appreciated.Below is the code for speech to text convertor. Speech to text convertor

<style type="text/css">
    body{
        font-family: Arial;
    }
    #result{
        height: 200px;
        border: 1px solid #ccc;
        padding: 10px;
        box-shadow: 0 0 10px 0 #bbb;
        margin-bottom: 30px;
        font-size: 14px;
        line-height: 25px;
    }   

    button{

        font-size: 20px;
        position: absolute;
        top: 240px;
        left: 50%;
    }
</style>

</head>
<body>
<h4 align="center">Speech to text convertor</h4>
<div id = "result"></div>
<button onclick="startConverting();"><i class = "fa fa-microphone">      </i></button>
<script type="text/javascript">

var r = document.getElementById('result');

function startConverting (){


    if('webkitSpeechRecognition' in window){
    var speechRecognizer = new webkitSpeechRecognition();   
    speechRecognizer.continuous = true;
    speechRecognizer.interimResults = true;
    speechRecognizer.lang = "en-GB";
    speechRecognizer.start();

    var finalTranscripts = '';

    speechRecognizer.onresult = function (event){
        var interimTranscripts = '';

        for(var i = event.resultIndex; i < event.result.length; i++){
            var transcript = event.results[i][0].transcript;
            transcript.replace("\n", "<br>");
            if (event.results[i].isFinal){
                finalTranscripts += transcript;
            }else{
                interimTranscripts += transcript;
            }
        }
        r.innerHTML = finalTranscripts + '<span style = "color:#999">' +  interimTranscripts + '</span>';
    };

    speechRecognizer.onerror = function (event){

    };
}else{
    r.innerHTML = 'Your browser is not supported.If Google chrome,please upgrade!';
}



}



</script>
</body>
</html>

Solution

Wov, I actually never heard of it but it seems I got it working now.

var r = document.getElementById('result');
var btn = document.getElementById('btn');

btn.addEventListener('click', startConverting);

function startConverting() {
  if ('webkitSpeechRecognition' in window) {
    var speechRecognizer = new webkitSpeechRecognition();

    speechRecognizer.continuous = true;
    speechRecognizer.interimResults = true;
    speechRecognizer.lang = "en-GB";
    speechRecognizer.start();

    speechRecognizer.onresult = function(event) {
      if (event.results.length) {
        r.innerHTML = event.results[0][0].transcript;
      }
    };

    speechRecognizer.onerror = function(event) {

    };
  } else {
    r.innerHTML = 'Your browser is not supported.If Google chrome,please upgrade!';
  }
}

Here is the fiddle: https://jsfiddle.net/mehmetb/afd1jn2L/