wesbos#20 - speech detection

easierbycode43 · easierbycode43 · commit ac101b93f687 · 2022-01-14T15:38:16.000-07:00
diff --git a/20 - Speech Detection/index.html b/20 - Speech Detection/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Speech Detection</title>
+  <script type="text/javascript" src="https://www.cornify.com/js/cornify.js"></script>
+</head>
+<body>
+
+  <div class="words" contenteditable>
+  </div>
+
+<script>
+  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+  const recognition = new SpeechRecognition();
+  recognition.interimResults = true;
+  recognition.continuous = true;
+
+  let p = document.createElement('p');
+  const words = document.querySelector('.words');
+  words.appendChild(p);
+
+  recognition.addEventListener('result', e => {
+
+    const transcript = Array.from( e.results )
+      .map(result => result[0])
+      .map(result => result.transcript)
+      .join('');
+    
+    p.textContent = transcript;
+
+    if ( e.results[0].isFinal ) {
+      p = document.createElement('p');
+      words.appendChild( p );
+    }
+    
+    if ( transcript.includes( 'unicorn' ) )  cornify_add();
+  })
+
+  recognition.addEventListener('end', recognition.start);
+
+  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>
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<style>
+    body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    a {
+        text-decoration: none;
+        font-size: 40px;
+    }
+</style>
+
+<a href="/js30/20%20-%20Speech%20Detection/index.html">🎙️</a>
