新手村20 - Speech Detection

20 - Speech Detection

俗話說的好，一天一蘋果，醫生遠離我

一天一 JS，What the f*ck JavaScript？

small steps every day - 記錄著新手村日記

完成目標

語音輸入的功能：

  • 功能、畫面
    • 講話要變文字在畫面上
    • 停頓太久要分段

index_START.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Speech Detection</title>
</head>
<body>

  <div class="words" contenteditable>
  </div>

  <script>
    window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

  </script>

  <style>
    html {
      font-size: 10px;
    }

    body {
      background: #ffc600;
      font-family: 'helvetica neue';
      font-weight: 200;
      font-size: 20px;
    }

    .words {
      max-width: 500px;
      margin: 50px auto;
      background: white;
      border-radius: 5px;
      box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
      padding: 1rem 2rem 1rem 5rem;
      background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
      background-size: 100% 3rem;
      position: relative;
      line-height: 3rem;
    }
    
    p {
      margin: 0 0 3rem;
    }

    .words:before {
      content: '';
      position: absolute;
      width: 4px;
      top: 0;
      left: 30px;
      bottom: 0;
      border: 1px solid;
      border-color: transparent #efe4e4;
    }
  </style>

</body>
</html>

JS - step by step

首先，這個範例中所使用的技術只限於在Chrome瀏覽器中使用，因此不支援其他任何裝置，詳情可以參考這個API 的 MDN，此外，這個 API 是由 Google 所釋出的服務，其中有一些功能好像無法使用，有待研究…

判斷使用者的瀏覽器有沒有存在 SpeechRecognition、webkitSpeechRecognition

SpeechRecognition：https://tinyurl.com/y54hcmtc

1
2
3
<script>
	window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
</script>

接下來透過 interimResults 這個方法，來判斷使用者在講話的當下，如果設定為 True 就會即時辨識，不然設定為 False 就會在一段話結束之後，才會開始辨識。

SpeechRecognition.interimResults：https://tinyurl.com/y6rwfoq3

1
2
3
4
<script>
	window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
	recognition.interimResults = true;
</script>

當然地，要選擇辨識的語音為何？就要設定辨認的語系為何，以最長使用的英文就必須為 en-US ，如果是中文就要是 zh-TW！

SpeechRecognition.lang：https://tinyurl.com/y4e5ycna

1
2
3
4
5
<script>
	window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
	recognition.interimResults = true;
	recognition.lang = 'zh-TW';
</script>

接下來就是將語音辨識的字加在段落上

Node.appendChild()：https://tinyurl.com/poy5p24

1
2
3
4
5
6
7
8
9
10
11
<script>
	window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
	recognition.interimResults = true;
	recognition.lang = 'zh-TW';
	
	let p = document.createElement('p');
  const words = document.querySelector('.words');
  words.appendChild(p);

	recognition.start();
</script>

印出 result 看看監聽的 SpeechRecognitionEvent 是什麼吧！

1
2
3
4
5
6
7
8
<script>
	// 上略
  recognition.addEventListener('result', e => {
      console.log(e);
  });
	// SpeechRecognitionEvent {isTrusted: true, resultIndex: 0, results: 	SpeechRecognitionResultList, interpretation: null, emma: null, …}
</script>

再判斷一下每個單詞、還有設定某一些字會跑出大便的符號XDDD

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
	recognition.addEventListener('result', e => {
	// 上略	
  console.log(e);
  const transcript = Array.from(e.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join('');

    const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
    p.textContent = poopScript;

    if (e.results[0].isFinal) {
      p = document.createElement('p');
      words.appendChild(p);
    }
  });

  recognition.addEventListener('end', recognition.start);
  recognition.start();

</script>

就大功告成啦！

JS - final

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

  const recognition = new SpeechRecognition();
  recognition.interimResults = true;
  recognition.lang = 'en-US';
  
  let p = document.createElement('p');
  const words = document.querySelector('.words');
  words.appendChild(p);

  recognition.addEventListener('result', e => {
    console.log(e);
    const transcript = Array.from(e.results)
      .map(result => result[0])
      .map(result => result.transcript)
      .join('');

      const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
      p.textContent = poopScript;

      if (e.results[0].isFinal) {
        p = document.createElement('p');
        words.appendChild(p);
      }
  });

  recognition.addEventListener('end', recognition.start);
  recognition.start();

</script>

本刊同步於個人網站：http://chestertang.site/

本次範例程式碼原作者來源：https://tinyurl.com/yavm5f5n