无法在JavaScript中使用Webkit语音识别来清除文本区域

Question

在我的HTML页面中，我有一个类似的文本区域：

<textarea id="ex.note-textarea" placeholder="Create a new note by typing or using voice recognition." rows="6"></textarea>

和两个按钮以开始识别和结束。

在我的 AngularJS 控制器中

function exController(){
    var self = this;
    let finalTransScripts = '';
    let speechRecognizer = new webkitSpeechRecognition();

    this.startRecognition = function() {        
        if('webkitSpeechRecognition' in window) {
            let r = document.getElementById("ex.note-textarea");
            speechRecognizer.continuous = true;
            speechRecognizer.interimResults = true;
            speechRecognizer.lang = 'en-IN';
            speechRecognizer.start();

            speechRecognizer.onresult = function(e) {
                let interimTransScripts = '';
                for(let i = e.resultIndex; i < e.results.length; i++) {
                    let transScript = e.results[i][0].transcript;
                    transScript.replace('\n','<br>');
                    if(e.results[i].isFinal) {
                        finalTransScripts += transScript;
                    }else {
                        interimTransScripts += transScript;
                    }
                }
                r.innerHTML = finalTransScripts  + interimTransScripts ;
            }

            speechRecognizer.onerror = function() {

            }
        }else {
            r.innerHTML = "Your browser is not supported";
        }       
    }

    this.stopRecognition = function() {
        speechRecognizer.stop();
        // This is not clearing 
        document.getElementById("ex.note-textarea").innerHTML = '';
    }

即使现在停止后，我也再次按下start按钮，旧文本仍然保留。

我在做什么错了？