Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>#JS30 - 20 - Speech Detection</title>
- <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>
- </head>
- <body>
- <div class="words" contenteditable>
- </div>
- <script>
- const words = document.querySelector('.words')
- window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
- const recognition = new SpeechRecognition()
- recognition.interimResults = true
- let p = document.createElement('p')
- 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)
- }
- })
- recognition.addEventListener('end', recognition.start)
- recognition.start()
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement