let recognition = new webkitSpeechRecognition()

recognition.interinResults = true // 講話時即辨識
recognition.lang="zh-TW" // 辨識的語言
recognition.continuous = false // 持續辨識，不自動結束

let recognizing = false

/**
 * 開始使用語音辨識 API
 **/
const words = document.querySelector('.words')
let p = document.createElement('p')
words.appendChild(p)

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


//  // 對結果處理
//   recognition.addEventListener('result', e => {
//     console.log('result', e);
//     const transcript = Array.from(e.results)
//       .map(result => result[0])
//       .map(result => result.transcript)
//       .join('');

//       // 處理敏感詞
//       const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
//       console.log(poopScript);
//       p.textContent = poopScript;
      
//       // 如果語音停頓的話，就重新開一個段落等待輸入
//       if (e.results[0].isFinal) {
//         p = document.createElement('p');
//         words.appendChild(p);
//       }
//   });

/**
 * 因為講完一段話後辨識會自動結束，因此當觸發結束事件時，我們要在啟動語音辨識
 **/
recognition.addEventListener('end', e=>{
    recognizing? recognition.start():recognition.stop()
})

// 開始語音辨識
document.querySelector("#start").addEventListener("click", e => {
    e.preventDefault();
    e.stopPropagation();
    recognizing = true;
    recognition.start();
});

document.querySelector('#stop').addEventListener('click', e=>{
    e.preventDefault()
    e.stopPropagation()
    recognizing = false
    recognition.stop()
})