iT邦幫忙

0

JS30 Day 20:Speech Detection學習筆記

今天要來做的是一個語音辨識的功能,當我們講話時,可以判斷並將我們說的話渲染至頁面上。

https://ithelp.ithome.com.tw/upload/images/20200723/20126182ep327Pv1i8.png

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();

尚未有邦友留言

立即登入留言