iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 18
1
自我挑戰組

重新開始的Vue.js 30day系列 第 19

從頭開始的Javascript 入門 -Speech Detection Day17

開始實做一些功能

目的

  • 講話要在螢幕上出現
  • 說話文字要斷行
  • 會使用 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 說明

MDN

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 可編輯意思


上一篇
從頭開始的Javascript 入門 -實作demo Whack A Mole Game Day16
下一篇
從頭開始的Javascript 入門 -Flex Panels Image Gallery Day18
系列文
重新開始的Vue.js 30day21

尚未有邦友留言

立即登入留言