這次串接了google的語音辨識功能
還在上面額外判斷說話的人是講中文還英文
等有時間再去研究看看sourer code是譖麼做到的吧
畢竟是一個喜歡自己造輪子的人～～

不知不覺今年也又要過完了

仔細回想了一下

今年發生了什麼事情

1. 第一次加入股市

(有起有落開始習慣每天都閱讀international news)

2. 第一次談到破百的offer

(今年好像面了5間吧, 從最一開始去找前端的職缺被洗臉,到可以拿到前端的offer, soft testing 每次都可以破百)

3. 存到人生第一桶金

(在去年剛要踏入社會的時候,原本預計要等到25歲的時候才可以達成自己的目標, 沒想到提前了一年, 真的有對自己對成功的定義一步一步的達成,對成功的定義：比預期的計畫更快達成,不斷的讓自己持續的思考未來的計劃, 雖然這個第一桶金幾乎都是從股市賺到的,實際上薪水也沒有變多多少QQ)

4. 第一次帶家人出國

(雖然才去日本五天不過感覺已經過上很奢侈的生活了,幫我的錢包QQ,直接不見了120張小朋友,以前總是想著等出社會之後,絕對不能虧待自己的家人,畢竟我是她放棄自己的青春換來的,真的辛苦妳了,媽)

5. 第一次出車禍

(這真的很倒霉, 不僅沒有拿到賠償, 還讓自己的身體壞掉, 運動表現回不到當初, 努力健身的身材也慢慢不見QQ, 不過好像真的遇到過一次才知道, 自己不是一個會隨意頭的人, 跌倒了再站起來就好, 被撞飛了就去醫院吧～～, 體驗復健的過程也是蠻不錯的)

5. 在工作上加入scurm

(原本覺得自己已經是一個可以獨當一面的人了, 沒想到加入了scure後, 發現自己要學的東西還多著呢, 從自己估時,自己溝通, 自己切scope, 發現問題解決問題, 覺得自己不自己是一個工人了, 感受到時程的壓力, 可以想得更遠一點, 之後未來可能會遇到些問題, 就可以提前先解決, 而不是先求快未來的事情未來再說, 今年真的成長了很多)

6. 開始學習前端技術&開始寫日誌

(這應該是我今年覺得自己最不一樣的一面了, 以前除了籃球有堅持不放以外, 其他的事情好像都是三分鐘熱度, 真沒有想到自己可以堅持這麼久, 每天的半夜三點學習時間, 每次做出新東西的喜悅, 我想因為有把它寫下來, 所以未來回來看我會更刻苦銘心, 再繼續加油吧, 一年再一年)

7. 學會放棄一段感情

(以前總想著在一起就是要不辜負別人, 可能因為我的家庭, 讓我很想珍惜每一個談過心的人, 但隨著今年的成長, 慢慢知道有些事情是勉強不來的, 不論是理念不合的同事, 態度不能的團隊, 還是真的不適合的感情, 常常在想沒有誰是不能相處的, 沒有誰是不能磨合的, 但這出社會後的這兩年我真的知道了, 能做的只有把自己做好, 適時的提醒拉人一把, 如果對方一心只想把你拉懸崖, 那就必須捨棄掉這份執著, 能做的只有把自己準備好, 用態度感染願意一起成長的人, 真的沒有辦法的事情, 就要學會放下包袱, 不然累的只有自己, 也會走得更慢)
畢竟每一個人要的都不一樣, 勉強來的事情也不是真的原本的她了

8. 多愛自己一點

(以前總想著一直賺錢不捨得花, 不去參加聚會, 不想花大錢吃好一點的東西, 只願意對別人好一些, 但後來想想, 這樣我好像沒有得到太多的快樂, 還不如有效地控制自己的金錢, 讓自保持愉悅的心情才會有更高的效率, 讓自己變得更好, 原本不敢主動去接觸女生, 怕覺得沒有要用心跟人相處好像不能當朋友, 但現在發現沒有試過不同的人, 怎麼知道自己真的想要的是什麼, 那些理想型, 其實都只是過去經驗的理想型, 但那個過去不知道是多久之前的經驗了, 其實現實沒有什麼理想的, 只有相處起來是不是真的很開心, 然後讓自己部會去計較是付出的多少是不是要回收多少的利益利益關係, 但還是想好好找一個固定的人, 專心的聽我說話, 讓我可以這輩子都對她敞開心房。)

9. 果斷

(記得還在當兵的時候, 總是想了很多有的沒的優柔寡斷, 不知道怎樣的決定才是對的才是好的才是不後悔的, 隨著工作經驗, 隨著心境上的不同, 我發現不管想得再怎麼多, 都還是會後悔, 但讓自己不要後悔的辦法就是, 相信自己的想法, 畢竟那是自己深思熟慮後的答案, 那就只要接受失敗了就好了啊, 反正人生就是不段的後悔, 看看要選擇走下去還是停在原地, 都不會後悔的人, 應該是都沒有在成長的, 畢竟這樣代表跟當時的你, 思路完全一樣, 在面對工作上的決策也是, 保持思考這樣就可以多想一點未來會遇到的問題提前避開, 現在回去看, 去年自己寫出來很感動的作品, 也會覺得我應該要把那時候的自己電爆。其實很開心)
(感情就像是寫考卷: 大家擁有的時間就是這麼多, 有的人失戀之後會卡在解不出來的第一題, 就這樣一直卡著, 等到時間快到的時候, 才選擇放棄, 隨便的後面的答案猜完, 有的人會選擇先忽略她, 努力的往下一道題目去解, 等最後再回過頭來, 看看第一題是不是真的沒解了放棄他; 又或著邊寫邊想著他, 等到了最後一題確定自己的分數已經很滿意了選擇放棄他, 失戀就像一道解不開的題目, 邊走邊看, 才會讓自己繼續在有限的時間前進, 加油吧明年。)

10. 總結

(其實沒有認真思考過自己的一年, 不知道自己今年得到了這麼多不只是技術上的東西, 原來整個心態想法都不斷的在成長, 這大概是人生最認真檢視自己的一年吧, 我想之後的我, 應該還是會繼續這麼做, 讓自己過得更踏實了一點, 也感受到自己的這一年其實過得很充實, 並不是每天班下班, 半夜不睡覺的再努力, 吃飯喝飲料的虛度光陰, 真的成長了很多.)

明年

希望可以再繼續努力, 雖然也不知道自己現在是不是真的要選擇離開, 但先把自己準備得更好待價而沽吧, 真的心動的事情, 是不會去計較後果是什麼的, 畢竟怎樣都會有更好的機會更好的選擇、更好的解法, 就做好自己就好了。

期許自己的感情, 遇到喜歡的就放手去表現自己, 人生就是這樣錯過的就是錯過了, 不把握機會怎麼會有好結果勒, 希望我覺得懂我的那個人, 可以來看看我, 跟我打聲招呼。

少一點得失心, 不要去計較自己做了多少努力, 換來的結果不是升遷或是加薪, 反正淺在的價值已經刻在我的身體裡了, 就只是遇到可能不懂你的主管, 跟其實在這家公司真的沒有這麼重要而已; 選擇一個喜歡我的人, 不然再怎麼努力都是徒勞無功, 想再多也沒有用, 放寬心, 試著多交一些朋友, 畢竟人是會成長的, 會錯過的就是會錯過, 有機會遇見的繞了一圈還是會回來。

還有10天，好好的繼續衝刺吧，不知道未來會不會變成我真的想變成的那種人，但我知道我現在已經是我想變成的那種人了。

20 - Speech Detection

主題

利用SpeechRecognition來做語音識別，
並透過interimResults來輸出識別的結果。

步驟

Step1. 啟動Local Server

這個練習需要使用到local server，
如果你已經有一個可在本機run起來的server可以直接使用，
或在這層資料夾底下運行npm install來安裝browser-sync，
安裝完成後可以透過指令npm start來啟動localserver(預設port3000)，

npm指令需要下載node.js來使用

Step2. 將SpeechRecognition建立起來

// 將全域環境中的SpeechRecognition指好(依據不同瀏覽器)
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
// 建立一個變數recognition來放為語音識別功能
const recognition = new SpeechRecognition();
// 讓語音識別回傳識別後的資訊（預設為false)
recognition.interimResults = true;

參閱：MDN-SpeechRecognition.interimResults

Step3. 把輸出區域準備好

// 建立一個p元素在html設定好的文字區中
let p = document.createElement('p');
const words = document.querySelector('.words');
words.appendChild(p);

Step4. 對識別系統做監聽

識別回傳的資料是NodeList，所以要用map操作得先轉array

// 監聽識別回傳
recognition.addEventListener('result', e => {
  // 將回傳資料先轉為array來操作
  const transcript = Array.from(e.results)
    // 透過map取得回傳陣列中的第0筆
    .map(result => result[0])
    // 在取得第0筆中的transcript
    .map(result => result.transcript)
    // 用join把連結符號消掉
    .join('')

  // 把回傳內容塞到p元素中
  p.textContent = transcript;
  // 如果回傳內容已經結束（一段話的結尾）在建立一個新的p元素來放下一段文字
  if (e.results[0].isFinal) {
    p = document.createElement('p');
    words.appendChild(p);
  }
})

// 監聽如果語音識別結束，則在開啟一次新的識別
recognition.addEventListener('end', recognition.start);
// 開始識別
recognition.start();

[DEMO]

BobChochola's Note

JavaScript30-Speech-Detection-20