JS30 Day 20：Speech Detection学习笔记

今天要来做的是一个语音辨识的功能，当我们讲话时，可以判断并将我们说的话渲染至页面上。

Web Speech API 让我们能将「声音」这个要素融合进网页应用程式中，目前只有chrome支援，且语音辨识是用google server，而他分成两种，一种是 Speech Synthesis，文字转声音。一种是Speech Recognition，声音转文字，而我们在这边使用的是Speech Recognition。

首先我们先判断兼容性问题。

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

使用 speechRecognition ，须透过 SpeechRecognition 建构式建立一个物件实例。

    const recognition = new SpeechRecognition();

recognition.interimResults可以选择是否要连续触发，true就是会一直判断声音，且一个个字会打出来，false会等讲完才判断，且会一次打出来整句。

    recognition.interimResults = true;

判断我们所讲的语言。

    recognition.lang = 'en-US';    // recognition.lang = 'zh-TW';

再来就将我们的文字渲染至页面上。

    let p = document.createElement('p');    const words = document.querySelector('.words');    words.appendChild(p);

而我们在此处增听result事件，判断是否有结果，有结果的话，就将我们的声音转成文字的资料作处理，将其转成阵列后获取其资料，转成字串，最后赋予至变数transcript。

    recognition.addEventListener('result', e => {      console.log(e);      console.log(e.results[0].transcript);      // transcript为我们所辨识出的语音      const transcript = Array.from(e.results)        .map(result => result[0])        .map(result => result.transcript)        .join('');    });

而我们也可以设置关键字，当API判断出关键字时，就会将其作替换，转换成其他图示或是字。

      // 判断是否有这些字，有ㄉ话以后面的图示替换      // const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '?');      const poopScript = transcript.replace(/大便/gi, '?');      // 将文字设置在p上      p.textContent = poopScript;      // 当句子的被判断为最终结果时，该 isFinal 值就会显示为 true(语音辨识结束)，就会在那之后建立新段落      if (e.results[0].isFinal) {        p = document.createElement('p');        words.appendChild(p);      }

此段在防止在中断连线后失效。

    // 防止在中断连线后失效    recognition.addEventListener('end', recognition.start);

最后记住要设置start()，否则语音辨识不会有动作。

// 需要启动recognition    recognition.start();