今天要學習的是語音轉成文字
可以使用Web Speech API
Web Speech API有兩個部分

1. speechSynthesis 語音合成(文字轉語音)
2. speechRecognition 語音識別(非同步語音識別)

今天我們要使用的是speechRecognition，speechRecognition會向用戶請求麥克風的許可
而且必須是在網路上或者自己架一個localhost才可以使用
一開始沒有架設localhost，會導致一直詢問是否可以使用麥克風

如果是在prefixed interface下，則window.SpeechRecognition需要前綴
變成webkitSpeechRecognition

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

我們需要建構一個物件實體，因此使用SpeechRecognition()建構式建立
並監聽result事件
這時候要找到我們存放語音轉成文字的地方
可以依照下列方法找到
要往下挖到第三層

在JS30內有使用一個recognition.interimResults，其布林值為true(預設是false)
意思是「是否即時顯示」
如果設定為fasle，則會等到一句話講完才會顯示
在這裡我們不加這個

const recognition = new SpeechRecognition();
//recognition.interimResults = true;
recognition.addEventListener('result', e => {
    console.log(e); // 物件SpeechRecognitionEvent
    console.log(e.results); //物件SpeechRecognitionResultList
    console.log(e.results[0]); //物件SpeechRecognitionResult
}
recognition.start();//開始辨識語音

所以我們要把他拿出來
首先將resultsList變成一個陣列
這樣才能使用.map取出存放字的result.transcript
最後再用.join('')將他們合併成string
存在變數transcript

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

接著我們要再html中唯一的.word中，appendChild()我們說的內容
首先我們.createElement一個<p>
接著將剛剛變數transcript內的字放到<p>

recognition.addEventListener('result', e => {
    ...
    let p = document.createElement('p');
    const words = document.querySelector('.words');
    words.appendChild(p);
    p.textContent = transcript;
});

這時候會發現
只要停頓一段時間不講話
就會得到剛剛說的語音
再次說話的時候並不會有新的文字出現
這是因為.start()只會開啟一次辨識
因此我們要偵測辨識結束
再開啟一次辨識

recognition.addEventListener('end', recognition.start);

可以成功讀取到第二次講的話了！
但是再次說話的時候
會把之前的文字洗掉
這是因為沒有掛新的<p>上去

這時候就需要找物件SpeechRecognitionResult的isFinal
這個boolean值false是表示語音辨識尚未結束
如果是true就是辨識完成

所以只要一辨識完成
我們就再掛一個<p>上去
就不會洗掉之前講的話了

recognition.addEventListener('result', e => {
    ...
    if(e.results[0].isFinal) {
        p = document.createElement('p');
        words.appendChild(p);
    }
});

Demo
完整程式碼