JavaScript30-anastasia/20 - Speech Detection/index-START.html at 49dac3dfd7078e552a8231b2ab4dbf8822dc235a · pie/JavaScript30-anastasia · GitHub

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Speech Detection</title>
  <link rel="icon" href="https://fav.farm/🔥" />
</head>
<body>

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

  <button class="start-button">Start</button>

<script>
  // We grab the SpeechRecognition object from the window
  // We use the webkit prefix for any browsers that don't support the unprefixed version
  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

  // We create a new instance of SpeechRecognition
  const recognition = new SpeechRecognition();

  // If we want to get continues results while we are speaking, we set the continuous property to true
  // Otherswise, we will only get a result when we stop speaking
  recognition.interimResults = true;

  let stopped = false;

  // Create a new paragraph element and add it to the '.words' div
  let p = document.createElement('p');
  const words = document.querySelector('.words');
  words.appendChild(p);

  // We listen for the 'result' event on the recognition object
  // Which is fired when we get a result from the speech recognition
  // The event object contains a results property
  // Which is an array of all the results we have received so far
  recognition.addEventListener( 'result', event => {
    const transcript = Array.from( event.results )
      .map( result => result[0] )
      .map( result => result.transcript )
      .join('');

    // We set the text content of the paragraph to the transcript
    p.textContent = transcript;

    // If the result is final, we create a new paragraph element and add it to the '.words' div
    // Final means that the speech recognition has finished processing the audio and has a final result for us
    if ( event.results[0].isFinal ) {
      p = document.createElement('p');
      words.appendChild(p);
    }

    // If the transcript includes the word 'stop', we set the stopped variable to true and stop the recognition
    if ( transcript.includes('stop') ) {
      stopped = true;
      recognition.stop();
    }

  } );

  // When we stop speaking, we want to start the recognition again so we can keep getting results
  // Otherwise, it will only work once and then stop
  recognition.addEventListener( 'end', () => {
    if ( false === stopped ) {
      recognition.start();
    }
  } );

  // We grab the start button and listen for a click event on it
  const startButton = document.querySelector('.start-button');

  // On click, we set the stopped variable to false and start the recognition again
  // We also disable the start button so we can't click it again while the recognition is running
  startButton.addEventListener( 'click', () => {
    stopped = false;
    recognition.start();
    startButton.disabled = true;
  } );

  // We disable the start button when the recognition starts
  recognition.addEventListener( 'start', () => startButton.disabled = true );

  // When the recognition ends, we check if the stopped variable is true
  // If it is, we enable the start button again so we can start the recognition again
  // So if the user has said 'stop', the recognition will stop and the start button will be enabled again
  recognition.addEventListener( 'end', () => {
    if ( true === stopped ) {
      startButton.disabled = false;
    }
  } );

  // We start the recognition for the first time when the page loads
  recognition.start();

</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>