開始實做一些功能

目的

• 講話要在螢幕上出現
• 說話文字要斷行
• 會使用 web speach api

demo

Google 語音辨識 API

Web Speech （很清楚！）

開localhost 麥克風權限

代碼解釋

//加瀏覽器前綴詞
 window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

// 建立 SpeechRecognition物件
  const recognition = new SpeechRecognition();

// 開啟此屬性會文字一直返回到螢幕  直到話說完;
// 這個屬性也是布林值，如果設定為 true，表示在我們講話的當下就會即時辨識，不然就會在一段話結束之後，才會開始辨識。
  recognition.interimResults = true;

//建立p標籤 並加到dom上
let p = document.createElement('p');
  const words = document.querySelector('.words');
  words.appendChild(p);

// 監聽recognition的result事件，得到語音輸入文字
    recognition.addEventListener('results',e => {
    console.log(e.results);
      const transcript = Array.from(e.results)
       //e.results中保存的語音結果，本来不是數列，把它變成數列 是為了要用  map , join 功能
      .map(result => result[0])
      //每一段話，都是一個數列
     
      .map(result => result.transcript)
       // 每一段話都是一字串
     
      .join('');
     
  });

  recognotion.start();

 // 語音輸入结束了，停頓，自動建立一個p標籤
      if(e.results[0].isFinal){
        p =document.createElement('p');
        words.appendChild(p);
      }
  });

javascript 說明

ＭＤＮ

map()

http://fred-zone.blogspot.tw/2017/01/javascript-mapreduce.html
map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理後的值。
map() 方法按照原始數組元素順序依次處理元素。

join()

join()：連接字符串數組。將字符串、元組、列表中的元素以指定的字符(分隔符)連接生成一個新的字符串

Array.from()

ES6語法
Array.from 方法用於將兩類對象轉為真正的數組：類似數組的對象（array-like object）和可遍歷（iterable）的對象（包括ES6新增的數據結構 Set 和 Map）。
http://es6.ruanyifeng.com/#docs/array#Array-from
http://wiki.jikexueyuan.com/project/es6/array.html

原文網址：https://kknews.cc/zh-tw/other/3br2ja.html
event.results[i]

代表辨識了幾段話，每段話都會存在 results 這個陣列裡面，如果要獲取所辨識的值，可以直接用數字從陣列中取出

event.results[i].isFinal

承如上面所說的，等於 true 表示這段話判斷結束，等於 flase 表示還在判斷。( 如果是用手機的瀏覽器，就會都是 false，因此如果要用電腦瀏覽器來模擬手機的辨識狀態，記得要設為 flase )

isFinal >>印出來的結果可以看到，每一段話之間其實都存在著一個「isFinal」的屬性，這個屬性如果是 true，表示這段話結束

contenteditable html5 可編輯意思